paint-brush
A React TODOs example, explainedby@samerbuna
11,430 reads
11,430 reads

A React TODOs example, explained

by Samer BunaMay 30th, 2017
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

I was asked to answer a <a href="https://www.quora.com/In-React%E2%80%99s-TODOs-example-how-do-you-explain-props-and-how-they-go-from-one-component-to-another" target="_blank">Quora question</a> about a simple TODOs example, and I thought a detailed explanation for it would be helpful to any one starting to learn <a href="https://hackernoon.com/tagged/react" target="_blank">React</a>.
featured image - A React TODOs example, explained
Samer Buna HackerNoon profile picture

The TODOs app is the new “Hello World”

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:

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!