Your first front-end framework: React 🧮

Do you keep forgetting your to-do's? No more! Make a quick list here.

Objectives

• Create a React application
• Use basic hooks for managing state and reactivity
• Organize a React app in components

Specifications

You will build a small to-do application that lives in your browser and saves to–dos even after restarting the browser.

🌱 Must-haves

• Read this documentation on The Basics
• Create a React application and run it locally on your browser.
• Publish the source code on your GitHub repository
• Build a to-do app with React.js
• Save your to-dos, even after starting the browser again
• Deploy the project on a live server

🌼 Nice-to-haves (doable)

• Refactor parts you aren't happy with.
• Rebuild from scratch without any tutorial to improve your understanding (Instructions will be of a big help here!).
• Improve on your project so that it's not only a learning repository, but also a show-off project when interviewing:
  • Add styling
  • Improve responsiveness
  • Check for little, smooth effects
  • Think UX: what extra features can make your todo app better?

🌳 Nice-to-haves (hard)

Done all of the above? Don't worry! We have some more you can do:

• Install a React calendar package and implement it in a new component into your app.
• Install and use React-router-dom as a router between components. (Hint: Think about a structure like: router -> show component)
• See if someone else needs help.
• Have a live edit option for existing to-dos (when you click on the text of a to-do, the app allows you to edit it in place).
• Make a version with another JS framework like VueJS or Svelte.