1. Simple React todo list

This is the first part of my React tutorials. See the Intro to react.js here

Let’s get started with simple example to create todo list.

First what we need to do it is:

1. Component with a state and render methods

As we can see our state is a object with two properties term and items

• term to store what we passing as a value to our input
• items to store every value which we passing to our todo list

2. Input with value and onChange method

• value takes what is stored in our state as term
• onChange is a function which changes our state depending on the current input value. To change state we need to use the this.setState() method which also triggers UI update.

3. Form with onSubmit method

Now we need to wrap our input field inside a form together with an add button.

• onSubmit is a function which does three things:

1. Cleans the input field after a submit action is triggered, by resetting term to the initial empty string value
2. Pushes every term to our array of items after submit
3. The preventDefault() method stops the default action of an element from happening.

4. Separate component to show our list

We pass items as a props to our list component from the App component.

To pass props to list components we simple need to do this:

And we are done ;)

This how our components should look like now:

Code at github

Now is your turn, try do it by your own.

Enjoy;)

Next tutorial Increment and Decrease number onClick React