Skip to content

Akhila Ariyachandra

Note App - Part 2: The React Site

React, JavaScript, Note App2 min read

tl;dr - Clone and run the source code.

In the 2nd part of this series we're going to create a site with React to use with our Node API to create and view Notes. In the previous post we created the API for the app.

Prerequisites

  • The Node API from the previous post must be up and running
  • Setup the project following my guide
  • A basic understanding of React hooks

Setup

First we need to setup the React project with a bundler. The bundler we're going to be using is Parcel, as it requires very little setup. Follow my guide to get started.

After you're done setting up React with Parcel, we'll be needing some additional dependencies.

  • axios is used to make requests for the API
  • formik is used to make creating the new notes easier buy handling the forms
  • react-icons will be need for an icon for the delete note button
  • sass will be needed to compile the .scss file we'll be using to style the app

Let's create an instance of axios so that we don't have to enter the base URL for all network requests. In the src folder create another folder services and in that folder create the api.js file and add the following code.

We'll also need to change the font and title of the app. In index.html add the link to the Rubik font files and a new title. Add these between <head> and </head>.

Notes App

Now we can start working with the React part.

First first we need to figure out how we're going to store the notes list. We could use useState to store the list, but we'll use useReducer to simplify and bundle up all the different ways of updating the list.

In src/App.js change the React import to

Then let's declare the initial state and reducer

Initially we going to hold an empty array in the state. The reducer will have three actions, "refresh" to get the list of notes when the app loads, "add" to add a new note to the list, and "remove" to delete a note. In the case of "add" and "remove" we could just refresh the whole list after doing them but that would be unnecessary and a waste of a network call.

To add the state to App

Next we need to load the list of notes when the app loads. We can do with the useEffect hook. We'll need to import useEffect and the axios instance we created earlier.

Add the following code before the return in App.

All we're doing here is fetching the notes list as soon as the component mounts and updating the state using the reducer with "refresh". The second parameter of [] in useEffect prevents this effect from running multiple times.

Now that we're loading the notes we need to display them. In return, add the following

We have no notes to load to load at the moment so let's add a footer to the page where we can create new notes.

First we need to import formik which going to make handling the forms much easier.

Then let's add the UI and logic to create new note. Add this just after the <main> tag.

formik will handle all the values in the form including the validation and submitting to create the note.

Finally we need to be able to delete created notes, so we'll add a delete button to each note. First we need to add the delete function before the return.

We'll need an icon for the delete note, so we'll import one from react-icons. Then change the note component.

As the final part of the app let's add some styling. Create App.scss in src with the following code.

Then import that in App.js.

Running the app

Let's start the app by running the command

When you visit http://localhost:1234/ you should see

First Preview

After you create the note, it should look like this

Second Preview