Todo List – React Js

Introduction

Todo List is a simple application that allows users to create, read, update, and delete (CRUD) tasks. It is a fundamental example of how to build a web application using React, a popular JavaScript library for building user interfaces.

In this tutorial, we will go through the step-by-step process of building a Todo List application using React. We will cover the basics of React, including components, state, and props, as well as how to use JSX, a syntax extension for JavaScript that allows us to write HTML-like code in our JavaScript files.

Step 1: Creating a New React Project

To start building our Todo List application, we need to create a new React project. We can do this using the create-react-app command in our terminal.

npx create-react-app todo-list-app

This command will create a new directory called todo-list-app containing the basic structure for a React project, including the public, src, and package.json files.

Step 2: Setting up the Project Structure

Before we start coding, let's take a look at the project structure and set up our directories and files.

• The public directory contains the static files that are served by the development server.
• The src directory contains the source code for our application, including the components, images, and other assets.
• The package.json file contains the metadata for our project, including the dependencies and scripts.

Let's create a new directory called components inside the src directory, where we will store our Todo List components.

mkdir src/components

Step 3: Creating the Todo List Component

Let's create a new file called TodoList.js inside the components directory, where we will define our Todo List component.

touch src/components/TodoList.js

In this file, we will import the useState hook from React, which allows us to add state to our component. We will also define the TodoList component, which will render a list of Todo items.

import React, { useState } from 'react';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    setTodos([...todos, { text: newTodo, completed: false }]);
    setNewTodo('');
  };

  const handleInputChange = (event) => {
    setNewTodo(event.target.value);
  };

  return (
    <div>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTodo}
          onChange={handleInputChange}
          placeholder="Enter a new todo item"
        />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => console.log('Todo item ' + index + ' checked')}
            />
            <span
              style={{
                textDecoration: todo.completed? 'line-through' : 'none',
              }}
            >
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

In this component, we define two state variables: todos and newTodo. todos is an array of Todo items, and newTodo is the text input by the user.

We also define two functions: handleSubmit and handleInputChange. handleSubmit is called when the user submits the form, and it adds a new Todo item to the todos array. handleInputChange is called when the user types in the input field, and it updates the newTodo state variable.

Finally, we render the Todo List component, which includes a form for adding new Todo items, a list of existing Todo items, and a checkbox for each item.

Step 4: Rendering the Todo List Component

Now that we have defined our Todo List component, let's render it in our App component.

Create a new file called App.js inside the src directory, and add the following code:

import React from 'react';
import TodoList from './components/TodoList';

const App = () => {
  return (
    <div>
      <TodoList />
    </div>
  );
};

export default App;

In this file, we import the TodoList component and render it in the App component.

Step 5: Running the Application

Now that we have defined our Todo List component and rendered it in our App component, let's run the application.

Open your terminal and navigate to the project directory. Run the following command to start the development server:

npm start

This command will start the development server, and you can access your Todo List application by navigating to http://localhost:3000 in your web browser.

Conclusion

That's it! We have built a simple Todo List application using React. In this tutorial, we learned how to create a new React project, set up the project structure, create a Todo List component, and render it in our App component.

Of course, this is just the beginning of our Todo List application. We can add more features, such as editing and deleting Todo items, as well as saving the data to a database. But for now, we have a basic Todo List application up and running.

I hope this tutorial has been helpful in getting you started with React. Happy coding!