React Todo List App Tutorial - React JS Project Tutorial for Beginners

Introduction

In this tutorial, you will learn how to create a functional and interactive Todo List App using React. This step-by-step guide is perfect for beginners and will help you understand key React concepts like components, state management, props, conditional rendering, and event handling. By the end of this tutorial, you will have the foundational skills to build more complex applications.

Step 1: Installation

Before you start building your Todo List App, you need to set up your development environment.

1. Install Node.js: Make sure you have Node.js installed on your machine. You can download it from nodejs.org.
2. Create a React App: Use the following command in your terminal to create a new React application:

   npx create-react-app todo-list-app
   

3. Navigate into the directory:

   cd todo-list-app
   

4. Start the development server:

   npm start
   

   Your default browser should open with the React app running.

Step 2: Creating Components

Components are the building blocks of a React application. In this step, you will create the main components for your Todo List App.

1. Create a Todo component:
   • In the src folder, create a new file named Todo.js.
   • Define your Todo component inside this file:

   import React from 'react';
   
   const Todo = ({ todo, onDelete, onComplete }) => {
       return (
           <div>
               <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                   {todo.text}
               </span>
               <button onClick={onComplete}>Complete</button>
               <button onClick={onDelete}>Delete</button>
           </div>
       );
   };
   
   export default Todo;
   

Step 3: Working on the Form

You’ll need a form to add new todos to your list.

1. Modify App.js:
   • Import the necessary components and use state to manage the list of todos.
   • Create a form for adding todos:

   import React, { useState } from 'react';
   import Todo from './Todo';
   
   const App = () => {
       const [todos, setTodos] = useState([]);
       const [input, setInput] = useState('');
   
       const handleAddTodo = (e) => {
           e.preventDefault();
           if (input) {
               setTodos([...todos, { text: input, completed: false }]);
               setInput('');
           }
       };
   
       return (
           <div>
               <form onSubmit={handleAddTodo}>
                   <input
                       type="text"
                       value={input}
                       onChange={(e) => setInput(e.target.value)}
                       placeholder="Add a new todo"
                   />
                   <button type="submit">Add Todo</button>
               </form>
               {todos.map((todo, index) => (
                   <Todo key={index} todo={todo} />
               ))}
           </div>
       );
   };
   
   export default App;
   

Step 4: Adding Todos and Using Props

Now that you have a form and Todo component, it’s time to pass data using props.

1. Update the Todo component to accept props for delete and complete actions:
   • Implement functionality to delete and mark todos as complete in App.js:

   const handleDelete = (index) => {
       const newTodos = todos.filter((_, i) => i !== index);
       setTodos(newTodos);
   };
   
   const handleComplete = (index) => {
       const newTodos = todos.map((todo, i) => (
           i === index ? { ...todo, completed: !todo.completed } : todo
       ));
       setTodos(newTodos);
   };
   

Step 5: Marking Todos as Complete

Make todos interactive by allowing them to be marked as complete.

1. Pass the complete function to the Todo component:

   {todos.map((todo, index) => (
       <Todo 
           key={index} 
           todo={todo} 
           onDelete={() => handleDelete(index)} 
           onComplete={() => handleComplete(index)} 
       />
   ))}
   

Step 6: Deleting Todo

You’ll implement a delete function to remove todos from the list.

1. Use the delete function created earlier in the Todo component’s props to enable deleting todos:
   • The button in the Todo component already handles the delete action.

Step 7: Edit Todo

To enhance functionality, allow users to edit existing todos.

1. Add an Edit button in the Todo component:
   • Implement state for editing in App.js and update the Todo component to handle edits.

const handleEdit = (index, newText) => {
    const newTodos = todos.map((todo, i) => 
        i === index ? { ...todo, text: newText } : todo
    );
    setTodos(newTodos);
};

2. Update the Todo component to include an edit input field when editing.

Conclusion

You have successfully built a functional Todo List App using React. Key takeaways include:

• Understanding React components, state, and props.
• Implementing event handling for user interactivity.
• Creating a dynamic application that allows adding, completing, and deleting todos.

Next steps could include enhancing the UI with CSS, adding local storage for persistence, or exploring more advanced React features like hooks and context. Happy coding!