Buổi 1: UseStateDemo (có sẵn của react)

Buổi 2: UseEffect - UseCallBack - UseMemo - UseRef (có sẵn của react)

--UseEffect

--UseCallBack

--UseMemo

--UseRef

Buổi 3: React thư viện - useSelector - useDispatch (thư viện redux) && Các hook routing thông dụng

Cài đặt thư viện redux toolkit

$ npm install @reduxjs/toolkit
$ npm install react-redux 

import { useDispatch, useSelector } from 'react-redux'

--useSelector && useDispatch (của thư viện redux)

- 2 Thư viện hook "useSelector" và "useDispatch" không phải của react core cung cấp, mà 2 thư viện này thuộc thư viện react-redux cung cấp cho phép ta truy cập đến reducer một cách dễ dàng và ngắn gọn hơn.

--Các hook routing thông dụng

Buổi 4: Formik (lấy dữ liệu từ form) - Yup (thư viện validation) - Call API (cấu hình interceptors)

Cài thư viện formik && Thư viện validation

$ npm i formik
$ npm i yup

import { useFormik } from 'formik';
import * as yup from 'yup'

--Register from using Formik && Yup

--Call API (cấu hình interceptors)
Gửi dữ liệu input form đăng ký lên API

Nếu Email khác rỗng thì sẽ dẫn đến trang "profiles", ngược lại thì đá về trang "login"

Dùng action async (action thunk) để call AIP gửi dữ liệu đăg nhập và trẻ về thông tin tên người dùng trên header

Viết hàm để lưu thông tin user localStorage

Gọi localStore để lấy dữ liệu user, nếu ko có thì trả về giá trị state mặc định, nếu có thì nó sẽ tự động đăng nhập.

Logout và clear localStorage

Call API get proflies

Buổi 5: Custom hook interceptor

Cấu hình chung cho Header API, cài đặt interCepter cho request API (Bearer ${token}) --> ⭐ Lưu ý: Tránh tình trạng BE thay đổi dữ liệu header, nên sử dụng header cho tất cả khi call API

--Movie)

Call API danh sách phim

--Thư viện history, cấu hình request và response)

• "useNavigate" chỉ sử dụng được trong functional component nhưng "history" sử sụng được bất kỳ file nào kể cả trong reducer

• Nếu chưa đăng nhập thì sẽ đá về trang login yêu cầu đăng nhập còn đăng nhập rồi thì sẽ chuyển đến trang profiles.
  
  

--Custom hook)
Trang web tham khảo thêm về (custom) hooks:

1. https://usehooks.com/ (custom hooks)
2. https://usehooks-ts.com/ (custom hooks)
3. https://mantine.dev/hooks/use-counter/ (bộ hooks của thư viện mantine)
4. https://github.com/streamich/react-use
5. https://github.com/streamich/react-use?fbclid=IwAR3R1tQBNTKowvRT60CDIjnIstcfGUnMewyi7R3yP2QSLBUJH1EgTg5hzxE

• call API sử dụng custom hook và render ra giao diện
  
  

Buổi 6: Thư viện Antd design - HOC (Higher order component) - Responsive

--Thư viện Antd design)

$ npm i antd
$ npm i @ant-design/icons

--HOC: (Higher order component)

-Viết theo class

-HOC ko sài được trên "functional Component return về 1 cái functional" mà thay vào đó phải retun về class mà class ko sài được Hook

--Container Component (viết theo kiểu HOC và sài được HOOK)

• Container Component viết theo kiểu HOC, nó sẽ nhận vào component không phài dưới dạng tham số mà chủ yếu nhận vào dưới dạng props
• Conatiner component nhận vào component dưới dạng props và render props compnent đó trong phần nội dung
• Conatiner component nhận component thông qua porps.
  Truyền dạng thẻ thì sài databinding
  Truyền dạng files thì sài dưới dạng thẻ
  Truyền thẻ dưới dạng button dùng hook
  Sử dụng redux để truyền thẻ component
  
  
  
  

--Responsive) giao diện <768px sẽ load ra giao diện như hình