Quay lại khóa học
frontendBeginner

React Development Mastery

React Development Mastery

React từ nền tảng đến nâng cao: tư duy component, hooks, quản lý state (Context/Zustand), routing và tối ưu hiệu năng. Thực hành dự án SPA/Next.js, viết test và đo lường để tự tin xử lý vấn đề performance.

⭐ 4.9 (168 đánh giá)⏱ 44h👥 490 học viên📚 30 bài học📎 60 tài liệu🌐 Vietnamese
10.000.000 ₫
IT
Tạo bởi ITSS Training
🌐 VietnameseBeginner

Lộ trình học

Buổi 1
Ngày 1-2

Mục tiêu

  • Hiểu rõ React là gì và tại sao sử dụng
  • Setup môi trường development
  • Tạo component đầu tiên

Nội dung

  • Giới thiệu React, Virtual DOM và cơ chế reconciliation; lý do React phù hợp để xây dựng UI theo hướng khai báo và có thể dự đoán.
  • Cài đặt Node.js và npm/yarn; kiểm tra phiên bản, thiết lập nvm và mẹo xử lý lỗi môi trường thường gặp.
  • Khởi tạo ứng dụng bằng Create React App hoặc Vite, phân tích cấu trúc thư mục, scripts và cách cấu hình alias để import gọn gàng.
  • Nắm vững JSX: biểu thức, thuộc tính, children; quy tắc đặt tên component, props và cách tổ chức file.
  • Thực hành: tạo component đầu tiên, render danh sách đơn giản và tách nhỏ UI theo nguyên tắc single responsibility.
Buổi 2
Ngày 3-4

Mục tiêu

  • Làm chủ Props và State
  • Event handling
  • Conditional rendering

Nội dung

  • Sử dụng props để truyền dữ liệu/handler giữa component cha‑con; phân biệt controlled vs uncontrolled props.
  • Quản lý state nội bộ component: khởi tạo, cập nhật bất biến và tránh anti‑pattern khi setState liên tiếp.
  • Xử lý sự kiện: onClick, onChange, ngăn chặn hành vi mặc định và tối ưu handler để tránh re‑render.
  • Kết xuất có điều kiện bằng if/ternary/&&; hiển thị trạng thái loading/empty/error thân thiện.
  • Bài lab: xây form đơn giản có validation cơ bản và thông báo lỗi theo chuẩn UX.
Buổi 3
Ngày 5-6

Mục tiêu

  • Hooks: useState và useEffect
  • Component lifecycle
  • Lists và keys

Nội dung

  • useState cho state đơn giản; lưu ý batching updates và cập nhật dựa trên giá trị trước đó.
  • useEffect cho side effects: dependency array, cleanup và tránh lặp vô hạn; mô hình hóa lifecycle truyền thống.
  • Render danh sách với map(); chọn key ổn định để tối ưu reconciliation và tránh bug khó đoán.
  • Tách nhỏ component để giảm độ phức tạp; tách pure UI và container để dễ test.
  • Bài lab: fetch dữ liệu giả lập, hiển thị danh sách có phân trang và trạng thái tải.
Buổi 4
Ngày 7-8

Mục tiêu

  • Forms và controlled components
  • Lifting state up
  • Project cơ bản

Nội dung

  • Phân biệt controlled/uncontrolled components; chọn chiến lược phù hợp để tối ưu UX và hiệu năng.
  • Xây dựng validation đồng bộ/bất đồng bộ; hiển thị lỗi theo chuẩn UX và hỗ trợ bàn phím.
  • Lifting state up để chia sẻ dữ liệu giữa các component liên quan; hạn chế prop drilling bằng context.
  • Tổ hợp component (composition) thay vì kế thừa; slot pattern và API linh hoạt.
  • Bài dự án: hoàn thiện Todo App có filter, persist đơn giản và test cơ bản.
Buổi 5
Ngày 9-10

Mục tiêu

  • Advanced Hooks patterns
  • Custom hooks development
  • Context API optimization

Nội dung

  • useReducer cho state phức tạp: định nghĩa action rõ ràng, tránh side effects trong reducer và kiểm soát tính dự đoán.
  • Tối ưu với useMemo/useCallback: tránh re‑render không cần thiết, đo lường trước tối ưu để không lãng phí.
  • Viết custom hooks: tách logic truy cập localStorage/API; xử lý lifecycle và errors nhất quán.
  • Context API: phân mảnh context, tối ưu selector và tránh rerender toàn bộ cây.
  • Bài lab: refactor ứng dụng sang advanced hooks, đo lường tác động bằng React Profiler.
Buổi 6
Ngày 11-12

Mục tiêu

  • State management với Zustand/Redux
  • Server-side rendering với Next.js
  • Static site generation

Nội dung

  • Zustand cho state nhẹ: tạo store, selector tối ưu và tổ chức module rõ ràng.
  • Redux Toolkit: slice, RTK Query và chuẩn hóa luồng bất đồng bộ; quy tắc immutability.
  • Next.js tổng quan SSR/SSG/ISR; chọn chiến lược kết xuất phù hợp mục tiêu SEO và hiệu năng.
  • Thực hành getServerSideProps/getStaticProps, truyền dữ liệu an toàn và tối ưu cache.
  • Bài lab: tích hợp Next.js cho trang danh mục/chi tiết có SEO cơ bản.
Buổi 7
Ngày 13-14

Mục tiêu

  • Performance optimization
  • Code splitting và lazy loading
  • Testing với Jest và React Testing Library

Nội dung

  • Tối ưu render: React.memo, keys ổn định, tránh tạo object/array mới không cần thiết; đo lường bằng Profiler.
  • Code splitting/lazy loading với React.lazy/Suspense; chiến lược prefetch để tối ưu TTI.
  • Phân tích bundle bằng source‑map‑explorer; loại bỏ polyfill dư thừa và tối ưu dependency.
  • Testing với Jest/RTL: unit/integration; viết test có tính bền vững và ít phụ thuộc implementation.
  • Bài lab: áp dụng tối ưu vào dự án mẫu, so sánh metrics trước/sau.
Buổi 8
Ngày 15-16

Mục tiêu

  • Advanced patterns
  • Project thực tế
  • Deployment và CI/CD

Nội dung

  • Các mẫu nâng cao: render props/HOC và khi nào nên ưu tiên hooks để đơn giản hóa cấu trúc.
  • Compound components: API linh hoạt cho thư viện UI nội bộ kèm kiểm soát accessibility.
  • Bài dự án: hoàn thiện ứng dụng full‑stack nhỏ với auth, routing, gọi API và quản lý state.
  • Triển khai lên Vercel/Netlify; cấu hình môi trường, biến secrets và rollback an toàn.
  • Thiết lập CI/CD cơ bản: chạy test/lint/build khi mở PR và phát hành khi tag phiên bản.