Building a Simple Todo List App

 Building a Simple Todo List App

ReactJS is a popular JavaScript library for building user interfaces. It was developed by Facebook and is widely used by developers to build scalable and reusable components for web applications. In this tutorial, we will walk through the steps of building a simple Todo List app using ReactJS.

Step 1: Setting up the Environment

Before we can start building our Todo List app, we need to set up our development environment. We will be using Node.js and the create-react-app command-line tool to create our React app. To get started, open your terminal and run the following commands:

sql

npx create-react-app todo-list-app

cd todo-list-app

npm start

The first command creates a new React app named "todo-list-app". The second command changes into the app directory, and the third command starts the development server. You should see a message in your terminal that says "Compiled successfully" and a web page should open in your default browser showing the React app.

Step 2: Creating a Todo Component

Now that we have set up our development environment, let's create our first component. In React, a component is a reusable piece of UI that can be used throughout your application. We will create a new file named Todo.js in the src/components directory and add the following code:

javascript

import React from 'react';

const Todo = ({ todo }) => {

  return (

    <div className="todo">

      <label>

        <input type="checkbox" checked={todo.completed} />

        {todo.text}

      </label>

    </div>

  );

};

export default Todo;

This code defines a functional component named Todo that takes a todo object as a prop and returns a div element with a label and checkbox.

Step 3: Creating a TodoList Component

Next, let's create a new component named TodoList that will render a list of Todo components. We will add this component to the App component later on. Create a new file named TodoList.js in the src/components directory and add the following code:

javascript

import React from 'react';

import Todo from './Todo';

const TodoList = ({ todos }) => {

  return (

    <div className="todo-list">

      {todos.map((todo) => (

        <Todo key={todo.id} todo={todo} />

      ))}

    </div>

  );

};

export default TodoList;

This code defines a functional component named TodoList that takes an array of todos as a prop and returns a div element with a list of Todo components.

Step 4: Creating the App Component

Now, let's create the main App component that will render the TodoList component. Open the App.js file in the src directory and replace the existing code with the following code:

javascript

import React from 'react';

import TodoList from './components/TodoList';

const App = () => {

  const [todos, setTodos] = React.useState([

    { id: 1, text: 'Buy milk', completed: false },

    { id: 2, text: 'Walk the dog', completed: false },

    { id: 3, text: 'Do laundry', completed: true },

  ]);

  return (

    <div className="app">

      <h1>Todo List</h1>

      <TodoList todos={todos} />

    </div>

  );

};

export default App;

This code defines a functional component named App that uses React's useState hook to store an array of todos. We pass the todos array as a prop to the TodoList component.

Step 5: Adding State and Event Handlers

Now that we have our basic app structure set up, let's

add state and event handlers to allow users to add and remove todo items. We will add a new form component to the App component and use the useState hook to store the input value. We will also add event handlers to handle form submission and todo item deletion.