Master ReactJS - Làm chủ React, React Hooks, Redux - Xây dựng Project Clone Shopee

Cập nhật: 9/2021
1,850,000đ
1,250,000đTiết kiệm 32%
Khóa học bao gồm
  • Rút ngắn 1-2 năm lập trình của bạn với 20h video chuyên sâu
  • Project E-Commerce giúp bạn tự tin ứng tuyển vào các cty công nghệ
  • Học qua Social Learning Group Facebook cực nhanh
  • Đăng ký một lần, học mãi mãi
Bạn đã chán việc tự học React và không biết code của mình có chuẩn hay chưa? Bạn không có thời gian cho việc thử, gặp lỗi và sửa lỗi. Chọn cho mình một khóa học React chất lượng là sự lựa chọn sáng suốt nhất của bạn. Khóa học React - clone Shopee của mình được đầu tư kiến thức kĩ lưỡng từ căn bản cho đến nâng cao, bạn sẽ được xây dựng một dự án E-Commerce hoàn chỉnh từ khâu UI -> CSS -> React. Project clone Shopee được thiết kế với kiến trúc khoa học, dễ mở rộng và dễ tiếp cận cho người mới. Tất cả các dòng code trong khóa học được mình tối ưu để cho ra một sản phẩm đáp ứng tiêu chí nhanh, nhẹ, mượt. Đảm bảo chất tới từng đồng các bạn bỏ ra.

Dư Thanh Được Founder Xdevclass.com

Nội dung học tập
Về tác giả
Các khóa học liên quan
Q&A

Bạn sẽ nhận được

Được build một project ngay từ đầu với cấu trúc best practice khoa học và dễ tái sử dụng
Tự tay code phần authentication cho website, điều mà các bạn mới ít được code khi join vào một project
Nắm vững kiến thức React cốt lõi từ class component đến functional component
Nắm vững React hook, React Hook Form, React Router, Redux, Redux Toolkit
Các kỹ năng cải thiện hiệu xuất web giúp web chạy nhanh và mượt
Hiểu được các lỗi cần tránh khi làm việc với React
Các kỹ năng debug React App
Những kỹ năng mà khi đi làm bạn mới nhận được như đọc API document, sử dụng Postman hay xử lý các lỗi trả về từ API
Học hỏi thông qua Best Practice của Shopee - Đứng trên vai người khổng lồ
Lượng kiến thức khổng lồ về React sẽ giúp bạn tự tin ứng tuyển vị trí Front-End ở các cty công nghệ hiện nay
Và còn rất nhiều thứ hay ho hấp dẫn mình sẽ chia sẻ trong khóa này.

Nội dung học tập

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

  • Bài 1: ReactJS là gì, tại sao phải học ReactJS
  • Bài 2: Những cách setup một project React

Chương 2: Setup môi trường

  • Bài 3: Cài Nodejs và VS Code: Cài extension cần thiết
  • Bài 4: Cài đặt Git
  • Bài 5: Tạo Repo trên github
  • Bài 6: Tạo SSH key và clone repo
  • Bài 7: Sử dụng CRA để tạo project React
  • Bài 8: Sơ lượt về cấu trúc folder của ReactJs
  • Bài 9: Setup Prettier và ESLint
  • Bài 10: CICD và Deploy với Vercel và Netlify

Chương 3: React căn bản

  • Bài 11: DOM và Virtual DOM là gì
  • Bài 12: JSX trong ReactJS
  • Bài 13: ReactDOM.render
  • Bài 14: Sự khác nhau giữ Class component và Functional compnent
  • Bài 15: Life cycle trong React Class
  • Bài 16: State và setState
  • Bài 17: Prop và PropTypes
  • Bài 18: Các cách render trong react
  • Bài 19: constructor
  • Bài 20: componentDidMount
  • Bài 21: componentWillUnmount
  • Bài 22: componentDidUpdate
  • Bài 23: Sơ lượt về React Hooks
  • Bài 24: Tất cả những gì cần biết về useState
  • Bài 25: Tất cả những gì cần biết về useEffect
  • Bài 26: Lỗi mutate state, props mà các dev hay gặp
  • Bài 27: Các yếu tố ảnh hưởng đến việc render của component
  • Bài 28: Higher Order Component
  • Bài 29: Tất cả những gì cần biết về React.memo
  • Bài 30: Tất cả những gì cần biết về useMemo
  • Bài 31: Tất cả những gì cần biết về useCallback
  • Bài 32: Tất cả những gì cần biết về ref, createRef, useRef, forwardRef
  • Bài 33: custom hook, thử tạo useInputNumber và usePrevious
  • Bài 34: useContext là gì và cách dùng như thế nào
  • Bài 35: useReducer là gì và cách dùng như thế nào
  • Bài 36: Sử dụng React Devtool để debug

Chương 4: Vấn đề CSS của React và chọn giải pháp tối ưu

  • Bài 37: Vấn đề global CSS trong React, Angular, Vue
  • Bài 38: CSS, SCSS
  • Bài 39: Atomic CSS
  • Bài 40: CSS module
  • Bài 41: CSS in JS (CSS inline, Styled Component)

Chương 5: Project Student Management

  • Bài 42: Tạo nhanh UI bằng bootstrap
  • Bài 43: Thêm logic state
  • Bài 44: Chia component Input và Student
  • Bài 45: Thêm chức năng cập nhật và xóa student

Chương 6: Project Validate Form với React Hook Form

  • Bài 46: Tạo UI trang Register
  • Bài 47: Áp dụng React hook form để validate

Chương 7: React Router căn bản

  • Bài 48: Tạo Route cho các page
  • Bài 49: Link và NavLink
  • Bài 50: Switch và exact
  • Bài 51: Redirect
  • Bài 52: Nested Route
  • Bài 53: Not Found
  • Bài 54: React Router hooks
  • Bài 55: Xử lý query params với custom hook useQuery

Chương 8: Redux và Redux toolkit

  • Bài 56: Tại sao dùng Redux và cách Redux hoạt động
  • Bài 57: Cấu hình file reducer, store và Redux Dev Tools
  • Bài 58: Cấu hình types và actions. Dùng HOC connect()
  • Bài 59: Dùng hook useSelector và useDispatch
  • Bài 60: Middleware với redux-thunk
  • Bài 61: Dùng immer để mutate state
  • Bài 62: Giới thiệu về Redux Toolkit
  • Bài 63: Configure store và root Reducer
  • Bài 64: Sử dụng createReducer và createAction
  • Bài 65: Sử dụng createSlice và createAsyncThunk

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

  • Bài 66: Khởi tạo Project, Setup Prettier, ESLint, jsconfig.json
  • Bài 67: Cài một số package cần thiết. Setup CSS global và fonts
  • Bài 68: Setup Redux và Router
  • Bài 69: Code giao diện RegisterLayout, Footer, HeaderRegister
  • Bài 70: Code giao diện Register Page, InputText, InputPassword
  • Bài 71: Uncontrolled Components là gì
  • Bài 72: Code validate Register Page
  • Bài 73: Code Http class
  • Bài 74: Code auth.slice cho register, hoàn thiện apply API vào Register
  • Bài 75: Cấu hình postman để test API
  • Bài 76: Code UI trang Login
  • Bài 77: Apply API cho trang Login

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

  • Bài 78: Code UI MainLayout
  • Bài 79: Code UI Navbar, cập nhật haldeAuthFulfilled, Fix bug trong initialState authSlice
  • Bài 80: Tách Popver Component, cập nhật PropTypes
  • Bài 81: Code UI Header
  • Bài 82: Guard là gì? UnauthenticatedGuard và AuthenticatedGuard
  • Bài 83: Code chức năng Logout
  • Bài 84: Code UI FilterPanel
  • Bài 85: Code UI SortBar
  • Bài 86: Code UI ProductItem
  • Bài 87: Code UI Pagination
  • Bài 88: Xử lý get API Categories
  • Bài 89: Xử lý get API Products
  • Bài 90: Xử lý filterPanel và đồng bộ hóa lên URL
  • Bài 91: Xử lý sortBar
  • Bài 92: Xử lý phân trang Pagination
  • Bài 93: Xử lý Search sản phẩm

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

  • Bài 94: Tạo UI trang ProductDetail
  • Bài 95: Tạo UI ProductQuantityController
  • Bài 96: Code chức năng slider
  • Bài 97: Code logic cho ProductQuantityController
  • Bài 98: render HTML (rich text - WYSIWYG) an toàn trong React
  • Bài 99: Thêm sản phẩm vào giỏ hàng
  • Bài 100: Xử lý khi thêm sản phẩm thất bại

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

  • Bài 101: Get sản phẩm trên popup giỏ hàng
  • Bài 102: Tạo HeaderCart và CartLayout
  • Bài 103: Tạo Checkbox component
  • Bài 104: Tạo trang Cart
  • Bài 105: Code logic cập nhật số lượng đơn hàng. Tạo local state với createNextState
  • Bài 106: Code logic check đơn hàng
  • Bài 107: Chức năng xóa và mua sản phẩm

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

  • Bài 108: Code UI Sidebar User
  • Bài 109: Nested Route cho User page, trick hay cho khai báo path
  • Bài 110: Code UI trang Profile
  • Bài 111: Code UI trang Password
  • Bài 112: Code UI trang Purchase
  • Bài 113: Code Logic trang Profile
  • Bài 114: Code Logic trang Password
  • Bài 115: Code Logic trang Purchase

Chương 14: Tối ưu UX và hiệu suất cho website

  • Bài 116: Giảm kích thước js với lazy loading
  • Bài 117: Loại bỏ source map trên production
  • Bài 118: Tối ưu path với class
  • Bài 119: Cải thiện UX với global loading

Chương 15: Bonus

  • Bài 120: Đa ngôn ngữ trong React
  • Bài 121: Cải thiện title cho React với React helmet async
  • Bài 122: Thay đổi logo và tên project
  • Bài 123: Sử dụng ErrorBoundary để tránh crash app

Chương 16: Tạo một project React bằng Webpack

    Chương 17: Và còn nhiều kiến thức cực chất đang chờ bạn