Creating a TODO list app with Firebase + React — for beginners 🙌


  • Firebase
  • React
  • Create-react-app
  • Create todo app
  • Database
  • Hosted online

Two Fundamentals of React

  • Short term memory — non-persistent → gets cleared after refresh
  • Component specific
  • Allows us to differentiate one component from another
  • Components → reusable blocks of code; must be changed in one place (within component declaration)

For a cleaner process, break code up into separate components.

Run Dynamic JavaScript with JSX
JSX =JavaScript + HTML hybrid 🔥

Prevent refresh


Material UI

To add button:

<Button variant="contained">Default</Button>

To prevent our button from adding blank values to our todo list, we can disable it if the input field is empty, as below:

<Button variant="contained" disabled={!input}>Default</Button>

🔥 Firebase (database)
- Real time database

🌎 Hosted online

✔️ Full CRUD functionality

🎨 MaterialUI for design

- React hooks