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

React 18 / 19 Course 2025 - Learn React JS the fast way

Khóa học React 18 / 19 năm 2025 - Học React JS theo cách nhanh nhất

Khóa học React 18 / 19 năm 2025 - Học React JS theo cách nhanh nhất

Phát triển ứng dụng web React JS bao gồm components, state, effect, hooks, React router, reducer, context, v.v.

4.5
(6,403 đánh giá)
31,457 học viên
Giảng viên
Jannick Leismann
Phụ đề Việt chất lượng cao Phụ đề tiếng Anh Bán chạy Đánh giá cao
50.000đ 349.000đ -86%
✓ Xem giỏ hàng và thanh toán
Bao gồm phụ đề tiếng Việt, tiếng Anh
13.0 giờ video
162 bài giảng
10 bài quiz
2 bài coding
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 16/05/2026

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

Học React chuyên sâu trong thời gian ngắn
Xây dựng ứng dụng web toàn diện như một nền tảng video hiện đại
Học cách xử lý dữ liệu trong ứng dụng React của bạn
Sử dụng React components, React router và state để tạo cơ sở mã dễ bảo trì
Học cách sử dụng reducers để xây dựng ứng dụng có khả năng mở rộng
Học cách gọi RESTful Web API từ ứng dụng React bằng axios
Tạo unit test cho ứng dụng React bằng Vitest
Thêm xác thực JWT và quản lý người dùng
Lưu trữ dữ liệu người dùng trong cơ sở dữ liệu

Yêu cầu

Có kỹ năng lập trình cơ bản là một lợi thế

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

Dành cho bất kỳ ai muốn học React nhanh chóng nhưng đầy đủ
Chuyên gia bận rộn muốn mở rộng kỹ năng lập trình nhưng hạn chế về thời gian
Lập trình viên mới bắt đầu muốn học framework phát triển web phổ biến nhất

Nội dung khóa học

16 phần • 162 bài giảng
1 Giới thiệu Dự án "Moviedux"
2 Mã nguồn: Moviedux
3 React 101: Bản thân React
4 Cài đặt Visual Studio Code
5 Cài đặt NodeJS
6 Các tiện ích mở rộng React giúp công việc dễ dàng hơn
7 React 18 và React 19
8 Tạo dự án React và quản lý phiên bản package
9 Tóm tắt: Giới thiệu React
10 Khám phá dự án ReactJS của chúng ta
11 Tải xuống: Tài nguyên Dự án Moviedux (Hình ảnh, Logo, CSS, v.v.)
12 Nhập tài nguyên dự án Moviedux
13 Chỉnh sửa component app
14 Lưu ý
15 React 101 - Components
16 Tạo component Header
17 Component Footer với ngày động và JSX
18 Tóm tắt: React Components
1 Giới thiệu JavaScript cho React
2 Phạm vi của var, let và const
3 Arrow functions
4 Functions dưới dạng khai báo hoặc biểu thức
5 Rest Operator
6 Spread Operator
1 Tạo component MoviesGrid
2 React 101 - State
3 Tạo state movies với UseState
4 Thiết lập state movies với UseEffect
5 Sử dụng React developer tools
6 Tải movies từ JSON
7 Hiển thị movies trong cards
8 Một yêu cầu nhỏ
9 Tóm tắt: React State và Effect
1 React 101 - Props
2 Tái cấu trúc thành MovieCard và component properties
3 Xử lý lỗi khi tải hình ảnh
4 Màu rating động
5 State tìm kiếm và thanh tìm kiếm
6 Logic thanh tìm kiếm
1 Thanh lọc
2 Xử lý sự kiện lọc
3 Logic lọc
1 React 101: Router
2 Cài đặt React Router
3 Cấu hình router
4 Nâng state movie
5 State danh sách theo dõi (Watchlist)
6 Props của component Watchlist
7 Bật/tắt giao diện Watchlist
8 Tóm tắt: React Router
1 Xuất mặc định của modules
2 Xuất có tên của modules
3 Template literals, string interpolations và multi-line strings
4 Array find()
5 Array filter()
6 Array forEach()
7 Array map()
1 Giới thiệu Dự án "Bug Blaster"
2 Mã nguồn: Bug Blaster
3 Tài nguyên cho Dự án "Bug Blaster"
4 Thiết lập dự án bug blaster
5 Tạo logic form ticket
6 Xây dựng form ticket
7 Xây dựng lựa chọn mức độ ưu tiên (priority)
8 Tạo một ticket từ form
9 React 101 - Reducer
10 Tạo ticket reducer
11 Triển khai các hành động của ticket reducer
12 Dispatch hành động ADD_TICKET bằng hook useReducer
13 Tạo component TicketItem
14 Tạo component TicketList và render có điều kiện
15 Xóa tickets
16 Chỉnh sửa Tickets
17 Xóa một ticket đang "được chỉnh sửa"
18 Hủy bỏ quy trình chỉnh sửa
19 Sắp xếp tickets theo mức độ ưu tiên
20 Tóm tắt: React Reducer
1 React 101 - Context
2 Ví dụ về prop drilling cho context
3 Tạo context đầu tiên của bạn
4 Ứng dụng Blog với Context API
5 Kết hợp context và prop drilling
6 Kết hợp state và context phần 1
7 Kết hợp state và context phần 2
8 Chúc mừng! Bạn đã hoàn thành phần này
9 Tóm tắt: React Context
1 Promises
2 Ví dụ fetch với Promises
3 Async và await
1 Giới thiệu về việc gọi API
2 Mock API
3 React 101: HTTP requests và responses
4 Tạo dự án
5 Tạo service layer với axios
6 Tạo component post
7 Lấy posts và promises
8 Hiển thị posts
9 Xóa posts
10 Tạo post mới
11 Form post
12 State post sau khi tạo mới
13 Cập nhật post hiện có
14 Logic cập nhật post phần 1
15 Logic cập nhật post phần 2
1 Thiết lập dự án
2 Book context
3 Component hiển thị tất cả sách
4 Thiết lập router mặc định
5 Chuyển hướng router
6 Tham số route động phần 1
7 Tham số route động phần 2
8 Route không tìm thấy (404)
9 Đọc tham số truy vấn phần 1
10 Đọc tham số truy vấn phần 2
11 Route riêng tư (Private routes)
1 Vite là gì?
2 Cài đặt node packages cho Vite
3 Tạo dự án bằng Vite
4 Khởi động thủ công dự án React bằng Vite
5 Build ứng dụng React Vite
6 Thêm cấu hình cho Vite
7 Thêm: Thiết lập và đọc biến môi trường bằng Vite
1 Giới thiệu Dự án Chương
2 Mã nguồn: Kho lưu trữ GitHub
3 Nhà cung cấp xác thực Clerk
4 Thiết lập dự án Finora React và thêm clerk
5 Thêm clerk provider trong react
6 Thêm Đăng ký, Đăng nhập và Đăng xuất bằng React Components của Clerk
7 Lấy API Key cho Stock-Data-API Alphavantage
8 Lưu ý nhanh: 25 Request mỗi ngày
9 Phát triển service Alphavantage
10 Tải hiệu suất của một cổ phiếu đơn lẻ
11 Hoàn thiện service alphavantage
12 Xây dựng react component danh sách cổ phiếu
13 Xây dựng form để tải dữ liệu cổ phiếu
14 Mã CSS TẠI ĐÂY (Sao chép nó)
15 Tạo kiểu cho ứng dụng
16 Tạo cơ sở dữ liệu tại Supabase
17 Tạo bảng supabase và dán api keys
18 Gửi dữ liệu test đầu tiên để lưu vào db
19 Xây dựng service supabase watchlist hoàn chỉnh
20 Triển khai service supabase vào react component
21 Thiết lập effects để xử lý cập nhật dữ liệu cổ phiếu
22 Hoàn thiện html và tạo kiểu cho stock watchlist
23 Bật RLS và JWT trong Supabase để cải thiện bảo mật cơ sở dữ liệu
24 Thêm xác thực supabase bằng clerk trong dự án react
1 Giới thiệu Unit Testing
2 Thiết lập dự án và Vitest
3 Giải thích các Test Packages
4 Cấu hình Vitest
5 Viết và chạy unit test react đầu tiên của bạn
6 Rút gọn imports (vite globals)
7 Tạo file test-setup dùng chung
8 Mã nguồn cho bài học tiếp theo
9 Tạo một react component phù hợp để test
10 Tạo nhóm unit test cho component invoice
11 Kiểm tra xem component invoice có render đúng không
12 Kiểm tra xem một phần tử/lớp cụ thể có được gán không (đã thanh toán/quá hạn)
13 Sửa đổi test-mock-data cho các kịch bản test cụ thể
14 Định nghĩa unit test
15 Tạo nhóm unit test cho logic (không phải render)
1 Kết thúc khóa học

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

Learn React with a course that respects your time!


Summing up, this course allows you to learn React JS (v18 - 2024 and v19 - 2025) in depth, from scratch, and in only a few hours. It's the best React course choice for every busy developer or individual in general.


Enroll in this course now and learn how to:

  • Create comprehensive front-end applications using React

  • Use React components, routing, and states to create maintainable applications

  • Use the most important features of the React framework to build real-world applications

  • Build clean and scalable React applications by using reducers

  • Implement global state management using the Context API

  • Deal with real-world data

  • Consume a web API using axios from within your React applications

  • Create unit tests using vitest

  • Add user management and JWT authorization to react applications

  • Store data in databases without building a backend


What's inside this course:

  • Setting up Development Environment for React projects

  • Components

  • React Hooks (e.g. useState, useEffect, useReducer)

  • States

  • Effects

  • React Router including query parameters and private routes

  • Reducers

  • Context API and Providers (useContext and createContext)

  • JSX

  • Filtering

  • Searching

  • Dynamically assigning styling

  • Reacting to HTML events

  • Forms

  • Validation

  • Data Binding

  • Adding Packages

  • React Dev Tools

  • The popular build-tool Vite

  • Unit Testing

  • Authorization and User Management using Clerk

  • Database Integration using Supabase


In addition, you will easily apply and understand more advanced concepts like:

  • Error Handling

  • Sending Data to child components

  • Sending Data to parent components

  • Creating controlled components

  • Building scalable react applications by improving state handling (reducers and context)


30 Day Full Money Back Guarantee

This course comes with a 30-day full money-back guarantee. Take the course, watch every lecture, and do the exercises, and if you feel like this course is not for you, ask for a full refund within 30 days. All your money back, no questions asked.


Enroll now, take the fast lane, and master React JS in only a few hours.

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 😊