Todo List App with React: Component-Based Dev Dive

In the realm of front-end development, React has revolutionised the way we build user interfaces by embracing a component-based architecture. In this blog, we’ll embark on a journey through the creation of a Todo List application using React, exploring the principles of component-based development along the way.

Understanding Component-Based UI Development

At the heart of React lies the concept of components. A component is a self-contained, reusable piece of UI that encapsulates both structure and behaviour. By breaking down the UI into smaller components, developers can manage complexity, promote re-usability, and enhance maintainability.

Steps to Create React App 

To kickstart our React project, we’ll use Create React App, a convenient tool for setting up a new single-page application in React. It streamlines the development environment, allowing us to leverage the latest JavaScript features, enjoy a pleasant developer experience, and optimise our application for production.

• Install Node.js and npm: Before we begin, ensure that you have Node.js installed on your machine. You’ll need Node.js version 14.0.0 or higher, along with npm version 5.6 or higher. You can download and install Node.js from the official website: Node.js.
• Create a New React Project: Open your terminal and run the following command to create a new React project. Replace my-app with your desired project name.

        npx create-react-app my-app

           This command will generate the necessary files and folders for your React application, including a development server to run your app locally.

• • Navigate to the Project Directory: Once the project has been created, navigate into the project directory using the following command:

•   cd my-app

  Building the Todo List Component 

  Let’s start by creating a TodoList component, which will serve as the main container for our todo list application. The TodoList component will manage the state of tasks and provide functionality for adding, completing, and deleting tasks.

  // TodoList.js
  
  import React, { useState } from 'react';
  
  const TodoList = () => {
    const [tasks, setTasks] = useState([]);
    const [newTask, setNewTask] = useState('');
  
    // Functions for handling task operations (adding, completing, deleting)
  
    return (
      <div>
        {/* Todo List UI */}
      </div>
    );
  };
  
  export default TodoList;
  

   

  Adding Functionality to the Todo List Component

  Next, let’s implement the functionality for adding new tasks, marking tasks as completed, and deleting tasks. We’ll utilize React’s state management hooks (useState) to maintain the state of tasks and implement event handlers to respond to user interactions.

  // TodoList.js
  
  import React, { useState } from 'react';
  
  const TodoList = () => {
    const [tasks, setTasks] = useState([]);
    const [newTask, setNewTask] = useState('');
  
    const handleChange = (event) => {
      setNewTask(event.target.value);
    };
  
    const handleSubmit = (event) => {
      event.preventDefault();
      if (newTask.trim() !== '') {
        setTasks([...tasks, { id: Date.now(), text: newTask, completed: false }]);
        setNewTask('');
      }
    };
  
    const toggleTaskCompletion = (taskId) => {
      setTasks(
        tasks.map((task) =>
          task.id === taskId ? { ...task, completed: !task.completed } : task
        )
      );
    };
  
    const deleteTask = (taskId) => {
      setTasks(tasks.filter((task) => task.id !== taskId));
    };
  
    return (
      <div>
        {/* Todo List UI */}
      </div>
    );
  };
  
  export default TodoList;
  

  Integrating the Todo List Component 

  Now that we have our TodoList component with all the necessary functionality, let’s integrate it into our main application.

  // App.js
  
  import React from 'react';
  import TodoList from './TodoList';
  
  const App = () => {
    return (
      <div>
        <h1>React Todo List</h1>
        <TodoList />
      </div>
    );
  };
  
  export default App;

  Start the Development Server: Run the following command to start the development server and launch your React application in a web browser 

  npm start

  This command will compile your React code, bundle it, and launch a development server. It will also open your default web browser and display your React application. Any changes made to your code will be automatically reflected in the browser, thanks to hot reloading.

  If your code is successfully compiled, you will see the following output:

  

   

   

  Conclusion

  In this blog, we’ve embarked on a journey through the creation of a Todo List application using React, exploring the principles of component-based development along the way. By leveraging React’s component-based architecture, developers can build sophisticated user interfaces that are modular, reusable, and easy to maintain. As you continue your exploration of React and component-based development, remember to experiment, iterate, and embrace the power of modularisation in building modern web applications.

        Reference

           https://legacy.reactjs.org/docs/getting-started.html