An online shopping store created in ReactJS
.
- at least two pages
- homepage
- shopping page, must:
- include a shopping cart
- display the number of items currently in the shopping cart.
- have a button to go the shopping cart to checkout and pay
- include a shopping cart
- build individual cards for each product
- add an "add to cart" button
- once the user has submitted their order the amount on the cart itself should adjust (i.e clear / reset cart).
- use the React Testing Library
- use the React Router to manage page changes
- create the not found page
- let all the other invalid /urls lead to the not found page
- fetch data from an API.
- keep track of state values on page change / refresh
- Get an idea of how the finished product is ment to work
- Clone the repo
- Open the the
shopping-cart
folder - Run
npm install
to install all of the project dependecies - Run
npm start
from your terminal- If your browser does not open automatically paste http://localhost:3000 in the address bar of your browser and press Enter
-
useHref() may be used only in the context of a Router component
-
When trying to render the nav component in my tests I ran into the above error, resulting in my tests failing.
-
After a brief research I learnt that the above error meant that all components that use the
Link
component need to be rendered only within the Router context. Even in tests. -
problem:
render(<Nav page={"home"} />);
-
solution:
import { BrowserRouter } from "react-router-dom"; ... render( <BrowserRouter> <Nav page={"home"} /> </BrowserRouter> );
-
- homepage image: https://unsplash.com/photos/AZTpFmYBzzs
- favicon image: https://www.californian.co.za/wp-content/uploads/2020/11/A80-LEATHER-ALL-STAR-132173C-WHITE1.png
- product images: https://superbalist.com/brands/converse/men/shoes, all the product information is fetched from the preceding link and can be bought there.