How to Create a Basic Notes App using ReactJS ?

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:

• HTML
• CSS
• JavaScript
• ReactJs

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.

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

npm start

Output: