-
Introduction
-
Install Tools
-
Creare React App
-
Create Git Repository
-
List Products
- create products array
- add product images
- render products
- style products
-
Add routing
- npm i react-router-dom
- create router for home screen
- create router for product screen
-
Create Node.js server
- run npm init in root folder
- Update package.json set type: module
- Add .js to imports
- npm install express
- create server.js
- add start command as node backend/server.js
- require express
- create route for / return backend is ready
- move products.js from frondend to backend
- create route for /api/products
- return products
- run npm start
-
Fetch products from backend
- set proxy in package.json
- npm install axios
- use state hook
- use effect hook
- use reducer hook
-
Manage state by reducer hook
- define reducer
- update fetch data
- get start from useReducer
-
Add bootstrap UI framework
- npm install react-bootstrap bootstrap
- update App.js
- npm install react-router-bootstrap
-
Create product and rating component
- create rating component
- create product component
- use rating component in product component
-
Create product detail screen
- fetch product from backend
- create 3 columns for image, info and action
-
Create loading and message component
- create loading component
- use spinner component
- create message component
- create utils.js to define getError function
-
Implement add to cart
- Create react context
- define reducer
- create store provider
- implement add to cart button click handler