Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Menu

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Khóa Học React Hiện Đại (Hooks, Context, NextJS, Router)

Khóa Học React Hiện Đại (Hooks, Context, NextJS, Router)

Vừa ra mắt! Theo sát giáo trình tôi giảng dạy cho học viên tại San Francisco. Hơn 10 dự án, bao gồm một ứng dụng ĐỒ SỘ!

4.6
(8,332 đánh giá)
44,649 học viên
Giảng viên
Colt Steele
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
79.000đ 1.559.000đ -95%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
39.0 giờ video
314 bài giảng
1 bài quiz
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 07/06/2026

Bạn sẽ học được gì

React Hooks! (Phần tôi yêu thích nhất trong React!)
Context API mới
Quản lý state với useReducer + useContext (Phiên bản Redux đơn giản)
Kiến thức cơ bản về React (props, state, v.v.)
Thành thạo React Router
Xây dựng hàng loạt dự án, mỗi dự án đều có giao diện đẹp mắt
Các Mẫu Quản Lý State trong React
Kéo & Thả (Drag & Drop) Với React
Viết component có style động với JSS
Các Mẫu React Router Thông Dụng
Làm việc với nhiều thư viện và công cụ
Tích hợp các thư viện UI như Material UI và Bootstrap vào ứng dụng React
Mẫu Thiết Kế và Chiến Lược trong React
Tìm hiểu mọi ngóc ngách của JSS!
Học cách sử dụng React để xây dựng ứng dụng responsive một cách dễ dàng
Thêm animation phức tạp vào dự án React
Gỡ lỗi và Sửa code React bị lỗi
Tối ưu hóa React component
Tích hợp React với các API
Học kiến thức cơ bản về Webpack trong một khóa học mini miễn phí!
Sự kiện DOM trong React
Form và xác thực phức tạp trong React
Sử dụng Context API với Hooks

Yêu cầu

Bạn cần có một chút kinh nghiệm với HTML, CSS và JavaScript, nhưng không cần phải là chuyên gia.
Bạn không cần kiến thức JavaScript nâng cao. Các tính năng ES7 sẽ được giải thích trong khóa học.

Đối tượng phù hợp

Người hoàn toàn mới với React hoặc các front-end framework nói chung
Người muốn xây dựng portfolio với các ứng dụng React ấn tượng
Học viên đang gặp khó khăn khi học React hoặc cần thêm bài tập thực hành
Người muốn nâng cao kỹ năng lập trình và học một kỹ năng có nhu cầu cao!

Nội dung khóa học

39 phần • 314 bài giảng
1 Chào Mừng Đến Với Khóa Học!
2 Tham Gia Cộng Đồng!
3 Giới Thiệu Về React
4 React Là Framework Hay Thư Viện?
5 Giới Thiệu Về Components!
6 Nhìn Vào Một Ứng Dụng Lớn
7 Thiết Lập Máy Chủ Của Bạn
8 Viết Component Đầu Tiên Của Chúng Ta
9 Component Dạng Hàm So Với Dạng Lớp
10 Tải Xuống Tất Cả Mã Nguồn, Slide & Tài Liệu
1 Quy Tắc Cơ Bản Của JSX
2 Cách JSX Hoạt Động Ở Hậu Trường
3 Nhúng JavaScript Vào JSX
4 Câu Điều Kiện Trong JSX
5 Bố Cục Ứng Dụng React Chuẩn
1 Giới Thiệu Về Props Trong React
2 Props Là Bất Biến?
3 Các Loại Props Khác
4 Demo Component Biểu Đồ Tròn Với Props
5 BÀI TẬP: Máy Đánh Bạc (Slot Machine)
6 BÀI TẬP: Lời Giải Máy Đánh Bạc
7 Vòng Lặp Trong JSX
8 Thêm Default Props
9 Tạo Kiểu Cho React
1 Giới Thiệu Về Create React App
2 2 Cách Cài Đặt CRA
3 Tạo Ứng Dụng Mới
4 Khởi Động Máy Chủ
5 Modules: Khóa Học Cấp Tốc Về Import & Export
6 BÀI TẬP: Modules Trái Cây
7 BÀI TẬP: Lời Giải Modules Trái Cây
8 Quy Ước Trong Create React App
9 CSS Và Tài Nguyên Trong Create React App
1 Giới Thiệu Bài Tập Pokedex
2 Tạo Component Pokecard
3 Thêm Component Pokedex
4 Tạo Kiểu Cho Pokecard và Pokedex
5 Thêm Hình Ảnh Đẹp Hơn
6 Component PokeGame
7 Tạo Kiểu Cho Pokegame
1 Mục Tiêu Về State
2 Chuyển Hướng Nhanh: Công Cụ Dành Cho Nhà Phát Triển React (React Dev Tools)
3 State Nói Chung
4 Khởi Tạo State
5 QUAN TRỌNG! CÚ PHÁP THAY THẾ
6 super() và super(props) Khác Nhau Chỗ Nào?
7 Thiết Lập State Đúng Cách
8 Khóa Học Cấp Tốc: Sự Kiện Click Trong React
9 CÚ PHÁP THAY THẾ PHẦN 2
10 BÀI TẬP: State Clicker
11 BÀI TẬP: Lời Giải State Clicker
12 Mẫu Thiết Kế "State As Props"
1 Giới Thiệu Bài Tập Xúc Xắc
2 Viết Component Die
3 Thêm Component RollDice
4 Tạo Kiểu Cho RollDice
5 Tạo Hiệu Ứng Hoạt Hình Cho Việc Tung Xúc Xắc!
1 Cập Nhật State Hiện Có
2 Thay Đổi State Một Cách An Toàn
3 Thiết Kế State: Tối Thiểu Hóa State
4 Thiết Kế State: Luồng Dữ Liệu Đi Xuống
5 Ví Dụ Thiết Kế State: Xổ Số
6 Ví Dụ Thiết Kế State: Component LottoBall
7 Ví Dụ Thiết Kế State: Component Lottery
1 Bài Tập State 1: Tung Đồng Xu
2 Bài Tập State 1: Lời Giải Tung Đồng Xu
3 Bài Tập State 2: Hộp Màu
4 Bài Tập State 2: Lời Giải Hộp Màu
1 Các Sự Kiện React Thường Dùng
2 Niềm Vui Của Việc Ràng Buộc Phương Thức :(
3 Cách Ràng Buộc Thay Thế Với Thuộc Tính Lớp
4 Ràng Buộc Với Đối Số
5 Truyền Phương Thức Cho Component Con
6 Đặt Tên Phương Thức Giữa Cha Và Con
7 Chuyển Hướng Nhanh: Khóa (Keys) Trong React
1 Giới Thiệu Bài Tập Hangman
2 Hướng Dẫn Code Khởi Đầu
3 Thêm Keys
4 Theo Dõi Các Dự Đoán Sai
5 Thêm Trạng Thái Kết Thúc Game
6 Thêm Văn Bản Thay Thế (Alt Text)
7 Từ Ngẫu Nhiên
8 Thêm Nút Khởi Động Lại (Reset)
9 Làm Cho Game Có Thể Thắng & Tạo Kiểu
1 Giới Thiệu Lights Out
2 Khám Phá Code Khởi Đầu
3 Hiển Thị Bảng Game
4 Lật Ô
5 Chiến Thắng Game
6 Tạo Kiểu Cho Game
1 Giới Thiệu Về Form Trong React
2 Viết Form Với Nhiều Trường Nhập Liệu
3 Thuộc Tính htmlFor
4 Mẫu Thiết Kế: Truyền Dữ Liệu Lên Trên
5 Sử Dụng Thư Viện UUID
1 Giới Thiệu Bài Tập Tạo Hộp (Box Maker)
2 Thêm Component BoxList
3 Tạo Component BoxForm
4 Xóa Hộp Màu
1 Tổng Quan Dự Án
2 Component TodoList và TodoItem
3 Thêm NewTodoForm
4 Xóa Các Việc Cần Làm (Todos)
5 Chỉnh Sửa Todos
6 Bật/Tắt Trạng Thái Hoàn Thành Của Todo
7 Tạo Kiểu Cho Ứng Dụng Todo
1 Giới Thiệu Yahtzee
2 Hướng Dẫn Code Khởi Đầu Yahtzee
3 Sửa Lỗi Khóa Xúc Xắc
4 Đọc Các Lớp Quy Tắc
5 Thêm Quy Tắc Mới
6 Sửa Lỗi Tung Lại Xúc Xắc
7 Ngăn Chặn Việc Sử Dụng Lại Điểm
8 Thêm Mô Tả Điểm
9 Thay Thế Văn Bản Bằng Biểu Tượng Xúc Xắc
10 Tạo Hiệu Ứng Hoạt Hình Cho Việc Tung Xúc Xắc
11 Chỉnh Sửa Cuối Cùng Và Sửa Lỗi
1 Giới Thiệu ComponentDidMount
2 Tải Dữ Liệu Qua AJAX
3 Thêm Bộ Tải Hoạt Hình (Animated Loaders)
4 Tải Dữ Liệu Với Hàm Async
5 Giới Thiệu ComponentDidUpdate
6 PrevProps và PrevState Trong ComponentDidUpdate
7 Giới Thiệu ComponentWillUnmount
1 Giới Thiệu Dự Án API Lá Bài
2 Yêu Cầu ID Bộ Bài
3 Lấy Lá Bài Mới Với AJAX
4 Thêm Component Card
5 Biến Đổi Lá Bài Ngẫu Nhiên
6 Tạo Kiểu Cho Lá Bài Và Bộ Bài
1 Giới Thiệu Dự Án Câu Đùa Của Bố
2 Lấy Câu Đùa Mới Từ API
3 Tạo Kiểu Cho Component JokeList
4 Bình Chọn Tăng Và Giảm Cho Câu Đùa
5 Tạo Kiểu Cho Component Joke
6 Thêm Màu Sắc Động Và Biểu Tượng Cảm Xúc (Emoji)
7 Đồng Bộ Với LocalStorage
8 Sửa Lỗi LocalStorage Của Chúng Ta
9 Thêm Vòng Quay Tải (Loading Spinner)
10 Ngăn Chặn Câu Đùa Trùng Lặp
11 Sắp Xếp Câu Đùa
12 Tạo Kiểu Cho Nút Lấy Dữ Liệu (Fetch Button)
13 Thêm Hiệu Ứng Hoạt Hình
1 Giới Thiệu Về Định Tuyến Phía Máy Khách (Client-Side Routing)
2 Thêm Route Đầu Tiên Của Chúng Ta
3 Sử Dụng Switch và Exact
4 Giới Thiệu Về Component Link
5 Thêm NavLinks
6 Render prop so với Component prop trong Routes
1 Giới thiệu Bài tập Máy bán hàng tự động
2 Thêm Các Route cho Máy bán hàng
3 Thêm các Liên kết
4 Tạo Thanh điều hướng (Navbar)
5 KHÁI NIỆM MỚI: Props.children
1 Làm việc với Tham số URL
2 Nhiều Tham số Route
3 Thêm Route 404 Không tìm thấy
4 Viết Form Tìm kiếm Đơn giản
5 Component Redirect
6 Đẩy vào History Prop
7 So sánh History và Redirect
8 Higher Order Component withRouter
9 Triển khai Nút Quay lại
1 Giới thiệu Bài tập
2 Làm việc với Bootstrap trong React
3 Viết Component DogList
4 Thêm Component DogDetails
5 Tạo Component Navbar của chúng ta
6 Tái cấu trúc & Trích xuất Routes
7 Một vài Điều chỉnh Nhỏ
8 Tạo kiểu cho Ứng dụng
1 Giới thiệu Ứng dụng Màu sắc
2 Những Nội dung Mới trong Dự án này
3 Tìm Mã nguồn Dự án Cuối cùng
4 Tạo Component Palette
5 Cơ bản về Hộp Màu
6 Tạo kiểu cho Hộp Màu
7 Sao chép vào Clipboard
8 Hiệu ứng Phủ bản Sao chép
9 Tạo các Sắc thái Màu
10 Thêm Thanh trượt Màu
11 Tạo kiểu cho Thanh trượt Màu
12 Thêm Component Navbar
1 Giới thiệu Material UI & Thêm Select
2 Thêm Snackbar
3 Thêm Chân trang Palette
4 Tích hợp React Router
5 Tìm Palettes
6 PaletteList và Liên kết
1 Giới thiệu HOC withStyles
2 Tạo kiểu MiniPalette với JSS
3 Tạo kiểu PaletteList với JSS
4 Hoàn thiện MiniPalette
1 Liên kết đến Palettes
2 Lên ý tưởng cho Palette Một Màu
3 Thêm nhiều Liên kết hơn
4 Tạo Palette Một Màu
5 Hiển thị Sắc thái trong Palette Một Màu
6 Thêm Navbar và Footer
7 Thêm Hộp Quay lại
8 Màu Chữ Động lực theo Độ sáng
9 Tái cấu trúc thêm Kiểu
10 Hoàn thiện Tái cấu trúc Hộp Màu
1 Tái cấu trúc Kiểu Palette
2 Chuyển Kiểu vào Thư mục Mới
3 Tái cấu trúc CSS Navbar
4 Tổng quan về PaletteForm
5 Thêm NewPaletteForm
6 Thêm Ngăn kéo Trượt ra
7 Thêm Component Bộ chọn Màu
8 Kết nối Bộ chọn Màu với Nút bấm
9 Tạo Hộp Màu Có thể Kéo
10 Giới thiệu Trình xác thực Form
1 Lưu Palettes Mới
2 Thêm Form Tên Palette
3 Tạo kiểu Hộp Màu Có thể Kéo
4 Thêm Xóa Hộp Màu
5 Đến lúc Kéo và Thả!
6 Nút Xóa Palette và Màu Ngẫu nhiên
7 Trích xuất Nav Palette Mới
8 Trích xuất Component Bộ chọn Màu
9 Tạo kiểu Form Nav Palette
10 Tạo kiểu Bộ chọn Màu
1 Thêm Modal/Hộp thoại
2 Tạo kiểu Hộp thoại
3 Đóng Form & Thêm Emoji
4 Hoàn thiện Form Chọn Emoji
5 Chuyển Kiểu JSS ra Ngoài
6 Chỉnh sửa Kiểu Form
7 Lưu vào LocalStorage
8 Thêm Nút Xóa MiniPalette
9 Hoàn thiện Xóa MiniPalette
10 Tạo Helper Kích thước Responsive
11 Làm Hộp Màu Responsive
12 Làm Form & Navbar Responsive
1 Làm Palette List Responsive
2 Thêm Nền SVG
3 Hiệu ứng Mờ dần với Transition Group
4 Hộp thoại Xác nhận Xóa
5 Sửa Lỗi Xóa/Kéo
6 Tạo hiệu ứng Chuyển tiếp Route
7 Tái cấu trúc Chuyển tiếp Route
8 Tối ưu với PureComponent
9 Dọn dẹp Mọi thứ
10 Dọn dẹp thêm!
11 Sửa Lỗi với Form Palette Mới
12 Ngăn Màu Ngẫu nhiên Trùng lặp
1 Giới thiệu Hooks & useState
2 Xây dựng Hook Tùy chỉnh: useToggleState
3 Xây dựng Hook Tùy chỉnh: useInputState
4 Hook useEffect
5 Lấy Dữ liệu với Hook useEffect
1 Giới thiệu Dự án Hooks
2 Thêm Form của chúng ta với Hooks
3 Thêm Component Mục việc cần làm
4 Bật/Tắt và Xóa với Hooks
5 Chỉnh sửa với Hooks
6 Chỉnh sửa Kiểu Nhỏ
7 LocalStorage với Hook UseEffect
8 Tái cấu trúc thành Hook Tùy chỉnh
9 Tạo Hook UseLocalStorageState của chúng ta
1 Chúng ta đang Hướng đến Đâu
2 MÃ NGUỒN CHO PHẦN NÀY!
3 Context là gì?
4 Thêm Navbar Responsive vào Ứng dụng Context
5 Thêm Form Responsive vào Ứng dụng Context
6 Giới thiệu Context và Providers
7 Sử dụng (Consuming) một Context
8 Cập nhật Context một cách Động lực
9 Viết Language Context
10 Sử dụng 2 Contexts: Giới thiệu Higher Order Component
1 MÃ NGUỒN CHO PHẦN NÀY
2 MÃ NGUỒN CHO PHẦN NÀY!
3 Giới thiệu Hook useContext
4 Sử dụng Nhiều Contexts với Hooks
5 Viết lại Context Provider với Hooks
6 Context Providers với Hooks Tùy chỉnh
7 "Hook hóa" Phần còn lại của Ứng dụng
1 QUAN TRỌNG: LẤY MÃ NGUỒN Ở ĐÂY!
2 Thêm Todos Context
3 Sử dụng Todo Context
4 Vấn đề với Cách tiếp cận Hiện tại
5 Reducer là gì?
6 Ví dụ useReducer Đầu tiên
7 Định nghĩa Todo Reducer của chúng ta
8 Chia thành 2 Contexts
9 Tối ưu với Memo
10 Hook Tùy chỉnh: Reducer + LocalStorage
1 Giới thiệu Next
2 Server Side Rendering là gì?
3 Bắt đầu với Next
4 Định tuyến Cơ bản trong Next
5 Component Link của Next
6 Liên kết Không dùng Thẻ Anchor
7 Components Vs. Pages
8 Ghi đè _app.js Mặc định
1 Giới thiệu getInitialProps
2 Lấy Bài viết với getInitialProps
3 Chuỗi Truy vấn trong Next
4 Higher Order Component withRouter
5 Lấy Bình luận
6 Prop "as"
7 Máy chủ Tùy chỉnh Không dùng Express
8 Routes Phía Máy chủ Tùy chỉnh với Express
1 Webpack là gì??
2 Cài đặt và Chạy Webpack
3 Imports, Exports, và Webpack
4 Cấu hình Webpack
5 Webpack Loaders, CSS, & SASS
6 Cache Busting và Plugins
7 Tách Biệt Môi trường Dev & Production
8 Html-loader, file-loader, và Clean Webpack Plugin
9 Nhiều Điểm vào (Entry Points)
10 Trích xuất và Nén CSS

Giới thiệu khóa học

EXPANDED and UPDATED to include new sections on Next JS and Server-Side Rendering!

Welcome to the best online resource for learning React! Published in April 2019, this course is brand new and covers the latest in React.  This course follows the exact same React curriculum my in-person bootcamp students follow in San Francisco, where students have gone on to get jobs at places like Google, Apple, Pinterest, & Linkedin.  This is the most polished React course online, and it's the only course that is based on REAL bootcamp curriculum that has been tried and tested in the classroom.

This course builds up concepts one at a time, cementing each new topic with an expertly designed exercise or project to test your knowledge. It includes a huge variety of beautiful exercises, projects, and games that we create together from scratch.  Sometimes we mix things up and give you a broken React app and ask you to fix it or optimize the code. Check out the promo video to see a couple of the course exercises. The course culminates in one huge capstone project, which is the largest project I've ever built for any of my online courses.  I'm really excited about it :) 

React is the most popular JS library around, and there's never been a better time to learn it! Companies all over the world are turning to React to help manage their JavaScript chaos, including tech giants like Facebook, Airbnb, and Uber.  React is consistently voted the most loved and most wanted front-end framework by developers, and it's clear why! React is a joy to use, and it makes writing maintainable and modular JavaScript code a breeze.

If you're new to frameworks, React is the ideal first framework to learn. It's easy enough to learn the basics, but it doesn't teach you bad habits. Even if you've already enrolled in another React course, this course is worth your time for the exercises and projects alone!  This curriculum is the product of two years of development and iteration in the bootcamp classroom.   All the lectures, exercises, and projects have been tweaked and improved based on real student feedback. You won't find anything else online as structured and polished as this course.

The highlights:

  • Learn React, from the very basics up to advanced topics like Next JS, React Router, Higher Order Components and Hooks and the Context API.

  • Build one massive capstone application, complete with drag & drop, animations, route transitions, complex form validations, and more.

  • Learn the latest in React, including Hooks (my favorite part of React!).  We build a complete app using Hooks, including multiple custom hooks.

  • Learn state management using the useContext and useReducer hooks, to mimic some of the functionality of Redux.

  • You get tons of detailed handouts and cheatsheets that you can refer back to whenever you need to.   Think of this as a React textbook you can study at any point if you get tired of videos.

What you get:

  • 250+ videos

  • Slick, interactive slide decks custom made for each section

  • Detailed handouts and cheatsheets, the React "textbook".

  • Dozens of exercises, projects, and quizzes.

  • One massive code-along project with nearly 20 different React components.

  • Free Webpack Mini Course!

Khóa học liên quan

Khám phá thêm các khoá học cùng chủ đề

Hiển thị tất cả khoá học Frontend Development
Hiển thị tất cả khoá học Javascript
Hiển thị tất cả khoá học React
Hiển thị tất cả khoá học Web Development
Zalo
Tôi có thể tư vấn khoá học cho bạn 😊