How to Create a Basic Notes App using ReactJS ?

Namachila October 14, 2025

0 1 3 minutes read

In this article, we are going to learn how to create a basic notes app using ReactJS. A notes app is a digital application that allows users to create, manage, and store textual notes for personal organization and reference.

Here is a demonstration of the making of a basic notes app using ReactJs. It will look like this:

Prerequisites:

Project Setup:

Step 1: Create a new React app

npx create-react-app notes-app

Step 2: Change your directory and enter your main folder notes-app as :

cd notes-app

Step 3: Start editting app.js file

Step 4: Check Dependenncies/ package.json:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Project structure:

Approach:

First start creating a basic notes app layout with dummy text, divs, buttons, input, and heading tags along with well-defined classes and id.
Use classes and id to style the components using CSS and create a dummy notes app structure as shown in the introduction.
In react, we use hooks like useState to store the data items and also handle the inputs.
Create a dummy data array of objects having key, title, and description fields.
Define a handle function to get the input data and store it using useState hook. Also, define a remove function that accepts the key of the item which is to be removed.
Use the onClick event listener to call the adding or removing functions and update the notes array.

Example: In this example, we are using the above-explained approach.

Javascript

// App.js 
  
import "./App.css"; 
import { useState } from "react"; 
  
function App() { 
    const [title, setTitle] = useState(""); 
    const [des, setDes] = useState(""); 
    const [notes, setNotes] = useState(data); 
    const [count, setCount] = useState(4); 
  
    function remove(id) { 
        setNotes(notes.filter((e) => e.key !== id)); 
    } 
  
    function handle() { 
        if (!title || !des) { 
            window.alert("Incomplete input"); 
            return; 
        } 
        setNotes([ 
            ...notes, 
            { key: count, title: title, des: des }, 
        ]); 
        setCount(count + 1); 
        setTitle(""); 
        setDes(""); 
        console.log(notes); 
    } 
  
    return ( 
        <div className="App"> 
            <div className="card"> 
                <div className="head"> 
                    <h1>React notes</h1> 
                </div> 
                <div className="notes"> 
                    {notes.map((e) => ( 
                        <div className="notes-item"> 
                            <div style={{ width: "90%" }}> 
                                <h4>Title: {e.title}</h4> 
                                <p>Note: {e.des}</p> 
                            </div> 
                            <button 
                                type="input"
                                style={{ 
                                    fontSize: "20px", 
                                    width: "8%", 
                                    height: "35px", 
                                    padding: "0 2% 0 2%", 
                                    color: "black", 
                                }} 
                                onClick={() => 
                                    remove(e.key) 
                                }> 
                                X 
                            </button> 
                        </div> 
                    ))} 
                    <div className="add"> 
                        <h3>Add Notes</h3> 
                        <input 
                            type="text"
                            id="title"
                            placeHolder="Add title"
                            value={title} 
                            onChange={(e) => 
                                setTitle(e.target.value) 
                            }> 
  
                        </input> 
                        <input 
                            type="text"
                            id="description"
                            placeholder="Notes"
                            value={des} 
                            onChange={(e) => { 
                                setDes(e.target.value); 
                            }}> 
  
                        </input> 
                        <button 
                            type="submit"
                            onClick={handle}> 
                            Submit 
                        </button> 
                    </div> 
                </div> 
            </div> 
        </div> 
    ); 
} 
  
// Dummy data 
const data = [ 
    { 
        key: 0, 
        title: "Html", 
        des: "HyperText MarkUp Language", 
    }, 
    { key: 1, title: "CSS", des: "StyleSheet" }, 
    { 
        key: 2, 
        title: "JavaScript", 
        des: "Scripting language for web", 
    }, 
    { 
        key: 3, 
        title: "React", 
        des: "JavaScript framework", 
    }, 
]; 
  
export default App;

CSS

/* App.css*/
  
.App { 
    text-align: center; 
} 
  
/* Styling universal selector */
* { 
    /* margin-top: 50px; */
    margin: 0; 
    margin-top: 10px; 
  
    padding: 0; 
    box-sizing: border-box; 
} 
  
/* Style body element */
body { 
    min-height: 50vh; 
    display: flex; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    background: hsl(0, 0%, 100%); 
    font-family: "Poppins", sans-serif; 
} 
  
/* Styling card container */
.card { 
    /* min-height: 50vh; */
    height: fit-content; 
    min-width: 33rem; 
    max-width: 40rem; 
    background: rgba(147, 208, 119, 1); 
    margin: 0 1rem; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); 
    width: 100%; 
} 
  
.head { 
    position: relative; 
    max-height: fit-content; 
    min-width: 33rem; 
    width: 100%; 
    background: rgb(109, 157, 87); 
  
    padding: 1rem; 
} 
  
  
/* Input box and button */
.add { 
    padding: 5%; 
    text-align: left; 
    padding-left: 6%; 
    /* margin: 10%; */
} 
  
input { 
    margin-right: 1%; 
} 
  
#title { 
    width: 20%; 
    font-size: larger; 
} 
  
#description { 
    font-size: large; 
    width: 60%; 
} 
  
button { 
    border-radius: 5px; 
    padding: 5px; 
    font-size: large; 
    color: #dbeefa; 
    background-color: rgb(109, 157, 87); 
} 
  
/* style accordion */
.notes { 
    margin: 5%; 
    text-align: left; 
} 
  
/* style for accordion items */
.notes-item { 
    display: flex; 
    z-index: 100; 
    padding: 2%; 
    /* border-bottom: 1px solid #4e7b48; */
    font-size: larger; 
    margin: 2%; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
} 
  
/* style for accordion items */
.accordion-item { 
    border-bottom: 1px solid #ddd; 
    font-size: larger; 
}

Step 5: Run the following command and the output will be visible at http://localhost:3000/

npm start

Output:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!