ReactJs Super - Dự án Shopee Clone Typescript

Chương 1: Giới thiệu về khóa học Quan trọng

Tất cả tài nguyên khóa học sẽ được gói gọn trong này bao gồm group facebook hỗ trợ, group chat, API Document, Github, tài liệu markdown của khóa học

Bạn hãy xem thử cảm nhận của 1 bạn học viên của mình về khóa học khác tương tự (nổi tiếng nhất thị trường)

Khóa học đó chỉ dạy sơ sơ, những thứ căn bản chưa chắc giúp bạn vượt qua vòng phỏng vấn fresher nữa là junior. Trong khi đó, kiến thức trong khóa học của mình bạn sẽ không tìm thấy được ở bất kỳ khóa học nào ngoài kia.

Các bạn học khóa mình xong xin đừng hỏi mình "Có đủ xin được junior không", vì điều này quá dễ.

1 giờ 20 phút

Chương 2: Ôn tập kiến thức Javascript cần thiết

Đây là chương giúp bạn củng cố kiến thức Javascript trước khi bước vào giai đoạn try hard

Những khóa học ngoài kia mặc định là kiến thức Javascript của bạn đủ để học React cho đến khi học thì bị nó vật cho bầm dập.

Đây là lý do mình đưa chương này vào khóa học của mình, mình muốn các bạn dù chỉ mới có kiến thức Javascript cơ bản vẫn có thể học được. Học xong chương này bạn sẽ vỡ lẻ ra nhiều thứ và code cứng tay hơn nhiều.

Kiến thức Javascript trong chương này bạn phải tìm ở những khóa Javascript nâng cao mới có được

38 phút

Chương 3: Typescript

Chúng ta sẽ học nhanh các khái niệm quan trọng nhất của Typescript trong chương này

Tại sao nó chưa đến 1 tiếng đồng hồ? Vì học Typescript là cả một chặng đường dài, mình sẽ khéo léo đưa các trường hợp dùng typescript trong thực tế vào các bài giảng tiếp theo để việc học của các bạn không bị nhàm chán.

Tin mình đi, chỉ cần vài chục phút của mình là đủ chiến rồi (không cần dài dòng lan man như những khóa Typescript)

1 giờ 15 phút

Chương 4: Kiến thức về developer tool, Postman và API

Mình sẽ hướng dẫn các bạn sử dụng các tool như Dev Tool, Postman. Nhiều bạn học xong chương này mới tự hỏi “Tại sao trước giờ không biết đến nó sớm hơn “

2 giờ 14 phút

Chương 5: NodeJs và Webpack cơ bản đến nâng cao

Học NodeJs ư? Các bạn không nhìn nhầm đâu! Vì muốn học Webpack thì các bạn phải hiểu NodeJs.

Phần này sẽ giúp các bạn tạo một dự án với webpack và custom chuyên sâu trong webpack như caching, performance

3 giờ 57 phút

Chương 6: Git căn bản đến nâng cao

Các bạn sẽ được học cách cài đặt và sử dụng git trong thực tế. Những case như clone, push, resolve conflict, squash, merge, rebase,... sẽ được mình hướng dẫn và giải thích cực chi tiết trong chương này.

Mua khóa học ReactJs mà như fullstack ý nhỉ 

1 giờ 24 phút

Chương 7: Kiến thức Authentication

Authentication là một module quan trọng trong một dự án, thường thì các bạn mới sẽ không được làm chức năng này vì nó khá là khó

Nhưng mình sẽ dạy các bạn phần này, thực hành với access token và refresh token tự động luôn.

19 phút

Chương 8: Tổng quan về React

Trong chương này bạn sẽ có được cái nhìn tổng quan về MPA và SPA. Hiểu được ReactJs là gì và Tại sao lại chọn ReactJs mà không phải Angular hay Vue?

Ngoài ra bạn cũng sẽ biết được những cách setup một dự án React, liệu ngoài dùng Create React App thì có thể dùng React giống như Jquery được hay không? Tất cả sẽ được mình giải thích trong chương này

29 phút

Chương 9: Cài đặt môi trường cho dự án React

Những thứ bạn cần để có một môi trường hoàn hảo để code React sẽ nằm trong chương này.

Mình đã làm hơn 3 doanh nghiệp và mình luôn áp dụng cách thức này cho cả team. Mình cam đoan với bạn là nó chất lượng hơn nhiều dự án của các cty công nghệ ở ngoài kia.

6 giờ 22 phút

Chương 10: React Main Concept

Những concept chính về ReactJs như state, lifecycle, uncontrolled component, composition vs inheritance

Bài Thinking in React là thứ mà những khóa học khác không chỉ cho bạn - Đây là lý do nhiều người học xong không làm được

37 phút

Chương 11: CSS trong React

Khuyết điểm của ReactJs và những cạm bẫy gây nên bug khi dùng css trong ReactJs sẽ được mình giải thích trong chương này

Các bạn sẽ được tiếp cận đến những phương pháp css cho ReactJs: SASS, Inline CSS, Atomic CSS, Styled Component, CSS Module

1 giờ 37 phút

Chương 12: React Hook cơ bản

Bạn sẽ được học "rất kỹ" về các hook như useState, useEffect, useContext cùng với đó là cách custom hook sao cho có thể tái sử dụng code một cách dễ dàng

Đặc biệt trong phần này mình có đề cập đến Những nguyên tắc dùng hook. Đây là thứ các bạn mới hay bỏ qua khi học dẫn đến học xong chả biết cái hook nó hoạt động như thế nào.

2 giờ 18 phút

Chương 13: Project Todo List với Typescript

Một project TodoList huyền thoại nhưng đã được mình biến tấu, xào nấu. Các bạn học viên của mình học xong chương này nói với mình rằng "tưởng là Todo nhưng không phải là Todo"

Trong phần này mình sẽ hướng dẫn các bạn tư duy phân tích, bóc tách component sao cho khi đi làm, nhìn vào design là biết ngay chúng ta sẽ code như thế nào

5 giờ 8 phút

Chương 14: React Hook nâng cao [React 18]

Phần này các bạn sẽ được học về các kỹ thuật nâng cao trong ReactJs phiên bản mới nhất hiện nay

Ví dụ: memo, ref, context API, useDebugValue, useDeferredValue, React Portal, Error Boundary, Render Props, HOC,...

Đặc biệt trong bài useLayoutEffect bạn sẽ biết được tiến trình paint trong trình duyệt là như thế nào. Đây là một video đào sâu vào cốt lõi của trình duyệt, bạn sẽ được khai thông nhiều thứ sau khi xem bài này 

7 giờ 57 phút

Chương 15: Redux và Redux Toolkit

Mình có thể đưa chương này làm thành một khóa học Redux riêng biệt cũng được, vì lượng kiến thức trong chương này tương đương những khóa học về Redux nổi tiếng ở nước ngoài.

Redux là thứ mà rất nhiều bạn mới học React rối não, nhưng học xong chương này thì tin mình đi, Redux is so easy! Bạn có thể tự tin join và làm bất kỳ dự án nào có áp dụng thư viện Redux

Mình không chỉ dạy bạn Redux nguyên thủy, bạn sẽ được học về bộ công cụ Redux Toolkit và RTK Query mới nhất của team Redux

1 giờ 9 phút

Chương 16: React Router v6

Phân trang với React Router V6, mình giám chắc với các bạn rằng có rất nhiều khóa học React ngoài kia đang dạy bạn V5 - phiên bản cũ. Bạn code theo sẽ gặp lỗi rất nhiều.

V6 có rất nhiều thay đổi với cách code đơn giản và cải tiến hơn nhiều so với V5. Tất cả sẽ được mình trình bày trong chương này

3 giờ 50 phút

Chương 17: React Query

Đây là signature riêng của khóa học, React Query được coi là phát minh vĩ đại nhất từ khi React Hook ra đời.

Từ khi dùng React Query, mình cảm thấy như đang ở trên mây, sướng vô cùng

Càng ngày càng nhiều công ty chuyển từ Redux sang React Query, vậy nên mình đưa React Query làm state mananger chính cho project Clone Shopee Typescript

27 giờ 8 phút

Chương 18: Clone Shopee trang đăng ký & đăng nhập

Chương 19: Clone Shopee trang danh sách sản phẩm

Chương 20: Clone Shopee trang chi tiết sản phẩm

Chương 21: Clone Shopee trang giỏ hàng

Chương 22: Clone Shopee trang thông tin user

Chương 23: Clone Shopee nâng cao & Performance

Tất cả 6 chương này sẽ giúp bạn có một project Clone Shopee cực xịn xò để viết vào CV và có được tỉ lệ đậu phỏng vấn cao hơn

Trong project này mình sẽ sử dụng:

• Build Tool: Vite
• Linter: Prettier + ESLint + Editor Config
• Thư viện SPA: ReactJs
• Ngôn ngữ: Typescript
• Thư viện CSS: Tailwindcss, Floating UI
• Quản lý form + validate: React Hook Form + Yup
• State Manager: React Query + Context API
• Gọi API: Axios
• Authentication: JWT (access token + refresh token)
• API: API thương mại điện tử độc quyền của mình
• Unit Test: Vitest + React Testing Library + Mock Service Worker
• Quản lý component: Storybook
• SEO: React Helmet
• Đa ngôn ngữ: I18Next

6 chương này là tổng hợp tất cả những gì mình biết và những gì mình học được sau hơn 4 năm đi làm Front-End

Tóm lại, bạn không cần mất đến tận 4 năm như mình để có được những kiến thức của mình. Sẽ không có bất cứ khóa học nào khác chỉ bạn lượng kiến thức nâng cao như cách mình chia sẻ với bạn trong những chương này.

Đừng sợ nếu bạn không biết một vài thứ trong số đó, vì mình dạy từ đầu mà 

51 phút

Chương 24: SEO cho React

Học xong chương này bạn sẻ hiểu được lý do những bài viết của mình mới viết chưa lâu vẫn lên top google tìm kiếm. Dưới đây là bài viết của mình lên top 1 từ khóa "deploy nextjs lên vps" ngày 11/1/2023

Không gì khác đó là nhờ SEO! Mình sẽ hướng dẫn các kỹ thuật SEO cho React làm sao hiệu quả nhất

4 giờ 37 phút

Chương 25: Unit Test & Integration Test cho project Clone Shopee

Unit Test là một kỹ thuật mà rất nhiều bạn bỏ qua vì nó hơi khó và rất ít người dạy, nhưng nghịch lý là những doanh nghiệp trả lương cao đều yêu cầu kỹ năng này

Đây chính là kỹ thuật đã giúp lương mình tăng từ 20 triệu/tháng lên đến hơn 30 triệu/tháng

49 phút

Chương 26: Storybook cho React

Storybook là một thư viện giúp quản lý các component trong ứng dụng web chúng ta, hầu như những công ty lớn nào cũng dùng Storybook

Học xong phần này bạn sẽ hiểu ra được lý do tại sao những doanh nghiệp lớn đều dùng Storybook và yêu cầu ứng viên của họ phải biết dùng. Tất nhiên yêu cầu cao thì lương cao!

just now

Chương 27: Quà tặng đặc biệt trị giá 230$

Đây có lẻ là bài học sâu sắc nhất mà mình từng được học. Mình đúc kết hết lại chỉ trong 16 trang PDF, nhưng một khi bạn đã thực sự hiểu những gì mình viết trong phần này... Đó chính là lúc nộp CV, phỏng vấn, deal lương không còn là vấn đề khó khăn đối với bạn nữa!

À bạn còn được tặng thêm 2 ebook về CSS của 2 tác giả nước ngoài trị giá 130$ nữa