Ưu đãi trong tuần: Nhập mã UD50 giảm 50k cho đơn từ 300k!
Trang chủ
Đăng nhập
Xem tất cả kết quả
Menu
Đăng nhập Đăng ký miễn phí

Build Dynamic Web Apps with React & Firebase

Xây dựng Ứng dụng Web Động với React & Firebase

Xây dựng Ứng dụng Web Động với React & Firebase

Học React từ cơ bản để tạo website động (bao gồm Context, Hooks, Reducers, Routing, Xác thực, Cơ sở dữ liệu)

4.7
(3,929 đánh giá)
19,111 học viên
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
23.5 giờ video
224 bài giảng
Truy cập vĩnh viễn
Học trên mọi thiết bị
Cập nhật: 30/05/2026
#Firebase #Frontend Development #React #Web Development

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

Học cách tạo website React hiện đại và động từ con số 0
Tìm hiểu về Components, Props, Hooks, Context, State, Reducers & React Router
Học cách triển khai cơ sở dữ liệu, xác thực và tải tệp lên với React & Firebase
Tạo và triển khai website React hoàn chỉnh dựa trên người dùng

Yêu cầu

Kiến thức cơ bản về JavaScript, HTML & CSS

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

Nhà phát triển mới bắt đầu muốn học một front-end framework như React
Nhà phát triển React mới muốn nâng cao kỹ năng và kiến thức về React
Nhà phát triển React trung cấp và nâng cao muốn học cách tích hợp các dịch vụ back-end như xác thực và cơ sở dữ liệu
Nhà phát triển đã sử dụng các framework khác (như Vue) và muốn chuyển sang React

Nội dung khóa học

20 phần • 224 bài giảng
1 Chào mừng đến với Khóa học
2 Tổng quan về React
3 Những gì bạn nên biết trước
4 Thiết lập Môi trường
5 Sử dụng Tệp Khóa học
6 Tài nguyên & Hướng dẫn Bổ sung
1 Sử dụng React với CDN
2 Tạo một React Component
3 JSX & Templates
4 Biểu thức & Biến trong Template
5 Sự kiện Click & Event Handlers
1 Tạo một Trang React (create-react-app)
2 Hướng dẫn Cấu trúc Dự án
3 Chạy Ứng dụng
4 Sử dụng Hình ảnh
5 Sử dụng Stylesheets
1 Tại sao chúng ta cần State
2 Sử dụng Hook useState
3 Cách State & Rendering hoạt động
4 Xuất danh sách
5 Sử dụng State trước đó
6 Templates có điều kiện
7 Hạn chế của useState
1 Sử dụng Nhiều Components
2 Tạo một Title Component
3 Giới thiệu về Props
4 React Fragments
5 Children Prop (Tạo một Modal Component)
6 Functions như Props
7 THỬ THÁCH - Hiển thị Modal
8 Portals
9 THỬ THÁCH - Component Danh sách Sự kiện Tái sử dụng
10 Tổng quan về Class Components
1 Sử dụng Global Stylesheets
2 Component Stylesheets
3 Sử dụng Inline Styles
4 Inline Styles Động
5 CSS Classes có điều kiện
6 CSS Modules
1 Forms & Labels trong React
2 Sự kiện onChange
3 Controlled Inputs
4 Gửi Forms (onSubmit)
5 Thêm Sự kiện vào Danh sách Sự kiện
6 Sử dụng Hook useRef
7 Select Boxes
1 Dự án Mới & JSON Server
2 Tại sao chúng ta cần useEffect
3 Lấy dữ liệu với useEffect
4 Mảng Phụ thuộc của useEffect
5 useCallback cho Phụ thuộc Hàm
6 Tạo một Custom Fetch Hook
7 Thêm trạng thái Loading/Pending
8 Xử lý Lỗi
9 Tại sao cần một Hàm Dọn dẹp
10 Hủy Yêu cầu Fetch
11 Lỗi thường gặp với useEffect - Vòng lặp Vô hạn
1 Xem trước & Thiết lập Dự án
2 Thiết lập & Xáo trộn Thẻ
3 Tạo Lưới Thẻ
4 THỬ THÁCH - Tạo một Card Component
5 Thực hiện Lựa chọn Thẻ
6 THỬ THÁCH - So sánh Lựa chọn
7 Thêm Thuộc tính 'matched' vào Thẻ
8 Lật Thẻ
9 Hiệu ứng Lật (CSS)
10 Làm cho Thẻ "bị vô hiệu hóa"
11 Hoàn thiện
1 Trang React Nhiều trang
2 Thiết lập React Router
3 Switch & Khớp chính xác
4 Links & Nav Links
5 Lấy Dữ liệu
6 Tham số Route
7 Hook useParams
8 Chuyển hướng theo Chương trình
9 Redirect Component
10 Tham số Truy vấn
1 Xem trước & Thiết lập Dự án
2 Thiết lập Router & Trang
3 Tạo Navbar Component
4 Lấy Dữ liệu
5 Recipe List Component
6 THỬ THÁCH - Lấy một Công thức Đơn lẻ
7 Template Chi tiết Công thức
8 Tạo Form "Tạo Công thức"
9 Thêm Nhiều Nguyên liệu
10 Tạo Yêu cầu POST
11 THỬ THÁCH - Chuyển hướng Người dùng
12 Tạo Search Bar Component
13 Trang Kết quả Tìm kiếm
14 Hoàn thiện
1 Prop Drilling
2 Context API là gì?
3 Tạo Context & Provider
4 Truy cập Giá trị Context
5 Tạo Custom Context Hook
6 Reducers & useReducer
7 Tạo Bộ chọn Chủ đề Màu
8 Bộ chọn Chế độ Sáng & Tối
9 Tạo kiểu cho Chế độ Sáng & Tối
1 Firebase là gì?
2 Cơ sở dữ liệu Firestore
3 Kết nối với Firebase
4 Lấy một Firestore Collection
5 Lấy một Firestore Document
6 Thêm Dữ liệu Firestore
7 Xóa Dữ liệu Firestore
8 Dữ liệu Collection Thời gian thực
9 Cập nhật Documents
10 Dữ liệu Document Thời gian thực
1 Xem trước & Thiết lập Dự án
2 THỬ THÁCH - Tạo Trang & Routes
3 Tạo Navbar
4 Tạo Form Đăng nhập
5 THỬ THÁCH - Tạo Form Đăng ký
6 Thiết lập Firebase
7 Thiết lập Xác thực Firebase
8 Tạo Signup Hook
9 Sử dụng Signup Hook
10 Tạo Auth Context
11 Dispatch một Hành động Đăng nhập
12 Tạo Logout Hook
13 Sử dụng Logout Hook
14 Thêm Hàm Dọn dẹp
15 Tạo Login Hook
16 Sử dụng Login Hook
17 Hiển thị Nội dung Người dùng có điều kiện
18 Thay đổi Trạng thái Xác thực Firebase
19 Chờ cho đến khi Xác thực Sẵn sàng
20 Bảo vệ Route
21 Tạo Form Giao dịch
22 Tạo useFirestore Hook
23 Thêm Firestore Documents
24 Firestore Timestamps
25 Sử dụng useFirestore Hook
26 Tạo useCollection Hook
27 Liệt kê Giao dịch
28 Truy vấn Firestore
29 Sắp xếp Truy vấn Firestore
30 Xóa Giao dịch
1 Quy tắc Firestore là gì?
2 Firebase CLI
3 Bảo mật Dữ liệu Collection
4 Triển khai Quy tắc Firestore
1 Xây dựng Ứng dụng React
2 Triển khai lên Firebase
3 Cập nhật Trang & Triển khai lại
4 Khôi phục Triển khai
1 Xem trước & Thiết lập Dự án
2 Thiết lập Firebase
3 Firebase Init (Quy tắc, Hosting & Storage)
4 Tái sử dụng Firebase Hooks & Auth Context
5 Thiết lập Router & Trang
6 Navbar Component
7 Sidebar Component
8 Tạo Trang Đăng ký
9 Xử lý Đầu vào Tệp
10 Thiết lập Firebase Storage
11 Tải lên Hình ảnh Hồ sơ
12 Đăng ký Người dùng
13 Tạo User Documents
14 Đăng xuất Người dùng
15 Tạo Trang Đăng nhập
16 THỬ THÁCH - Đăng nhập Người dùng
17 Chuyển hướng & Bảo vệ Route
18 THỬ THÁCH - Navbar Links có điều kiện
19 User Avatar Component
20 Lấy Người dùng
21 Hiển thị Người dùng Trực tuyến
22 Tạo Form "Tạo Dự án"
23 Sử dụng React-Select
24 Gán Người Dùng
25 Thiết Lập Lỗi Biểu Mẫu
26 Tạo Đối Tượng Dự Án
27 THỬ THÁCH - Lưu Dự Án Mới
28 Lấy Dữ Liệu Dự Án
29 Tạo Danh Sách / Lưới Dự Án
30 Tạo Hook useDocument
31 Trang Chi Tiết Dự Án (lấy dữ liệu một dự án)
32 Thành Phần Tóm Tắt Dự Án
33 Tạo Biểu Mẫu Bình Luận
34 Cập Nhật Tài Liệu Firestore
35 Thêm Bình Luận
36 Liệt Kê Bình Luận
37 Hoàn Thành / Xóa Dự Án
38 Tạo Bộ Lọc (phần 1)
39 Tạo Bộ Lọc (phần 2)
40 Tạo Bộ Lọc (phần 3)
41 Thêm Quy Tắc Firestore
42 Hoàn Thiện Cuối Cùng
43 Triển Khai Ứng Dụng
1 Giới Thiệu & Dự Án Mẫu
2 Tệp Cấu Hình Firebase
3 Lấy Tài Liệu
4 Dữ Liệu Bộ Sưu Tập Thời Gian Thực
5 Thêm Dữ Liệu
6 Xóa Dữ Liệu
7 Thiết Lập Xác Thực Firebase
8 Đăng Ký Người Dùng
9 Đăng Xuất Người Dùng
10 Đăng Nhập Người Dùng
11 Thêm Ngữ Cảnh Xác Thực
12 Phát Hành Hành Động
13 Bảo Vệ & Chuyển Hướng Tuyến Đường
14 Gán Người Dùng Cho Sách
15 Truy Vấn Firestore
16 Tài Liệu Đọc Thêm về Firebase
1 Giới Thiệu React Router 6
2 Thành Phần Route
3 Chuyển Hướng & useNavigate
4 Tuyến Đường Lồng Nhau
5 Tái Cấu Trúc Trang Web Công Thức
6 Tái Cấu Trúc Trang Quản Lý Dự Án
1 Bài Học JavaScript Bổ Sung
2 Phép Gán Phân Rã
3 Nhập & Xuất Mô-đun
4 Phương Thức Filter & Map
5 Cú Pháp Spread
6 Chuỗi Mẫu
7 Hàm Mũi Tên
8 Fetch API và Promise
9 Async & Await
10 Thêm Hướng Dẫn

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

React is a hugely popular front-end library and React developers are always in high demand in the web dev job market. In this course you'll learn how to use React from the ground-up to create dynamic & interactive websites, and by the time you finish you'll be in a great position to succeed in a job as a React developer. You'll also have 4 full React projects under your belt too, which you can customize and use in your portfolio!

Throughout the course you'll learn exactly what React is and why it's such a popular choice to make interactive & dynamic websites. You'll learn how to set up a React website from scratch, how to create React components, how to use state to manage component data & how to work with interactive events such as click events & form submissions.

You'll also get hands-on practise with the React Router (which is used in React to create website with "multiple pages") and you'll see how these are actually known as Single Page Applications (or SPA's for short).

We'll dive into React Hooks such as useState, useEffect, useParams & useHistory and use them to help us create 4 full React projects from scratch - a memory game, a recipe website, a finance tracker & a project management application.

You'll also learn some more avanced topics such as the React Context API to handle global state & reducers (including the useReducer hook) to help manage more complex state.

Once you've mastered React, we'll take our websites to the next level by integrating them with Firebase - a backend as a service. You'll learn how to add services such as a real-time database & authentication into your React sites as well as how to allow end-users to upload files from their computers with the help of Firebase Storage. Finally, I'll teach you how to build & deploy your React sites to the web using Firebase Hosting.

By the end of the course you'll have a solid understanding of React & be able to make your own production-ready websites!

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 Firebase
Hiển thị tất cả khoá học Frontend Development
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 😊