Before we start creating To-Do app with ReactJs. I hope you under the some concept of React js. If not First Check our previous post about getting started with react and also Es6 features.

To-Do App

we will make a simple To-do app which will look like this. In which we will make form and add our tasks below. we can also delete them.

Todo app with React CodeParadox

Let’s Code

we will run these commands to make our Default app.

After this we will create new folder in src and name it component. Create two js file first TodoForm.js and second TodoPost.js.

This is our File structure.

React todo file structure

Adding text in <h1> “Hello from TodoForm” and “Hello From TodoPost“in Both component files respectively.

Then we will Import them in aap.js and call them in our render Function.

Output:

TodoForm:

Now we will make our TodoForm for input Tasks:

we made a simple html form and as you see in form heading we added a onSubmit event where we are calling onSubmit function which we will make in a second and in Input text field add the value of the current state and also add Event onChange in text field. Now we will make onChange fucntion.

Event handling functions.

Let’s make our state.

TodoPost.js

In onClick function we are handling the onClick event of the todo item.

In Todos where we mapping  through the all todos from input field of TodoForm and adding the className and onClick event.

App.js

In constructor this.state is initialized and  In handleTodo function adding todo which is passing as props and getting todo from input text field, pushing in array of todo in app.js .

DeleteItem is handling the delete feature of our todo Application where we are filter the array and return when our key ( key is the item which we clicked from our array todo ) is equal to the FilterItem of the todo array.

So state will be set again  with FilterItem.

All javaScript is done.

Wrap Up:

Now our app is almost complete. We will add some magical css to make our app beautiful.

let’s add some code in our app.css file

Conclusion:

Our is app ready. we can build this simple app in many ways. we choose this method. where we make form handled actions, passing data with help of props and setting our states.

Hope you like it. if yes please share.

Thanks alot for reading this. GitHub link for our this Project.


Suraj Sharma

Developer who never forgets semicolon.

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: