Building a Notes App with React and LocalStorage

In this tutorial, we’ll create a simple notes app using React and LocalStorage. Our app will allow users to create new notes, save them, and delete existing ones.

Getting Started

First, let’s create a new React app from scratch. Run the following commands in your terminal:
bash
npx create-react-app notes-app
cd notes-app

Next, delete all content from the App.js file and add the following code:
“`jsx
import React from ‘react’;

function App() {
return

;
}

export default App;
“`
File Structure

Since our app will have multiple components, let’s create a clear file structure. Create the following folders inside the src folder:

• Components
• css
• img

Inside the Components folder, create three more folders:

• NoteComponents
• Header
• Footer

The Notes Grid

In the App.css file, add the following code to style the page and create a responsive grid for our notes:
“`css
.app {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

.note {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
“`
Adding the Title

Create a new file called Header.js inside the NoteComponents folder and add the following code:
“`jsx
import React from ‘react’;

function Header() {
return

Notes App

;
}

export default Header;
“`
Creating the Note

Create a new file called Note.js inside the NoteComponents folder and add the following code:
“`jsx
import React from ‘react’;

function Note({ text, onDelete }) {
return (

);
}

export default Note;
“`
Adding Styling

Create a new CSS file called Note.css and add the following code to style the note component:
“`css
.note {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.note button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}

.note button:hover {
background-color: #3e8e41;
}
“`
Creating the Notes Container

Create a new file called Notes.js inside the NoteComponents folder and add the following code:
“`jsx
import React, { useState } from ‘react’;
import Note from ‘./Note’;

function Notes() {
const [notes, setNotes] = useState([]);
const [inputText, setInputText] = useState(”);

const handleAddNote = () => {
const newNote = { text: inputText, id: Date.now() };
setNotes([…notes, newNote]);
setInputText(”);
};

const handleDeleteNote = (id) => {
const filteredNotes = notes.filter((note) => note.id !== id);
setNotes(filteredNotes);
};

return (

);
}

export default Notes;
“`
Saving Notes to LocalStorage

To save the notes to LocalStorage, we’ll use the useEffect hook. Add the following code to the Notes.js file:
“`jsx
import { useEffect } from ‘react’;

// …

useEffect(() => {
const storedNotes = localStorage.getItem(‘notes’);
if (storedNotes) {
setNotes(JSON.parse(storedNotes));
}
}, []);

useEffect(() => {
localStorage.setItem(‘notes’, JSON.stringify(notes));
}, [notes]);
“`
That’s it! You now have a fully functional notes app that saves notes to LocalStorage. You can find the complete code on CodeSandbox.