Skip to content

Latest commit

 

History

History
39 lines (30 loc) · 1.57 KB

README.md

File metadata and controls

39 lines (30 loc) · 1.57 KB

react-grocery-list

Simple React grocery list app. Features include:

  • Filtered user input for adding items (allows alphanumeric, ampersands, single quotes, hyphens, and spaces)
  • Done state for marking items off the list
  • Quantity manipulation
  • Remove button with an attached confirmation modal
  • Data stored in/saved to the browser's LocalStorage
  • JSON data download (for development purposes - in case a dev would want to take the data and use it elsewhere)

Use create-react-app

Make a directory for your project. CD into it using command line. Then install React using npm or yarn.

npm init react-app my-app OR yarn create react-app my-app

Add the files from this repository

Replace everything in the src directory inside my-app with the files in the src directory in this repository.

Install the dependencies

This app has two dependencies needed to function: react-modal and uuid. React-Modal is needed for the removal confirmation modal attached to list items. UUID is needed for generating a unique ID for each item in the list.

npm install react-modal OR yarn add react-modal

npm install uuid OR yarn add uuid

Start up the dev server

It will be at localhost:3000. The page will automatically reload if you make changes to the code and you will see the build errors and lint warnings in the console.

npm start OR yarn start

✨ Learn more about create-react-app & where to go from here

Create React App documentation.