TODO App React JS (Local Storage)

Introduction

Welcome to the TODO App React JS tutorial! In this tutorial, we will be creating a simple TODO app using React JS and Local Storage. This app will allow users to add, remove, and mark tasks as completed. We will cover the basics of React and Local Storage, and by the end of this tutorial, you will have a fully functional TODO app.

What is Local Storage?

Local Storage is a web storage API that allows us to store data locally on the client-side. It is a part of the Web Storage API, which provides a mechanism to store and retrieve data in the browser. Local Storage is ideal for storing small amounts of data that do not need to be sent over the network. It is also a good way to store data that needs to be persisted across page reloads.

What is React JS?

React JS is a JavaScript library for building user interfaces. It is used for building reusable UI components and managing the state of those components. React is a view library, which means it is used for rendering UI components, not for managing the state of the application. It is often used in conjunction with other libraries and frameworks to build complete applications.

Getting Started

To get started, you will need to install Node.js and a code editor or IDE. If you are new to React, I recommend starting with a code editor like Visual Studio Code or IntelliJ IDEA. You will also need to install the create-react-app package, which is a tool for building React applications.

Step 1: Create a New React App

To create a new React app, open your terminal and run the following command:

npx create-react-app todo-app

This will create a new directory called todo-app containing the basic files and structure for a React app.

Step 2: Set Up Local Storage

To use Local Storage in our TODO app, we need to add a few lines of code to our app. Open the index.js file and add the following code:

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';

const TodoApp = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  useEffect(() => {
    const storedTasks = localStorage.getItem('tasks');
    if (storedTasks) {
      setTasks(JSON.parse(storedTasks));
    }
  }, []);

  useEffect(() => {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const handleSubmit = (event) => {
    event.preventDefault();
    setTasks([...tasks, { text: newTask, completed: false }]);
    setNewTask('');
  };

  const handleToggle = (index) => {
    const newTasks = [...tasks];
    newTasks[index].completed =!newTasks[index].completed;
    setTasks(newTasks);
  };

  const handleRemove = (index) => {
    setTasks(tasks.filter((task, i) => i!== index));
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTask}
          onChange={(event) => setNewTask(event.target.value)}
          placeholder="Add new task"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => handleToggle(index)}
            />
            <span
              style={{
                textDecoration: task.completed? 'line-through' : 'none',
              }}
            >
              {task.text}
            </span>
            <button onClick={() => handleRemove(index)}>X</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

ReactDOM.render(<TodoApp />, document.getElementById('root'));

This code sets up our TODO app with the basic functionality: adding new tasks, toggling task completion, and removing tasks. It also uses Local Storage to persist the tasks across page reloads.

Step 3: Run the App

To run the app, open your terminal and navigate to the todo-app directory. Run the following command:

npm start

This will start the development server, and you can access the app by navigating to http://localhost:3000 in your web browser.

Conclusion

That's it! You now have a fully functional TODO app using React JS and Local Storage. You can add new tasks, toggle task completion, and remove tasks. The app will persist the tasks across page reloads using Local Storage.