Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO

Name: Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO
Rating: 4.7 (75 reviews)

Khóa học Nextjs 14, ReactJS, Typescript từ cơ bản đến thực chiến cho ngườii mới bắt đầu 2024 PRO - Lập trình thật dễ

Created byKhánh Nguyễn

Last updated 8/2024

Vietnamese

What you'll learn

Nắm vững các kiến thức của ReactJS
Thành thạo sử dụng Redux (Redux thunk, Redux toolkit)
Nắm vững và thành thạo sử dụng NextJS 14 - NextAuth
Sử dụng thư viện Material UI để xây dựng giao diện nhanh hơn
Biết cách tối ưu code và tăng performance
Biết cách phân quyền cho hệ thống trong thực tế
Có một dự án chất lượng như dự án thực tế
Xây dựng dự với CI-CD như khi đi làm
Phân tích dự án, học cách tìm ra vấn đề và biết cách research để giải quyết vấn đề
Tối ưu hóa hiệu suất của các ứng dụng web được xây dựng với NextJS, ReactJS và Typescript
Server-side Rendering (SSR),Static Site Generation (SSG) trong NextJS 14
Routing trong NextJS 14
Biết cách xử lý phân quyền trong thực tế với JWT trong Nextjs
Thành thạo App Router và Page Router trong NextJS 14
Rest API với NextJS + MongoDB
Xây dung dự án website bán hàng xịn xò
Biết cách tối ưu SEO cho 1 trang web

Course content

32 sections • 342 lectures • 126h 2m total length

Demo kiến thức đạt được khi kết thúc khóa học4:59
Demo danh sách API trong dự án thực chiến19:10
Demo dự án thực chiến website bán hàng12:50

Biến, kiểu dữ liệu và sự khác nhau giữa let, const, var trong javascript15:36
Toán tử so sánh, câu điều kiện, và kiểu dữ liệu undefined, null8:50
Hàm và tham số trong javascript6:23
Vòng lặp trong javascript13:34
Method array trong javascript12:00
Template literals trong javascript2:08
Destructuring trong javascript7:05
Enhance Object literals2:56
Spread và Rest parameter trong javascript14:05
Tham trị và tham chiếu trong javascript16:00

Khởi tạo dự án ReactJS và phân tích structure trong ReactJS10:49
JSX là gì? Hoạt động như nào?4:25
Dom và Virtual Dom là gì?3:53
Import và export trong Javascript2:54
Styling trong ReactJS5:54
Props và State trong ReactJS3:04
useState trong ReactJS6:06
Thực hành todo list với useState trong reactjs10:52
Thực hành phân chia component và Props12:24
Tìm hiểu useRef? Sự khác nhau giữa useRef và useState?4:43
Tìm hiểu useEffect trong ReactJS11:46
Tìm hiểu useMemo trong ReactJS4:15
memo trong ReactJS3:22
useCallback trong ReactJS3:13
class component trong ReactJS8:04
Lifecycle trong reactJS13:51
Tìm hiểu useContext trong ReactJS10:10
Tìm hiểu useReducer trong Reactjs12:49
Tìm hiểu về react-router-dom V6 trong reactJS26:19
Material UI là gì? Sử dụng nó như nào?44:06
Error boundary trong reactjs6:31

NextJS là gì? Tại sao phải dùng nó?3:50
Hydrate trong NextJS là gì?4:05
Khởi tạo dự án nextjs 143:42
Phân tích structure dự án Nextjs 14 (App Router)6:40
React Server component (RSC) là gì? Những thứ cần biết về Nextjs2:51
Routing trong nextjs 14 ( App Router)12:31
Catch all segment in Routing9:09
Not Found Page trong NextJS 144:31
Custom Not Found page của từng trang4:53
Cách group route lại trong NextJS6:35
Layout trong NextJS (Nested Layout, route group layout)11:00
Metadata trong NextJS 1414:17
Link và navigate trong NextJS 149:41
Loading UI trong NextJS4:13
Handle Error trong NextJS 149:09
Parallel Routes11:33
Static side generation (SSG) là gì?2:34
Server Side Rendering (SSR). So sánh SSR vs SSG.4:07
Component Image trong nextjs8:10
Route handlers trong NextJS (Rest API)5:51
GET method trong NextJS 14 (Rest API)15:17
POST method trong NextJS 14 (Rest API)6:47
PATCH method trong NextJS 14 (Rest API)6:10
DELETE method trong NextJS 14 (Rest API)3:47
Redirect trong route handlers1:11
Headers trong route handlers5:57
Cookies trong route handlers4:30
Caching trong route handlers4:49
Middleware trong NextJS 1418:42
Server component và Client Component trong NextJS 149:22
Lifecycle trong NextJS3:27
Static Rendering trong NextJS9:56

Tạo model và connect database trong NextJS7:55
Viết API tạo bài post trong NextJS11:07
Viết API lấy danh sách bài post (phân trang)8:19
Viết API lấy details bài post và cập nhật bài post9:07
Viết API xóa bài post4:17
Fetching data CRUD trong nextjs46:47
Server actions trong nextjs46:42
Xử lý reset form và caching6:48
Có nên sử dụng NextJS viết API và vài điều cần lưu ý.5:05

Tìm hiểu cơ bản về structure trong template nextjs 14 (Page Router)12:47
Link change: https://github.com/khanhnttu/app_shop_fe/pull/2/commits/06d61692d0c455a501f99fc581ac3bd184fd575a
Phân tích phần database cho dự án (Mongodb)5:59
Hướng dẫn tạo cơ sở dữ liệu với MongoDB4:50
Link github api: https://github.com/khanhnttu/API_SHOP
Link github templatee FE: https://github.com/khanhnttu/template-next-react
Hướng dẫn tải và set up projecct ở phía Backend12:57
Tạo tài khoản cho tính năng gửi email cho dự án4:51
Kết nối API ở phía front-end với NEXTJS 1413:40
Hướng dẫn đăng ký tài khoản Vercel1:25
Deploy NextJS 14 lên vercel4:24
Set up CI/CD cho dự án NextJS với Vercel và GitHub Actions12:02
Giải thích phần custom theme trong Material UI22:14

Tạo custom component text field cho dự án24:19
Xây dựng UI Login Page (Dùng Yup, use-hook-form để validate trong form)37:36
Hoàn thành UI trang Login27:36
Xây dựng và hoàn thiện UI trang Register16:04
Tổng quan về luồng login, register17:57
Luồng hoạt động của phần auth ở API17:23
Integrate api login cơ bản26:15
Xây dựng layout cơ bản cho dự án30:02
Custom BlankLayout cho dự án20:21
Custom navigation vertical cơ bản29:45
Hướng dẫn dùng kỹ thuật recursive để xử lý navigation vertical25:01
Hoàn thành layout cho dự án16:37
Xử lý sau khi login thành công25:15
Improvement lại luồng login, logout14:00
Xử lý luồng AuthGuard, GuestGuard cho dự án41:38
Interceptor trong Nextjs 1427:43
Dark mode trong Nextjs 14 với Material UI9:09
Đa ngôn ngữ với react-i18next trong Nextjs 1425:04
Phân quyền cho dự án trong Nextjs 14 (Phân quyền phần 1)23:51
Cải thiện luồng login và tạo route cho trang my profile11:52
Tạo UI cho trang my profile (P1)44:32
Hoàn thiện UI cho trang my profile40:13
Tích hợp Redux toolkit - Redux Thunk - Hoàn thiện luồng register44:24
Phân tích luồng phân quyền ở API12:05
Tích hợp api ở my profile (xử lý base64)56:10
Xử lý phân tách chuỗi cho fullName và cải thiện UI User Dropdown36:58
Custom component loading20:39
Improve luồng login và hoàn thành tính năng thay đổi mật khẩu54:24
Xây dựng cơ chế nhớ mật khẩu26:11
Tạo custom component select41:18

Requirements

Bạn chỉ cần có kiến thức cơ bản về HTML,CSS, Javascript
Chấp nhận khó khăn, không bỏ cuộc khi gặp khó khăn

Description

Khoá học này cung cấp một phương pháp thực hành cho những người muốn trở thành nhà phát triển frontend. Qua các dự án thực hành, người tham gia sẽ đối mặt với các tình huống thực tế, học các kỹ thuật giải quyết vấn đề từ cơ bản đến nâng cao. Cụ thể, khóa học tập trung vào phát triển web sử dụng các công nghệ frontend tiên tiến như: TypeScript, ReactJS 18, Next.js 14, Material UI, Redux Toolkit, Next Auth, Yup, CI-CD, tối ưu SEO, Redux thunks, SocketIo, React Query, Firebase, Storybook, Jest ... Đặc biệt sau khi kết thúc khóa học , mấy bạn sẽ biết được cách tìm ra nguyên nhân của lỗi và biết cách research để giải quyết vấn đề

Bạn có thể dùng mã khuyến mãi này nha: LTTD042026

Lưu ý: Bên sẽ không hỗ trợ những hv mua khóa học trái phép qua bên thứ 3.

Ngoài ra, người tham gia sẽ có được hiểu biết cơ bản về phát triển REST API với NodeJS, Express, MongoDB, và các công cụ khác. Dưới đây là các tính năng chính của dự án trong khóa học này:

Quản trị hệ thống:
- Quản trị người dùng - User Management
- Quản trị nhóm vai trò
- Phân quyền cho user - Thanh menu, page,...
Quản trị sản phẩm (CMS):
- Quản lý danh mục sản phẩm
- Quản lý sản phẩm
- Quản trị bình luận
Quản lý đơn hàng (CMS):
- Quản lý đánh giá của sản phẩm
- Quản lý đơn hàng
Cài đăt Settings (CMS):
- Quản lý phương thức thanh toán
- Quản lý phương thức giao hàng
- Quản lý danh sách thành phố
Người dùng - Trang chủ - User (Landing page):
- Đăng nhập, Đăng ký
- Đăng nhập, Đăng ký với Next-Auth
- Quên mật khẩu
- Thay đổi mật khẩu
- Đăng xuất
- Tài khoản của tôi
- Đơn hàng của tôi
- Đánh giá sản phẩm
- Nhận thông báo (firebase cloud messenger)
- Sản phẩm của tôi
  + Sản phẩm đã xem
  + Sản phẩm đã thích
Products (Landing page) :
- Phân trang sản phẩm
- Bộ lọc filter theo loại sản phẩm, đánh giá, vị trí, giá tiền
- Tìm kiếm sản phẩm
- Thanh toán
- Thích, bỏ thích sản phẩm
- Push notification (firebase)
- Bình luận sản phẩm (SocketIo)
- Tích hợp chatbotAI
- Đánh giá sản phẩm
Dashboard
- Thống kê người
- Thống kê danh thu
- Thống kê sản phẩm

Who this course is for:

Những bạn muốn trở thành lập trình viên Frontend
Những sinh viên mới ra trường, hoặc người chuyển ngành muốn có kinh nghiệm thực tế, hoặc project để apply CV

Khóa học NextJS 14-ReactJS-Typescript thực chiến 2024 PRO

What you'll learn

Explore related topics

Course content

Giới thiệu về dự án3 lectures • 37min

Những kiến thức Javascript cần thiết cho khóa học10 lectures • 1hr 39min

Tìm hiểu ReactJS21 lectures • 3hr 30min

Tìm hiểu typescript2 lectures • 25min

Tìm hiểu về NextJS 14 (App Router)32 lectures • 3hr 49min

Thực chiến xây dựng trang blog với NextJS 14 trong App Router9 lectures • 2hr 26min

Setup dự án10 lectures • 1hr 35min

Xây dựng API phần Auth5 lectures • 23min

Login, Logout, phân quyền trong NextJS 14, Dark Mode với MUI, đa ngôn ngữ30 lectures • 14hr 4min

Xây dựng phần bố cục cho quản trị hệ thống5 lectures • 2hr 35min

Requirements

Description

Who this course is for: