I was asked to answer a Quora question about this simple TODOs example, and I think a detailed explanation for it will 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)

(the container and state manager) TodoItems (presentational for the list of todos)

(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.