Lập Trình React JS Chuyên Sâu Với React Hooks And Bootstrap

Nội dung khóa học ReactJS Toàn Tập

• Giới thiệu về khóa học
• Tài liệu khóa học

Cơ bản về ReactJS

• Giới thiệu ReactJS
• Cài đặt Node.js
• Tạo React App với "Hello World"
• Các cách thực hiện return JSX
• Cấu trúc lại React App
• Áp dụng Style cho ứng dụng
• Xử lý các sự kiện trong React
• Quản lý state trong React
• Sử dụng Props trong component hàm
• Sử dụng Props trong component lớp
• Component children và cách sử dụng
• Lọc các mẫu tin trong React
• Hiểu về Component Life Cycle
• Lifecycle cập nhật trong Component
• Giới thiệu về Hook trong React
• Sử dụng useState Hook
• Dùng useState với nhiều giá trị
• Sử dụng useEffect Hook
• Dùng useCallback Hook
• Sử dụng useRef Hook
• Giới thiệu useContext
• Sử dụng Context để truyền hàm
• Sử dụng Context trong component lớp

Ứng dụng minh họa: Ai trả tiền

• Giới thiệu ứng dụng
• Cài đặt cơ bản cho ứng dụng
• Tạo Context và Component
• Cài đặt Bootstrap và thêm CSS
• Xây dựng component Stage 1
• Thêm người chơi vào danh sách
• Hiển thị danh sách người chơi
• Chức năng xóa người chơi
• Áp dụng Toastify cho ứng dụng
• Xây dựng component Stage 2
• Hiển thị người phải trả tiền

React Router

• Giới thiệu React Router
• Cấu hình Route trong React
• Sử dụng Link trong React Router
• Định dạng header với React Router
• Làm việc với Params trong React Router
• Sử dụng NavLink trong React Router
• Route lồng nhau trong React Router
• Điều hướng trang với Navigate
• Xử lý lỗi 404 trong React Router

Cơ bản về React - Phần 2

• Giới thiệu và cài đặt React
• Pure Component trong React
• Làm việc với các phần tử kề
• Giới thiệu Component bậc cao (HOC)
• HOC phần 2
• Transition Component trong React
• Kết hợp Transition và className
• CSS Transition trong React
• Transition Group trong React

Redux

• Giới thiệu Redux
• Kết nối React với Redux
• Giải thích các thuật ngữ trong Redux
• Viết các Slide trong Redux
• Quản lý logic bất đồng bộ với Redux
• Xây dựng component Counter với Redux
• Sử dụng Redux DevTool

Ứng dụng minh họa: Hiển thị tin tức

• Giới thiệu ứng dụng
• Thiết lập cơ bản cho ứng dụng tin tức
• Tạo Header và layout chính
• Sử dụng JSON Server trong ứng dụng
• Lấy dữ liệu từ server
• Lọc một phần dữ liệu trong ứng dụng
• Chức năng nút "Xem thêm" trong tin tức
• Hiển thị danh sách bài viết
• Xây dựng form newsletter
• Viết API addNewsletter và userSlide tương ứng
• Hoàn chỉnh Newsletter
• Lấy thông tin bài viết theo ID
• Hoàn chỉnh PostComp
• Sửa lỗi thông báo newsletter và handle 404

Thao tác Form với Formik

• Giới thiệu và các thiết lập cơ bản với Formik
• Bắt đầu với Formik
• Validation với Formik
• Validation với yup trong Formik
• Sử dụng Hook useFormik trong Formik
• Sử dụng các component của Formik
• Custom Field trong Formik

Hoàn thiện Project và kết thúc khóa học

• Xây dựng contact form
• Ghi dữ liệu lên JSON Server
• Tổng kết khóa học

Khóa học sẽ giúp bạn nắm vững các kỹ thuật lập trình với ReactJS, xây dựng các ứng dụng web mạnh mẽ và tối ưu hóa giao diện người dùng với các công cụ hiện đại nhất.