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.
— Frontend —
This project will assume you have used the create-react-app by:
npx create-react-app 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
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.
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>.
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:
Now lets create a new package.json in this folder and install express
npm init -y
npm i express
Line 14–18 will be where our endpoint that our frontend will be accessing.
Running the program
Inside the client folder lets run:
Inside our api folder lets run:
Now lets navigate to localhost:3000 in our browser (or it should have opened already)
And after clicking on the My List button we should get
Our 3 items from the express server! 🥳
Thank you for reading all the way through! 😊Leave some comments below for any constructive feedback! 👍🏽