Real-World React Project Walkthrough: Building a To-Do List App

React is a powerful library for building user interfaces, and one of the best ways to learn it is by creating real-world projects. In this tutorial, we'll walk through the process of building a To-Do List application using React. By the end of this tutorial, you'll have a fully functional To-Do List app that you can use and extend.

Prerequisites

Before we get started, make sure you have Node.js and npm (Node Package Manager) installed on your computer. You can download them from the official website if you haven't already: Node.js Downloads.

Setting Up the Project

Let's start by creating a new React application using Create React App, a popular tool for setting up React projects quickly.

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

This will create a new React application in a directory named todo-list-app. Navigate to the project folder using cd todo-list-app.

Creating the To-Do List Component

In the src directory of your project, you can find a file called App.js. Open this file and let's start by creating a basic structure for our To-Do List component.

import React, { useState } from 'react';

function App() {
  const [tasks, setTasks] = useState([]);
  const [taskText, setTaskText] = useState('');

  const addTask = () => {
    if (taskText.trim() !== '') {
      setTasks([...tasks, taskText]);
      setTaskText('');
    }
  };

  const deleteTask = (index) => {
    const newTasks = [...tasks];
    newTasks.splice(index, 1);
    setTasks(newTasks);
  };

  return (
    <div className="App">
      <h1>To-Do List</h1>
      <div>
        <input
          type="text"
          placeholder="Add a task..."
          value={taskText}
          onChange={(e) => setTaskText(e.target.value)}
        />
        <button onClick={addTask}>Add</button>
      </div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task}
            <button onClick={() => deleteTask(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

In this component:

• We use the useState hook to manage the state of the tasks and the input field for adding new tasks.

• The addTask function adds a new task to the list when the "Add" button is clicked.

• The deleteTask function removes a task from the list when the "Delete" button is clicked.

Styling the To-Do List

Let's add some basic styles to make our To-Do List look better. You can create a new CSS file (App.css) and include it in your App.js file.

import './App.css';

In App.css, you can add styles to format the to-do list items and input field. Feel free to customize the styles to your liking.

/* App.css */
.App {
  text-align: center;
  font-family: Arial, sans-serif;
}

input[type="text"] {
  width: 200px;
  padding: 5px;
  margin-right: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 10px 0;
}

button {
  padding: 5px 10px;
  background-color: #3498db;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #2980b9;
}

Testing the To-Do List App

Now that we've created the To-Do List component and added some styles, let's see it in action. Run the following command in your project directory:

npm start

This will start the development server, and you can view your To-Do List app by opening your browser and navigating to http://localhost:3000.

Conclusion

Congratulations! You've built a real-world To-Do List application using React. This project covers some fundamental concepts of React, including state management, event handling, and component rendering.

Feel free to enhance this project further by adding features such as task completion, due dates, or even saving tasks to local storage. React's flexibility and component-based architecture make it an excellent choice for building interactive web applications.

Happy coding! 🚀

---

This walkthrough provides a starting point for building a To-Do List application with React. You can continue to expand and improve the app by adding more features and functionality. Remember that this is just one example of what you can build with React, and the possibilities are limitless.