Build a React “Todo” App (part 1)

This week, I decided to create a “Todo” App using React. I’m going to cover how I realized it.

Set up the app

App.js

2. Import your styling, you can just copy and paste what is in my App.css file here and also import the font and fontawesome in the index.html as shown here (l.12–15 and l. 16–21)

Create your first components

Form.js

The Form component will have classic html which will be the form that we will use in the UI to add a “Todo” and the dropdown menu that we will see later. Tip: Remember that in React ‘class’ is a reserved word so your class have to be ‘className’

The TodoList component will have a <div> with a <ul> to list the todos. Both Form.js and TodoList.js will have to be imported in App.js and used in your function.

App.js and TodoList.js

Update the state

Once this is done, we can update the Form.js by declaring an arrow function called inputTextHandler that we will call in our HTML every time we enter an input.

App.js and Form.js

Now we want to submit some data when clicking on the add button. To do so, we need to create a new constant, prevent the page from refreshing by using e.preventDefault() and add this inputText to the array of todos.

App.js and Form.js

The next step is to create a new component called Todo.js that will actually be each todo item with its own checkmark and delete button. It’s a way of rendering the component dynamically. This will be done in the TodoList.js component where we will map over the todos.

App.js, Todo.js and TodoList.js

At this point, when you add a new item to your todos, it should add nicely in a list. On the next blog, we will see how to handle the checkmark and delete button, and how to save the data in the local storage.

French guy who recently moved to the United States. I am also changing career after having worked 13 years in restaurants. I will be going into coding.