Building a Task Tracker App with React and Local Storage

Building a Task Tracker App with React and Local Storage

Introduction

In this tutorial, we'll be building a simple task tracker application using React and Local Storage. By the end, you'll have a functional app where you can add, delete, and toggle tasks, with the data persisting in the browser's local storage.

Prerequisites

To follow along with this tutorial, you should have:

  • Basic knowledge of JavaScript and React
  • Node.js and npm installed on your system
  • A text editor (like Visual Studio Code)

Step 1: Setting Up the Project

First, we'll use the `create-react-app` tool to set up our React application. Run the following command in your terminal:

  1. npx create-react-app task-tracker

Once the command finishes executing, navigate into the project's directory:

  1. cd task-tracker

Now, you can start the development server with:

  1. npm start

Open your web browser to `http://localhost:3000`, and you should see the default `create-react-app` page.

Step 2: Creating the Task Component

Next, let's create a new component for the individual tasks. In the `/src` directory, create a new file called `Task.js` and add the following code:

  1. import React from 'react';
  2.  
  3. const Task = ({ task, onDelete, onToggle }) => {
  4. return (
  5. <div className={'task ' + (task.reminder ? 'reminder' : '')} onDoubleClick={() => onToggle(task.id)}>
  6. <h3>
  7. {task.text} <span style={{ color: 'red', cursor: 'pointer' }} onClick={() => onDelete(task.id)}>X</span>
  8. </h3>
  9. <p>{task.day}</p>
  10. </div>
  11. );
  12. };
  13.  
  14. export default Task;

This component accepts a `task` object, an `onDelete` method, and an `onToggle` method as props. The `task` object has an `id`, `text`, `day`, and `reminder` properties. The `onDelete` and `onToggle` methods are used to delete and toggle the reminder for the task, respectively.

Step 3: Creating the Tasks Component

Now we'll create the Tasks component that will render all our Task components. Create a new file in the `/src` directory called `Tasks.js` and add the following code:

  1. import React from 'react';
  2. import Task from './Task';
  3.  
  4. const Tasks = ({ tasks, onDelete, onToggle }) => {
  5. return (
  6. <div>
  7. {tasks.map((task) => (
  8. <Task key={task.id} task={task} onDelete={onDelete} onToggle={onToggle} />
  9. ))}
  10. </div>
  11. );
  12. };
  13.  
  14. export default Tasks;

The Tasks component receives the tasks array and the onDelete and onToggle methods from the App component and passes them down to each Task component.

Step 4: Implementing Local Storage

Now, let's add functionality to persist our tasks in the local storage. We'll modify the App component to use the `window.localStorage` object:

  1. import { useState, useEffect } from 'react';
  2. import Tasks from './Tasks';
  3.  
  4. function App() {
  5. const [tasks, setTasks] = useState(() => {
  6. const savedTasks = localStorage.getItem('tasks');
  7. if (savedTasks) {
  8. return JSON.parse(savedTasks);
  9. } else {
  10. return [];
  11. }
  12. });
  13.  
  14. // ...
  15.  
  16. useEffect(() => {
  17. localStorage.setItem('tasks', JSON.stringify(tasks));
  18. }, [tasks]);
  19.  
  20. // ...
  21.  
  22. return (
  23. // ...
  24. <Tasks tasks={tasks} onDelete={deleteTask} onToggle={toggleReminder} />
  25. // ...
  26. );
  27. }
  28.  
  29. export default App;

Here we've used the useState and useEffect hooks to retrieve tasks from local storage when the component mounts, and save them whenever the tasks state changes.

Conclusion

And that's it! You've built a simple task tracker app with React and Local Storage. This project gives you a solid foundation for working with React and browser storage, and you can expand upon it by adding more features and refining the user interface.

We use cookies to improve your browsing experience. By continuing to use this website, you consent to our use of cookies. Learn More