Khóa Học React Pro 2024 Cùng Holetex

Share Khóa Học React Pro 2024 Cùng Holetex: Nắm Vững React Từ Cơ Bản Đến Nâng Cao

Khóa học React Pro 2024 Cùng Holetex là lộ trình toàn diện giúp bạn trở thành chuyên gia phát triển ứng dụng web với ReactJS. Từ những kiến thức nền tảng vững chắc đến các kỹ thuật nâng cao và tối ưu hiệu năng, bạn sẽ tự tin xây dựng mọi dự án thực tế. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm với React nhưng muốn hệ thống lại kiến thức và tiếp cận các xu hướng mới nhất, khóa học này sẽ trang bị cho bạn mọi thứ cần thiết để làm việc chuyên nghiệp.

Vì Sao Bạn Nên Học React Pro 2024 Cùng Holetex

Học từ căn bản React, không yêu cầu kiến thức React trước đó.

Nắm vững các Hooks quan trọng như useState, useEffect, useContext, useMemo, useCallback, useRef.

Thành thạo xây dựng giao diện người dùng (UI) đẹp mắt và responsive với Tailwind CSS và Material UI.

Hiểu sâu về cách React hoạt động, tối ưu hiệu năng ứng dụng với Code Splitting, Lazy Loading.

Ứng dụng React Router để quản lý định tuyến và điều hướng trong ứng dụng.

Thực hành thao tác với API, xử lý dữ liệu và xác thực người dùng (Authentication) với Redux Toolkit và RTK Query.

Xây dựng các dự án thực tế phức tạp từ đầu như Todo App, Movie App, Social Media App (WeConnect).

Tiếp cận các kỹ thuật nâng cao như Optimistic Update, Caching & Subscription trong RTK Query, Socket.IO cho Realtime.

Bạn Sẽ Học Được Gì Từ Khóa Học Này

Xây dựng giao diện web động và tương tác cao với React.

Quản lý trạng thái ứng dụng một cách hiệu quả với Context API và Redux Toolkit.

Kết nối và xử lý dữ liệu từ các API bên ngoài.

Tối ưu hóa hiệu suất ứng dụng React, giảm thời gian tải và cải thiện trải nghiệm người dùng.

Xây dựng các chức năng xác thực người dùng, đăng nhập, đăng ký an toàn.

Phát triển tính năng tìm kiếm, phân trang và hiển thị dữ liệu động.

Ứng dụng các thư viện UI phổ biến như Material UI, Tailwind CSS để thiết kế đẹp mắt.

Làm việc với các kỹ thuật nâng cao như Socket.IO để tạo ứng dụng Realtime.

Khóa Học Này Phù Hợp Với

Lập trình viên Front-end muốn học chuyên sâu về React.

Sinh viên CNTT muốn nắm vững kỹ năng React để phát triển sự nghiệp.

Các lập trình viên đã có kinh nghiệm với framework khác muốn chuyển sang React.

Bất kỳ ai muốn xây dựng các ứng dụng web hiện đại và chuyên nghiệp bằng React.

Nội dung khóa học

Chương 01: Giới thiệu khóa học và React 2024

Bài 01: Giới thiệu tổng quan về khóa học và lộ trình học React.

Bài 02: Giới thiệu về React và tại sao nên học React trong năm 2024.

Chương 02: Kiến thức nền tảng trước khi học React

Bài 01: Cách trình duyệt web hoạt động.

Bài 02: Client Side Rendering vs Server Side Rendering.

Bài 03: JavaScript Array Methods quan trọng.

Bài 04: Các tính năng nổi bật trong ES6/ES7+.

Bài 05: Callback, Promise, Async/Await trong JS.

Bài 06: Toán tử Nullish Coalescing và Optional Chaining.

Bài 07: Flexbox trong CSS.

Bài 08: CSS Grid.

Bài 09: So sánh Cookies, Local Storage và Session Storage.

Chương 03: Cấu hình dự án React đầu tiên

Bài 01: Cài đặt môi trường làm việc React (Node.js, npm/yarn, VS Code).

Bài 02: Cài đặt dự án với Vite.

Bài 03: Dọn dẹp source code ban đầu.

Chương 04: React nền tảng và Hooks cơ bản

Bài 01: Giới thiệu dự án Todo App.

Bài 02: Component là gì trong React.

Bài 03: Xây dựng danh sách việc cần làm.

Bài 04: Phân tích và tạo một component mới - Todo Item.

Bài 05: [Lý thuyết] Cú pháp JSX trong React.

Bài 06: Truyền dữ liệu vào component bằng props.

Bài 07: Style component bằng CSS.

Bài 08: Sử dụng JavaScript trong JSX với {}.

Bài 09: Lưu ý về sử dụng `key` với list.

Bài 10: Lý do không nên dùng `index` làm `key`.

Bài 11: Xử lý sự kiện trong React.

Bài 12: State là gì và cách hoạt động.

Bài 13: Vấn đề với biến JavaScript thông thường trong React.

Bài 14: Giải quyết vấn đề với biến JavaScript bằng State (useState Hook).

Bài 15: State - bộ nhớ của Component hoạt động thế nào.

Bài 16: React xử lý khi có nhiều State.

Bài 17: Thao tác DOM với Ref (useRef Hook).

Bài 18: Render component theo điều kiện.

Bài 19: Xử lý sự kiện cho complete checkbox.

Bài 20: UI cho Sidebar component.

Bài 21: Xử lý ẩn hiện Sidebar.

Bài 22: Xử lý Todo Item đang được lựa chọn.

Bài 23: Hoàn thiện chức năng cho Sidebar.

Bài 24: Vấn đề với Event Propagation.

Chương 05: Xây dựng Filter Panel và quản lý State nâng cao

Bài 01: Xây dựng UI cho Filter Type component.

Bài 02: Lưu thông tin Filter Type đang lựa chọn.

Bài 03: Kĩ thuật Lifting State Up.

Bài 04: Thêm logic xử lý filter TodoList theo Filter Type được chọn.

Bài 05: Cấu hình và fix lỗi ESLint.

Bài 06: Fix một số lỗi trong console.

Bài 07: Tính số lượng todos cho từng Filter Type.

Bài 08: [Lý thuyết] useMemo vs useCallback để tối ưu hiệu năng.

Bài 09: Tối ưu performance bằng useMemo.

Bài 10: Xử lý tìm kiếm Todo theo tên.

Bài 11: Xây dựng UI cho Categories.

Bài 12: Thêm logic xử lý lưu Category cho từng Todo.

Bài 13: [Lý thuyết] Context API là gì - Cách sử dụng useContext.

Bài 14: Thêm Context API để quản lý State tập trung.

Bài 15: Xử lý Filter theo Category.

Bài 16: Bài tập - Dọn dẹp lại các State với Context API.

Bài 17: Hiển thị số lượng Todo theo Category.

Bài 18: Giải bài tập - Dọn dẹp State với Context API.

Chương 06: Cấu hình dự án nâng cao - Movie App

Bài 01: Giới thiệu dự án Movie App.

Bài 02: Cấu hình dự án với Vite.

Bài 03: Cấu hình TailwindCSS.

Bài 04: Cấu hình font cho dự án.

Bài 05: Cài đặt FontAwesome cho React.

Chương 07: Sử dụng Tailwind CSS để xây dựng UI

Bài 01: Xây dựng UI cho Header.

Bài 02: Xây dựng FeatureMovies component - Code markup.

Bài 03: Xây dựng FeatureMovies component - Style CSS (Phần 1).

Bài 04: Xây dựng FeatureMovies component - Style CSS (Phần 2).

Bài 05: Xây dựng FeatureMovies component - Style CSS (Phần 3).

Bài 06: Phân tích & tách ra các component con.

Bài 07: Tip khi xây dựng giao diện UI.

Chương 08: Thao tác với API trong React (useEffect Hook)

Bài 01: Hướng dẫn lấy API Key trên IMDB.

Bài 02: Các vấn đề thường gặp khi gọi API trong React.

Bài 03: [Lý thuyết] Pure Function là gì.

Bài 04: [Lý thuyết] Vì sao component render 2 lần liên tiếp.

Bài 05: [Lý thuyết] Side Effect là gì.

Bài 06: Sử dụng useEffect() xử lý Side Effect.

Bài 07: Load dữ liệu từ API cho FeatureMovies.

Bài 08: Xây dựng Slider.

Bài 09: Bài tập cho phần Slider.

Chương 09: Xây dựng Media List (Thực hành SVG, Tailwind CSS, thao tác API,...)

Bài 01: Xây dựng UI cho MediaList (Phần 1).

Bài 02: Xây dựng UI cho MediaList (Phần 2).

Bài 03: Xây dựng UI cho MovieCard component.

Bài 04: Xây dựng UI với SVG (Phần 1).

Bài 05: Xây dựng UI với SVG (Phần 2).

Bài 06: Xây dựng UI với SVG (Phần 3).

Bài 07: Load dữ liệu từ API cho MediaList.

Bài 08: Load dữ liệu từ API cho MovieCard.

Bài 09: Refactor MediaList component để tái sử dụng.

Bài 10: Sửa UI trên màn hình lớn.

Chương 10: Sử dụng React Router để phân trang phía Client

Bài 01: Giới thiệu React Router v6.

Bài 02: Xây dựng UI cho Banner (Phần 1).

Bài 03: Xây dựng UI cho Banner (Phần 2).

Bài 04: Load dữ liệu từ API cho Banner (Phần 1).

Bài 05: Load dữ liệu từ API cho Banner (Phần 2).

Bài 06: Load dữ liệu từ API cho Banner (Phần 3).

Bài 07: Tạo layout chung cho các Routes.

Bài 08: Sử dụng Link và NavLink trong React Router.

Bài 09: Cải thiện UX với hiệu ứng Loading.

Bài 10: Clean code - Tách Banner thành 1 component riêng.

Bài 11: Xây dựng UI cho Actor List (Phần 1).

Bài 12: Xây dựng UI cho Actor List (Phần 2).

Bài 13: Xây dựng UI cho Actor List (Phần 3).

Bài 14: Cấu hình alias cho các đường dẫn.

Bài 15: Xây dựng Related Movie List component.

Bài 16: Cải thiện UI.

Bài 17: Xây dựng Movie Information component.

Chương 11: Cải thiện chất lượng code và tối ưu hiệu năng

Bài 01: Cách tạo và sử dụng biến môi trường trong file `.env`.

Bài 02: Tạo custom hook đầu tiên - `useFetch`.

Bài 03: Clean code với `useFetch`.

Bài 04: Cải thiện UX khi tải image.

Bài 05: Tạo Image Component & thêm hiệu ứng Blur Image.

Bài 06: Clean up function trong `useEffect()`.

Bài 07: Thay thế hình ảnh bằng Image component.

Chương 12: Xây dựng trang TVShow Detail

Bài 01: Thêm route mới cho TVShow Detail.

Bài 02: Refactor Banner component.

Bài 03: Xử lý render danh sách Crews.

Bài 04: Xử lý render danh sách diễn viên.

Bài 05: Xử lý danh sách các TVShow liên quan & cải thiện UI.

Bài 06: Xây dựng TV Show Information component.

Bài 07: Xây dựng Season List component.

Bài 08: Bài tập cho phần Season List.

Bài 09: Cải thiện UI.

Bài 10: Tạo ModalContext xử lý popup.

Bài 11: Xử lý mở Trailer trong TV Show Detail.

Bài 12: Tuỳ biến `useFetch` để trì hoãn việc gọi API.

Bài 13: Cập nhật Link cho FeatureMovie.

Bài 14: Tối ưu ModalContext.

Bài 15: Bài tập cho phần Home page.

Chương 13: Xây dựng trang People Page và Code Splitting

Bài 01: Xây dựng UI cho People Page.

Bài 02: Tạo custom class name trong Tailwind CSS.

Bài 03: Gọi API với `loader` trong React Router.

Bài 04: Load dữ liệu thực tế cho People Page.

Bài 05: Cải thiện UI.

Bài 06: [Lý thuyết] Kĩ thuật Code Splitting trong React.

Bài 07: Áp dụng kĩ thuật Code Splitting (Lazy Import Component) tối ưu hiệu năng.

Bài 08: Áp dụng Lazy Import cho tất cả Routes còn lại.

Chương 14: Xây dựng trang Search Page và React Hook Form

Bài 01: Tạo Route mới cho Search Page.

Bài 02: Xử lý form cơ bản với React Hook Form.

Bài 03: Sử dụng Controller trong React Hook Form và Tạo MediaTypeInput component.

Bài 04: Xây dựng GenresInput.

Bài 05: Xây dựng Rating Input & Xử lý ràng buộc giữa Media Type và Genres.

Bài 06: Cài đặt default value cho Form.

Bài 07: Cải thiện UI.

Bài 08: Truyền dữ liệu từ component con sang component cha.

Bài 09: Lọc danh sách media dựa vào dữ liệu filter.

Bài 10: Sử dụng useSearchParams.

Chương 15: Cấu hình dự án WeConnect (Social Media App)

Bài 01: Giới thiệu dự án WeConnect (Social Media App).

Bài 02: Cấu hình dự án với React 19 (nếu có).

Bài 03: Cấu hình Material UI (MUI).

Bài 04: Xây dựng UI cho Register Page (Phần 1).

Bài 05: Xây dựng UI cho Register Page (Phần 2).

Bài 06: Cách tuỳ biến class name trong Tailwind CSS.

Bài 07: Cách custom style cho 1 MUI component.

Bài 08: Tạo Layout chung trong React Router.

Bài 09: Xây dựng UI cho Login Page.

Bài 10: Xây dựng OTP Input.

Bài 11: [Lý thuyết] JWT (Json Web Token) là gì.

Bài 12: [Lý thuyết] [Tham khảo] Xử lý JWT phía server.

Bài 13: [Lý thuyết] Redux là gì.

Bài 14: [Lý thuyết] Redux Toolkit là gì và tại sao nên dùng.

Bài 15: Cấu hình Redux Toolkit.

Chương 16: Xác thực người dùng (Authentication) với Redux Toolkit và RTK Query

Bài 01: Cấu hình RTK Query và Tạo endpoint đăng kí.

Bài 02: Xây dựng và xử lý thông báo với Snackbar (MUI).

Bài 03: Xử lý validation cho React Hook Form.

Bài 04: Thêm endpoint xử lý login.

Bài 05: Thêm endpoint xử lý OTP.

Bài 06: Xử lý Protected Routes.

Bài 07: Cấu hình Redux Persist.

Bài 08: Custom Base Query để xử lý Token hết hạn.

Bài 09: Lưu thông tin người dùng vào store.

Chương 17: Xây dựng trang News Feed

Bài 01: Xây dựng UI cho Header.

Bài 02: Hiển thị thông tin người dùng.

Bài 03: Xử lý log out.

Bài 04: Fix lỗi trong console.

Bài 05: Xây dựng Sidebar trên giao diện Desktop.

Bài 06: Xây dựng Sidebar trên giao diện Mobile.

Bài 07: Cấu hình thống nhất breakpoint giữa Tailwind và MUI.

Bài 08: Xây dựng UI cho Post Creation.

Bài 09: Cải thiện UI cho Post Creation.

Bài 10: Tạo custom hook `useDetectLayout`.

Chương 18: Xử lý bài Post và Lazy Loading

Bài 01: Xây dựng UI cho Post Creation.

Bài 02: Cải thiện UI cho Post Creation.

Bài 03: Tích hợp API tạo Post mới.

Bài 04: Xử lý upload ảnh.

Bài 05: Xử lý Refresh Token.

Bài 06: Xây dựng UI cho Post component.

Bài 07: Tích hợp API get Post List.

Bài 08: Cách sử dụng Tag trong RTK Query.

Bài 09: Tạo loading animation với Framer Motion.

Bài 10: Phân tích kĩ thuật Lazy Load.

Bài 11: Thêm params xử lý lazy load cho API get post.

Bài 12: Phân tích công thức gọi API cho lazy load.

Bài 13: [Lý thuyết] Cách sử dụng useRef.

Bài 14: Xây dựng phần code xử lý lazy load.

Bài 15: Code phần xử lý scroll.

Bài 16: Áp dụng kĩ thuật Throttle tối ưu hiệu năng.

Bài 17: Tạo custom hook `useLazyLoadPost`.

Chương 19: Xây dựng tính năng Bạn bè (Friends) và Realtime với Socket.IO

Bài 01: Thêm endpoint Search Users.

Bài 02: Xử lý tìm kiếm người dùng trên Header.

Bài 03: Xây dựng UI cho Search User Page.

Bài 04: Tích hợp API search users.

Bài 05: Tạo endpoint cho chức năng Add friend.

Bài 06: Tích hợp API add friend.

Bài 07: Load danh sách lời mời kết bạn.

Bài 08: Cấu hình SocketIO trên Server & Client.

Bài 09: Fix lỗi truy cập homepage khi chưa đăng nhập.

Bài 10: Phân tích flow hoạt động của chức năng Add Friend.

Bài 11: Xử lý realtime cho danh sách lời mời kết bạn.

Bài 12: Xây dựng tính năng Accept và Cancel lời mời kết bạn.

Bài 13: Cập nhật chức năng Accept và Cancel Friend Request cho Search User.

Chương 20: Kĩ thuật nâng cao trong RTK Query

Bài 01: Phân tích lỗi không hiển thị bài post mới lên đầu danh sách.

Bài 02: Kĩ thuật Optimistic Update trong RTK Query.

Bài 03: Sửa lỗi sử dụng optimistic update với lazy load.

Bài 04: Caching & Subscription trong RTK Query.

Bài 05: Vấn đề với dữ liệu caching khi đăng xuất.

Bài 06: Clear dữ liệu API khi đăng xuất.

Tài Liệu & Hỗ Trợ

Tài liệu tham khảo, mã nguồn dự án và hướng dẫn cài đặt.

Hỗ trợ qua group Zalo/Discord để giải đáp thắc mắc.