Buổi 1_2: Component_databinding_handleEvent_state

• Component
  --component là 1 thẻ do mình định nghĩa trong thẻ đó chứa các nội dung html do mình biên soạn.
  

--Cấu trúc files component

• databinding: hai dấu '{}' gọi là databinding
  
  

• handleEvent
  
  
  

• state, setState và rerender

+ state: là thuộc tính của component để quản lý các biến thay đổi trên giao diện của 1 component
+ Không được thay đổi state trực tiếp vì giao diện sẽ không render lại.
+ this.setState: Là phương thức có sẵn của component. Dùng để thay đổi giá trị state, đồng thời làm giao diện render lại với giá trị state mới.
+ this.setState : hàm này có 2 chức năng là gán lại giá trị mới cho stage và thay đổi trên giao diện --> gọi giao diện render lại.

--Bt Page loggin


--Btchọnxe


--Bt ChangeFontSize


--Bt DemoChangeColor


--Bt DemoPageLogin

Buổi 3: react_renderWithMap_renderCondition_style

• style css:
  

-Cài thư viện để sử dụng sass
$ npm i node-sass sass-loader
hoặc
Cài đặt Dart Sass bằng lệnh "$ npm i sass". Sử dụng Dart Sass sẽ không cần cài thêm sass-loader, chỉ cần cài Dart Sart là nó tự compiler được.

--Có 3 cách sử dụng css:

• RenderWidthMap:
  
  

Buổi 4: Props

• Props là thuộc tính có sẵn của react class component (do kế thừa từ class Component) dùng để nhận giá trị từ component cha truyền vào (Component cha là nơi sử dụng thẻ). Props không thể gán lại giá trị mới.
  Không thể dùng this.props.propName = 'Giá trị mới' => Sai cú pháp
• Props khác state ?

  Props và State đều là thuộc tính có sẵn của react class component để binding dữ liệu lên giao diện, Tuy nhiên:
  + State : dùng để lưu các giá trị thay đổi trên chính component đó. State có thể được gán lại thông qua phương thức setState
  + Props: dùng để chứa các giá trị từ component cha truyền vào. Props không thể gán lại giá trị.

--BT DempProps

--BT ProductList_shoes

--BT ProductDetail_phone

1. Xây UI, hiển thị Danh sách sản phẩm, chi tiết sản phẩm
2. Dùng renderWidthMap ".map(phone)" để render ra Danh sách sản phẩm --> và đưa thông tin sản phẩm lên UI bằng {phone.hinhAnh}, {phone.tenSP}, {phone.giaBan}
3. Dùng state đặt mặc định thông tin 1 sản phẩm để hiện thị trên UI --> Đưa thông tin mặc định của 1 SP lên UI thông qua bóc tách ohần tử --> "let {maSP, tenSP,...} = this.state.spChiTiet;" --> "<p>{maSP}</p>"
4. Xử lý sự kiện setState khi nhấn nút "xem chi Tiết" và hiển thị chi tiết sản phẩm lên UI --> Đặt sự kiện onclik cho button --> Tạo hàm "xemChiTiet =(spClick) =>{ this.setStae({ spChiTiet: spClick }) }"
5. Tách phần Danh sách sản phẩm thành compoennt <Item phone={dienThoai} xemChiTiet={this.xemChiTiet} /> và truyền Props --> lấy Props bên Item --> let {phone, xemChiTiet} = this.props; --> onClick={() =>{xemChiTiet(phone)}}

Buổi 5: Ôn tập Props và React router dom_p1

• BT ProductDetail_phone tiếp theo
  

6. Tạo component giỏ hàng <cart /> và xây dựng UI.
7. Xác định và đặt state thay đổi cho component giỏ hàng <Cart /> ở ProducDetail. Tạo arrayObject arrGioHang:[] trong state.
8. Truyền Props <Cart arrGioHang={this.state.arrGioHang} />  ---> tạo hàm renderGioHang = () =>{} ở <Cart />  --->  let {arrGioHang} = this.props; và databinfding thông số render ra UI table giỏ hàng
9. Truyền Props <Cart tangGiamSoLuong={this.tangGiamSoLuong} xoaSanpham={this.xoaSanpham} arrGioHang={this.state.arrGioHang} />  ---> renderGioHang = () =>{let {arrGioHang,xoaSanPham,tangGiamSoLuong} = this.props;}
10. Tạo hàm "themGioHang = (spClick) => {}" ở ProductDetail --> dùng ES6 gán thêm biến số lượng "spClick = {...spClick, soLuong:1}" ---> Nếu sp đã tồn tại thì tăng số lượng, nếu chưa thì cho vào mảng splick để render ra UI
11. Tạo hàm xoaSanpham = (maSP) =>{} ở ProductDetail --> truyền props xóa sản phầm vào <Cart xoaSanpham={this.xoaSanpham} arrGioHang={this.state.arrGioHang} /> --->  renderGioHang = () =>{let {arrGioHang,xoaSanPham,tangGiamSoLuong} = this.props;} ---> onClick={()=>{xoaSanPham(sp.maSP);}}
12. Tạo hàm tangGiamSoLuong = (maSP,soLuong) =>{} ---> truyền props <Cart tangGiamSoLuong={this.tangGiamSoLuong} xoaSanpham={this.xoaSanpham} arrGioHang={this.state.arrGioHang} /> ---> renderGioHang = () =>{let {arrGioHang,xoaSanPham,tangGiamSoLuong} = this.props;} ---> truyền onclick cho button tăng giảm.

Routing React router dom Ver.6

Thẻ <navlink> dùng để chỉ reload phần <main> khi refesh

lệnh  cài thư viện
$ npm i react-router-dom

// Cấu hình react router dom
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

Buổi 6: React Form - Validation

-- Thẻ <navigate> và <NavLink>

-- BT ReactFormDemo

Buổi 7: React Form - Life Cycle - Validation

Buổi 8: Redux

Tham khảo thêm: https://viblo.asia/p/sau-2-nam-redux-da-thay-doi-qua-nhieu-924lJGmN5PM
    
Cài đặt thư viện 
$npm install @reduxjs/toolkit
$npm install react-redux

Middleware sẽ được dùng khi chúng ta muốn thực hiện các lời gọi bất đồng bộ trước khi cập nhật state. Hiện tại Redux có hỗ trợ middleware mặc định là Thunk, ko như phiên bản cách đây tầm 2 năm mình dùng, khi muốn thêm Thunk thì phải install package. Về cơ bản thì kiến trúc và luồng hoạt động của Redux vẫn như vậy, không có gì thay đổi suốt vài năm qua.

--BT DemoTangGiamSoLuong

--BT DemoBaiTapChonXe

--BT DemoFormNhanVien

Buổi 9: Redux ôn tập

Buổi 10: Redux async action (call API trực tiếp && call API bằng redux)

--Call API trực tiếp

--Call API Bằng Redux state