Explaining a React TODOs example

Samer Buna
Jun 16, 2016 · Unlisted

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)
  • 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.

Samer Buna is the author of “React.js: Getting Started”, “Building Data-driven React Applications with Relay, GraphQL, and Flux” and multiple other courses on Pluralsight.

Unlisted

EdgeCoders

jsComplete’s Medium Publication — jsComplete is a FREE software educational library focused on JavaScript, Node, React & GraphQL. It has video courses, books, articles, and interactive lessons.

Samer Buna

Written by

Author for Pluralsight, O'Reilly, Manning, and LinkedIn Learning. Curator of jsComplete.com

EdgeCoders

jsComplete’s Medium Publication — jsComplete is a FREE software educational library focused on JavaScript, Node, React & GraphQL. It has video courses, books, articles, and interactive lessons.