A React TODOs example, explained by@samerbuna

A React TODOs example, explained

June 23rd 2022 11,342 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
Samer Buna HackerNoon profile picture

Samer Buna

The TODOs app is the new “Hello World”

image
I was asked to answer a Quora question about a simple TODOs example, and I thought a detailed explanation for it would be helpful to any one starting to learn React.
You can see the code in action here (Make sure you execute it with ES6/Babel selected in the middle). I did not write that code, I am just going to explain it inline after each important concept.
The example is a simple TODOs app with 3 components:
  • TodoList (the container and state manager)
  • TodoItems (presentational for the list of todos)
  • TodoInput (controlled component to read a new todo)
The first rendered interface looks like:
image
The initial list renders with test items “red” and “blue”, then you can use the “Add” button to add more items to the list.
Thanks for reading!
react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!