WWPHacks '22 React Bootcamp

Demo To-Do List 📃

Features 🤩:

• Add, delete, and check off tasks!
• Persistent state across reloads thanks to localStorage

Background 🤔:

• Introduces beginners to React.js
• Learn about state, props, functional components, and more!
• Code comments and development by blueputty01 with support from Siddarth Narayanan

How I started 🚀:

• The framework of this project was built using the command npx create-react-app my-app
• Learn more about Create React App here

How to build 🏗️:

• Use this Figma for reference
• Look for branches prefixed with 'step', and you'll be able to see the progression of the app along with some notes!

Implementing add-task component

Code up to this point

Implement text box

1. Add index.js in './Add'
2. Import Add component from './Add'
3. Add DOM markup
4. Introduce useState hook and controlled inputs

Implementing item component

Code up to this point

Implement component that displays individual tasks

1. Steps 1-3 from above but with './Item'

Dynamic item list

Code up to this point

Allow for a dynamic list of components to be displayed

1. Add .map to App.js

Implementing add item functionality

Code up to this point

1. Implement "add item" function in App.js
2. Add useLocalStorage hook and uuid packages
3. Pass addHandler to Add component

Implementing item deletion functionality

Code up to this point

1. Implement "add item" function in App.js
2. Pass deleteHandler to Item component

Implementing item toggle functionality

Code up to this point

1. Similar process as above