Creating a Beginner-Friendly Modern Notes App with React and Vite

In this tutorial, we will be building a modern notes app using React and Vite. Vite is a build tool that focuses on speed and performance, making it the perfect choice for our project. We will be creating a simple app where users can add and delete notes.

Step 1: Setting up your project
To get started, make sure you have Node.js installed on your machine. You can download it from https://nodejs.org/. Once you have Node.js installed, you can create a new project using the following command:

npx create-react-app notes-app
cd notes-app

Next, we will install Vite using the following command:

npm install -g create-vite # Install Vite globally
create-vite notes-app # Create a Vite project
cd notes-app # Navigate into your project directory

Step 2: Creating our components
Now that our project is set up, we can start creating our components. We will create a Notes component that will handle the display of our notes. Create a new file called Notes.js and add the following code:

import React from 'react';

const Notes = ({ notes, deleteNote }) => {
    return (
        <div>
            {notes.map(note => (
                <div key={note.id}>
                    <p>{note.text}</p>
                    <button onClick={() => deleteNote(note.id)}>Delete</button>
                </div>
            ))}
        </div>
    );
};

export default Notes;

Step 3: Creating our App component
Next, we will create our App component that will handle the state of our notes. Create a new file called App.js and add the following code:

import React, { useState } from 'react';
import Notes from './Notes';

const App = () => {
    const [notes, setNotes] = useState([]);

    const addNote = () => {
        const newNote = {
            id: notes.length + 1,
            text: 'New Note',
        };

        setNotes([...notes, newNote]);
    };

    const deleteNote = (id) => {
        const updatedNotes = notes.filter(note => note.id !== id);

        setNotes(updatedNotes);
    };

    return (
        <div>
            <h1>Notes App</h1>
            <button onClick={addNote}>Add Note</button>
            <Notes notes={notes} deleteNote={deleteNote} />
        </div>
    );
};

export default App;

Step 4: Rendering our App
Now that we have our components set up, we can render our App component in the index.js file. Replace the contents of index.js with the following code:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

Step 5: Running our app
Finally, we can run our app by running the following command in the terminal:

npm start

This will start a development server at http://localhost:3000 where you can view your notes app. You can add and delete notes and see the changes reflected in real time.

That’s it! You have successfully built a modern notes app using React and Vite. Feel free to customize the app further by adding more features and styling. Happy coding!