Todo List with React.js Beginner's Guide

Introduction:

React.js is a popular JavaScript library used to build user interfaces. With its component-based architecture and dynamic virtual DOM representation, React.js provides an excellent framework for developing interactive applications. In this article, we'll learn how to create a simple Todo list app using React.js, allowing users to add, cancel, and mark tasks until they're done.

Implementation:

To start building our to-do list app with React.js, follow the steps below:

Step 1: Installation

First, make sure you have Node.js and npm (Node Package Manager) installed on your device. Create a new directory for your project and navigate to it using the command line.

Step 2: Create a new React application

Run the following command to create a new React app:

npx create-react-app todo-list

This command creates a new React project called "todo-list" in a folder with the same name.

Step 3: Project Structure

Open the project in your favorite code editor. You will see a file structure similar to this:

todo-list
├── src
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── public
│   ├── index.html
│   └── favicon.ico
├── package.json
└── ...

Step 4: Update App.js

Replace the contents of the app.js file with the following code:

import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleAddTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, inputValue]);
      setInputValue('');
    }
  };

  const handleDeleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  return (
    <div className="App">
      <h1>Todo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={handleInputChange}
        placeholder="Add a new task"
      />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Step 5: Create a to-do list

To customize the Todo list app, open the App.css file and add the styles you want.

Step 6: Start the development server

At the command line, change to the project directory and run the following command to start the development server:

npm start

Step 7: Open the application

Once the development server is running, open your browser and go to http://localhost:3000 to see your Todo list app in action.

1. Import the necessary modules from React.
2. Define a functional component named App.
3. Declare two state variables: todos (initially an empty array) and inputValue (initially an empty string).
4. Implement a change event handler, handleInputChange, to update the inputValue state based on user input.
5. Implement an event handler, handleAddTodo, to add a new todo to the todos state when the "Add" button is clicked. It checks if the inputValue is not empty before adding.
6. Implement an event handler, handleDeleteTodo, to remove a todo from the todos state when the "Delete" button is clicked. It filters out the todo based on its index.
7. Render the main div element containing the Todo list.
8. Render an input element for adding new todos, with an onChange event handler to update the inputValue state.
9. Render a button element to add new todos, with an onClick event handler calling handleAddTodo.
10. Render an unordered list element to display the todos.
11. Use the map function to iterate over the todos array and render each todo as a list item.
12. Include a button inside each list item to delete the corresponding todo, with an onClick event handler calling handleDeleteTodo.
13. Export the App component as the default export.

The results:

Congratulations! You have successfully built a Todo list app using React.js. By following this implementation guide and understanding the pseudocode, you can extend and develop the application based on your needs.
React.js provides a reliable framework for building dynamic and interactive applications, and with some creativity you can customize Todo lists for your specific needs. Happy coding!

#reactjs #react #js #dev #webdev #coding #programming #developers