The TODOs app is the new “Hello World”
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!
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!