Xây dựng một project mini đơn giản để ứng dụng kiến thức phần Redux và project ReactJS
- Đơn giản, không quá phức tạp
- Tập trung nhiều vào
Redux
vớiRedux Toolkit
- Sử dụng toàn bộ là
hooks
- Học sử dụng UI lib:
Reactstrap
- Học cách sử dụng form:
Formik
- Học cách tổ chức API (optional)
PHOTO APP
- App đơn giản để quản lý hình ảnh yêu thích, được lựa chọn từ: https://picsum.photos/
- CRUD operator
- Gồm có 2 trang:
Home
: listing + view + deleteAddEdit
: tạo mới + sửa thông tin của 1 photo.
- Mỗi photo gồm:
title
+categoryId
+imageUrl
- Các chức năng:
- Render danh sách photo yêu thích
- Lọc photo theo category
- Thêm mới 1 photo
- Chỉnh sửa 1 photo
- Remove 1 photo
- Persist dữ liệu khi reload browser.
- Random photo ngẫu nhiên từ https://picsum.photos/
- Hiển thị danh sách photo https://picsum.photos/ để lựa chọn
- ReactJS (CRA)
- Redux (Redux Toolkit)
- Form management: Formik
- Routings: React Router
- UI lib: Reactstrap
- Redux-Persist
- Tổ chức folder, files trong thực tế.
- Sử dụng Redux tốt hơn với Redux Toolkit.
- Biết cách tạo custom field trong
Formik
. - Thiết lập routing trong ReactJS App
- Sử dụng 1 thư viện UI bên ngoài để làm UI cho lẹ.
npm i --save-dev node-sass
npm i --save react-router-dom
npm i --save reactstrap
src
|__ assets
| |__ images
| |__ styles (global styles)
|
|__ components (shared components)
|
|__ features
|__ Photo
|__ components
| |__ PhotoList
| |__ PhotoCard
| |__ PhotoForm
|
|__ pages
| |__ MainPage
| |__ AddEditPage
|__ photoSlice.js
|__ index.js
- Sử dụng kĩ thuật lazy load components.
- Load theo features.
// App.js
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/photos" component={Photo} />
<Route path="/user" component={User} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
)
}
- Cầu nối giữa UI control và Formik.
- UI control là một controlled component với props:
- name: tên xác định control
- value: giá trị của control
- onChange: trigger hàm này với giá trị mới khi có thay đổi
- onBlur: xác định khi nào thì control này bị touched
function InputField(props) {
const {
field,
type, label, placeholder, disabled,
} = props;
const { name } = field;
return (
<FormGroup>
{label && <Label for={name}>{label}</Label>}
<Input
id={name}
{...field}
type={type}
disabled={disabled}
placeholder={placeholder}
/>
</FormGroup>
);
}
RandomPhoto Props
- name
- imageUrl
- onImageUrlChange
- onRandomButtonBlur RandomPhotoField
Formik
Yup