Creating a Simple Todo List App in React

13.07.2023 — React, JavaScript, Front-end Development — 1 min read

In this tutorial, we will walk through the process of creating a simple todo list application using React. React is a powerful JavaScript library that allows you to build dynamic and interactive user interfaces. By the end of this tutorial, you will have a basic understanding of how React works and how to create a functional todo list app.

Here are the steps we'll follow:

Set up the project: Start by setting up a new React project using Create React App, a popular tool for bootstrapping React applications. Open your terminal and run the following command:

1npx create-react-app todo-list-app

Create the TodoList component: In the src folder of your project, create a new file called TodoList.js. This will be our main component for rendering the todo list. Inside the file, add the following code:

1import React from 'react';
2
3const TodoList = () => {
4  return (
5    <div>
6      <h1>Todo List</h1>
7      {/* Add todo items here */}
8    </div>
9  );
10};
11
12export default TodoList;

Add state to manage todo items: In order to manage the todo items, we need to add state to our TodoList component. Replace the code inside the TodoList.js file with the following:

1import React, { useState } from 'react';
2
3const TodoList = () => {
4  const [todos, setTodos] = useState([]);
5
6  const addTodo = (task) => {
7    setTodos([...todos, task]);
8  };
9
10  return (
11    <div>
12      <h1>Todo List</h1>
13      <ul>
14        {todos.map((todo, index) => (
15          <li key={index}>{todo}</li>
16        ))}
17      </ul>
18
19      <input type="text" placeholder="Add todo" />
20      <button>Add</button>
21    </div>
22  );
23};
24
25export default TodoList;

Implement the addTodo function: We've added an input field and a button for adding todos, but they're not functional yet. Let's implement the addTodo function to handle the addition of new todo items. Update the code inside the TodoList.js file as follows:

1import React, { useState } from 'react';
2
3const TodoList = () => {
4  const [todos, setTodos] = useState([]);
5  const [task, setTask] = useState('');
6
7  const addTodo = () => {
8    if (task.trim() !== '') {
9      setTodos([...todos, task]);
10      setTask('');
11    }
12  };
13
14  return (
15    <div>
16      <h1>Todo List</h1>
17      <ul>
18        {todos.map((todo, index) => (
19          <li key={index}>{todo}</li>
20        ))}
21      </ul>
22
23      <input
24        type="text"
25        value={task}
26        placeholder="Add todo"
27        onChange={(e) => setTask(e.target.value)}
28      />
29      <button onClick={addTodo}>Add</button>
30    </div>
31  );
32};
33
34export default TodoList;

Styling the todo list: Let's add some basic styles to our todo list. Create a new file called TodoList.css in the same folder as TodoList.js and add the following CSS code:

1.container {
2  max-width: 400px;
3  margin: 0 auto;
4  padding: 20px;
5}
6
7h1 {
8  text-align: center;
9}
10
11ul {
12  list-style-type: none;
13  padding: 0;
14}
15
16li {
17  margin-bottom: 10px;
18}
19
20input[type='text'] {
21  width: 100%;
22  padding: 5px;
23  margin-bottom: 10px;
24}
25
26button {
27  display: block;
28  width: 100%;
29  padding: 10px;
30  background-color: #4caf50;
31  color: white;
32  border: none;
33}

Import the CSS file: Finally, import the TodoList.css file into TodoList.js to apply the styles. Update the import statement at the top of the file as follows:

1import React, { useState } from 'react';
2import './TodoList.css';

That's it! You've successfully created a simple todo list app using React. You can now add new todos by typing in the input field and clicking the "Add" button. The todo items will be displayed in a list below the input field.