Connecting React (with hooks) to Express server

As I worked on my first full stack web app project using express and react, I was quickly prompted with an issue.

How do I get React to “talk” or “connect” to the Express server?😓

This article will explain how I got React to talk to my Express server by an example.

First let me explain what we will be using:

Frontend

• React.js
• React hooks
• React Router

Backend

• Node.js
• Express

Dependencies (not installed from create-react-app)

• react-router-dom

— Frontend —

This project will assume you have used the create-react-app by:

npx create-react-app client
cd client
npm i react-router-dom

We will be cleaning up a few files that’s preinstalled from the create-react-app.

In our Index.js file:

Here we wrap our App component with the BrowserRouter component from react-router-dom. BrowserRouter is used for doing client side routing with URL segments. This will help separate concerns in our app and make the logic/data flow more clear.

In our App.js file:

<Switch> will look through its children <Route>s and will render the first one that matches the current URL. In this case either the home route ‘/’ or ‘/list’.

Now let’s create a new directory and name it pages and we’ll also create 2 files: Home.js and List.js.

We will also be creating a hooks.js file inside the utils directory. This is where the magic will take place. We’ll use the fetch() api to fetch data from our express server at http://localhost:8000/api/getList.

mkdir pages utils
touch pages/Home.js pages/List.js utils/hooks.js

Inside Home.js:

The Home component will contain an h1 and a button wrapped in a <Link>. The <Link> will provide accessibility to the different routes we previously created in the our App component.

Inside List.js:

useFetch() is a custom function used for readability imported from utils/hooks. The List component will only be running useFetch() and handling the [data] inside the return function by mapping each of the items in [data] to an individual <div>.

Inside hooks.js:

This one may be a bit harder to understand if you are not familiar with hooks. Lets go line by line for this one:

Line 1: importing the hooks useState and useEffect

Line 3: creating our useFetch(url) with 1 parameter to pass our URL which will have, http://localhost:8000/api/getList.

Line 5: Sets up our state management for using the useState() hook.

Line 7–12: our asynced function that has our fetch() api. It first fetches to our express server the data then parses the data to json format. After that it sets the json result into our setData variable.

Line 14–16: We use the useEffect() hook to call our function created on line 7. We are also passing an empty array [] as the second argument on line 16. This is because we want to run the effect and clean it up only once (on mount and unmount). This tells React that the effect doesn’t depend on any values from props or state, so it never needs to re-run. Check the docs here for more information.

Line 18: we return our [data]. This places our data into an array so we can handle it correctly in List.js.

Line 22: Will be exporting out our useFetch function.

— Backend —

Inside the root directory, lets first create a new directory and create our express server:

mkdir api
touch server.js

Now lets create a new package.json in this folder and install express

cd api
npm init -y
npm i express

Inside server.js:

Line 6–11 is middleware required for CORS and will be needed in order to access GET methods inside the express server.

Line 14–18 will be where our endpoint that our frontend will be accessing.

Running the program

Inside the client folder lets run:

npm start 

Inside our api folder lets run:

node server.js

Now lets navigate to localhost:3000 in our browser (or it should have opened already)

localhost:3000

And after clicking on the My List button we should get

3 Item list from server

Our 3 items from the express server! 🥳

Thank you for reading all the way through! 😊Leave some comments below for any constructive feedback! 👍🏽