Note App - Part 2: The React Site
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.
- The Node API from the previous post must be up and running
- Setup the project following my guide
- A basic understanding of React hooks
After you're done setting up React with Parcel, we'll be needing some additional dependencies.
axiosis used to make requests for the API
formikis used to make creating the new notes easier buy handling the forms
react-iconswill be need for an icon for the delete note button
sasswill be needed to compile the
.scssfile 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
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.
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
"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
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
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
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
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
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
src with the following code.
Then import that in
Running the app
Let's start the app by running the command
When you visit
http://localhost:1234/ you should see
After you create the note, it should look like this