Building a Simple React Notes App: A Beginner’s Guide

Written by

FixTechToday

in

In today’s fast-paced world, staying organized is more crucial than ever. From jotting down grocery lists to capturing brilliant ideas, a reliable note-taking application is an indispensable tool. While numerous note-taking apps exist, building your own using React JS provides a fantastic learning opportunity. This project is ideal for beginners and intermediate developers alike, offering hands-on experience with fundamental React concepts and a practical application of those skills. In this guide, we’ll walk through the process of creating a simple yet functional notes app from scratch.

Why Build a Notes App in React?

React, a JavaScript library for building user interfaces, is known for its component-based architecture and efficient updates. Building a notes app in React allows you to:

  • Learn Core React Concepts: You’ll gain practical experience with components, state management, event handling, and rendering.
  • Enhance Your Frontend Skills: This project solidifies your understanding of how to structure and manage data within a web application.
  • Create a Portfolio Piece: A functional notes app is a great addition to your portfolio, showcasing your ability to build interactive web applications.
  • Customize to Your Needs: You can tailor the app to your specific requirements, adding features like categories, search, or rich text formatting.

Project Overview: What We’ll Build

Our simple React notes app will have the following features:

  • Note Input: A text area where users can enter their notes.
  • Add Note Button: A button to save the note.
  • Note Display: A list of all saved notes.
  • Delete Note Functionality: Ability to remove individual notes.

This project focuses on the core functionality, providing a solid foundation for more advanced features you can add later.

Step-by-Step Guide: Building the React Notes App

Step 1: Setting Up the Development Environment

Before we begin, ensure you have the following installed:

  • Node.js and npm (Node Package Manager): These are essential for managing JavaScript packages and running React applications. You can download them from nodejs.org.
  • A Code Editor: Choose your preferred code editor (e.g., Visual Studio Code, Sublime Text, Atom).

Once you have these installed, we’ll use Create React App to set up our project. Open your terminal or command prompt and run the following command:

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

This command creates a new React project named “react-notes-app” and navigates you into the project directory. Next, start the development server:

npm start

This will open your app in your default web browser, usually at http://localhost:3000. You’ll see the default React app’s welcome screen.

Step 2: Project Structure and File Setup

Let’s take a look at the basic project structure created by Create React App. Inside the “src” folder, you’ll find the core files:

  • App.js: This is the main component where we’ll build our notes app.
  • App.css: Styles for our application.
  • index.js: The entry point of our application.
  • index.css: Global styles.

For this project, we’ll primarily work within the `App.js` and `App.css` files. Let’s start by cleaning up `App.js`. Open `App.js` and replace the default content with the following:

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

function App() {
  const [notes, setNotes] = useState([]);
  const [newNote, setNewNote] = useState('');

  const handleNoteChange = (event) => {
    setNewNote(event.target.value);
  };

  const addNote = () => {
    if (newNote.trim() !== '') {
      setNotes([...notes, newNote]);
      setNewNote('');
    }
  };

  const deleteNote = (index) => {
    const updatedNotes = [...notes];
    updatedNotes.splice(index, 1);
    setNotes(updatedNotes);
  };

  return (
    <div className="app-container">
      <h2>React Notes App</h2>
      <div className="note-input-container">
        <textarea
          placeholder="Write your note here..."
          value={newNote}
          onChange={handleNoteChange}
        ></textarea>
        <button onClick={addNote}>Add Note</button>
      </div>
      <div className="note-list-container">
        <ul>
          {notes.map((note, index) => (
            <li key={index}>
              {note}
              <button onClick={() => deleteNote(index)}>Delete</button>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

This code sets up the basic structure of our app, including state variables for notes and the new note input. It also defines event handlers for input changes and adding notes.

Step 3: Implementing the Note Input

Let’s break down the code in `App.js` to understand how the note input works.

State Variables:

const [notes, setNotes] = useState([]);
const [newNote, setNewNote] = useState('');

Here, we use the `useState` hook to manage the app’s state. `notes` is an array that holds our saved notes, and `newNote` stores the text currently being typed in the input field. `setNotes` and `setNewNote` are functions that update the respective state variables.

Event Handler for Input Changes:

const handleNoteChange = (event) => {
  setNewNote(event.target.value);
};

This function is triggered whenever the text in the `textarea` changes. It updates the `newNote` state with the current value of the input field.

Adding a Note:

const addNote = () => {
  if (newNote.trim() !== '') {
    setNotes([...notes, newNote]);
    setNewNote('');
  }
};

This function is called when the

More posts