Creating a To-Do List Web App with React

The world of web development offers endless opportunities to create interesting and useful applications. In this article, we will explore the process of creating a To-Do List web app using React, one of the most popular JavaScript libraries for building dynamic user interfaces.

Creating the React Project

To get started, you will need to create a new React project using the npx create-react-app command. This command will automatically set up a React development environment. You can replace "todo-list-app" with the desired name for your project.

npx create-react-app todo-list-app
cd todo-list-app
npm start

Main Component: App

The App component is responsible for managing the task state and the main functions of the application. Here's how it's implemented:

import React, { useState, useRef } from "react";
// Other necessary imports

function App() {
  const [task, setTask] = useState([]);
  const inputRef = useRef(null);

  const submit = (e) => {
    e.preventDefault();
    // Add a new task
  };

  // Other functions like handleCompleteClick and removeItem

  return (
    // The structure of the App component
  );
}

export default App;

List Component

The List component is responsible for displaying the list of tasks in the application. It accepts data and functions from the App component to show tasks and handle user actions. Here's how it works:

import React from "react";
// Other necessary imports

function List(props) {
  return (
    <>
      <ul className="task-list">
        { 
          props.tasks.map((task) => (
            <li key={task.id}>
              <p className={task.complete ? 'complete' : ''}>{task.task}</p>
              <Button {...task} handleComplete={props.handleCompleteClick} remove={props.remove} />
            </li>
          ))
        }
      </ul>
    </>
  );
}

function Button({ handleComplete, complete, id, remove }) {
  return (
    <div className="btn-container">
      <button className={complete ? 'complete' : ''} onClick={() => handleComplete(id)}>
        <FaCheck />
      </button>
      <button>
        <RiDeleteBack2Fill onClick={() => remove(id)}/>
      </button>
    </div>
  );
}

export default List;

Conclusions

In this article, we've explored how to create a To-Do List web app with React. This is just the beginning, and there are many possibilities for improvement and customization. You can add features like task saving or managing multiple lists. It all depends on your creativity and the specific needs of your project. The complete source code for this project is available on GitHub, so feel free to explore and adapt it to your requirements. Happy coding!