https://github.com/basir/react-18-shopping-cart

https://github.com/basir/react-18-shopping-cart

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/basir/react-18-shopping-cart
• Owner: basir
• Created: 2022-08-02T06:53:17.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-02T06:57:40.000Z (over 2 years ago)
• Last Synced: 2024-10-12T17:12:38.391Z (3 months ago)
• Language: JavaScript
• Size: 464 KB
• Stars: 5
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Simple Shopping Cart

## Lessons

1.  create react app

    1. npx create-react-pp

    2. remove extra files

2.  create website layout

    1. add Header, Main and Basket component

    2. Style component

3.  create Main component

    1. create data.js

    2. render product items

4.  create Product component

    1. create product divs

    2. pass props to product component

5.  Implement cart

    1. add and remove items from the cart

6.  create basket component

    1. list items in cartItems

    2. calculate sub total

    3. show checkout button

7.  save cart items in local storage

    1. save items in local storage on add and remove

    2. use useEffect to get items in local storage

8.  use useTransition and useDeferedValue

    1. read items in local storage using useTransition

    2. change cartItems.length to transition effect

9. Deploy website on github pages

    1. login github account

    2. push code to github

    3. npm install gh-pages --save-dev

    4. package.json "homepage": "https://github_name.github.io/webapp_name",

    5. add deployment script:  "predeploy": "npm run build", "deploy": gh-pages -d build",

    6. npm run deploy