You're going to recreate the javascript greengrocers exercise from scratch. But this time, using React!
Reusing an exercise that you already know will help you understand the fundamentals of React.
- Fork this repository
- Clone the forked repository onto your local machines
- In the root directory, type
npm install
, which installs dependencies for the project - Finally, type
npm run start
, which starts a development server that runs your website in the browser. That server will reload your website whenever you make any changes to source files
- A user can view a selection of items in the store
- From the store, a user can add an item to their cart
- From the cart, a user can view and adjust the number of items in their cart
- If an item's quantity equals zero it is removed from the cart
- A user can view the current total in their cart
- Create all the components you need, using the templates as a reference
- Create all the pieces of the state you need, using the example provided
- Add all the event listeners you need to make the page reactive
- Create a diagram of your component hierarchy before starting to code
- Annotate your diagram by adding what state each component needs to manage - React State or React Props
- Add filters to the store ie. filter by item type; when a user clicks a filter they will only see items of that type
- Add sorting to the store ie. sort by price or sort alphabetically; when a user clicks sort they will see a sorted list of items
- Add a new detail component for each of the items, and render it conditionally after clicking on an item