1. Tổ chức folder của ReactJS
1.1. Tổ chức theo loại: actions, reducers ,...
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
. ├── node_modules ├── src │ ├── api │ │ ├── axiosClient.js │ │ ├── productApi.js │ │ ├── categoryApi.js │ │ └── ... │ ├── components │ │ ├── Common (các component dùng chung) │ │ │ ├── Header.js │ │ │ ├── NotFound.js │ │ │ └── Button.js │ │ ├── Product.js │ │ ├── Category.js │ │ └── ... │ ├── reducers │ │ ├── product.js │ │ ├── category.js │ │ ├── ... │ │ └── index.js (root reducer) │ ├── actions │ │ ├── product.js │ │ ├── category.js │ │ └── ... │ ├── pages │ │ ├── HomePage.jsx │ │ └── ... │ ├── store.js │ ├── index.js │ └── App.js ├── public │ ├── ... │ └── index.html ├── .env ├── .gitignore ├── package-lock.json ├── package.json └── Procfile |
1.2. Tổ chức theo features(chức năng)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
. ├── node_modules ├── src │ ├── assets │ │ ├── images │ │ └── styles (global styles) │ ├── components (shared components) │ │ ├── Button.js │ │ ├── Header.js │ │ ├── NotFound.js │ │ ├── Form.js │ │ └── ... │ ├── features │ │ ├── Photo │ │ │ ├── components │ │ │ │ ├── PhotoList │ │ │ │ ├── PhotoCard │ │ │ │ └── ... │ │ │ ├── pages │ │ │ │ ├── MainPage │ │ │ │ ├── AddEditPage │ │ │ │ └── ... │ │ │ ├── photoSlice.js │ │ │ └── index.js │ │ ├── Category │ │ └── ... │ ├── store.js │ ├── index.js │ └── App.js ├── public │ ├── ... │ └── index.html ├── .env ├── .gitignore ├── package-lock.json ├── package.json └── Procfile |
II. Các Module thường dùng
1. State Management: Redux
-- Redux Saga - Redux Thunk
-- Redux Toolkit
2. Form Module
-- Formik
-- React Hook Form
-- Validate: Yup
3. API Module
4. Routing Module
5. UI/UX Module
-- Boottrap hoặc Reacttrap
-- SCSS + BEM
-- Material UI
-- Ant Design
II. Một ví dụ cài đặt 1 dự án ReactJS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
npm init -y // React npm i -D react react-dom react-router-dom @reduxjs/toolkit // UI/UX npm i -D antd @ant-design/pro-layout // Webpack - core: npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react // Webpack - server npm i -D webpack webpack-cli webpack-dev-server // Webpack - css loader npm i -D style-loader css-loader sass sass-loader less less-loader // Webpack - file loader(image) npm i -D file-loader // Webpack - typscript loader npm i -D typescript ts-loader // Webpack - plugin: tạo file html, tách file css npm i -D html-webpack-plugin mini-css-extract-plugin |
///. Vấn đề SEO
-- NextJS
