This week, I decided to create a “Todo” App using React. I’m going to cover how I realized it.
Set up the app
1. First, run the command ‘npx create-react-app your-app-name’ in your terminal. Then start by refactoring the App.js file deleting everything in the <header> and replace it with the name of your choice, in my case ‘Matt’s Todo List’
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
The first component will be called Form.js and a 2nd one called TodoList.js. At the top of these components, React needs to be imported. I chose to go with arrow functions but functions can also be used.
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.
Update the state
Import the ‘useState’ element from the React library. By doing this, we can write variables like: const[inputText, setInputText] = useState(‘’); and use our setInputText as a prop to pass it down.
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.
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.
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.
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.
