👨‍💻 FullStack simple tutorial to fetch data and display it
Tags: javascript, tutorial, react, webdev
Published: 2022-05-20 18:42:24

Hi guys! How are you? I wanted to do a post about **how to create a frontend and fetch data from a backend made it with node js and express**. 

When I started as a web developer I didn’t understand how that works. **I was really lost**. I knew that something called the “back-end” was connected with the front-end to give him data, but I didn’t know how it worked. 

After a lot of hours invested in learning, I finally understand that now. But, I know that there are a lot of people struggling with that, so I decided to make this simple tutorial.

# Making the front-end

Okay, if you are a front-end dev, I think you know how to do this, but, to make this tutorial more complete, I’m going to start with it. 

To start just use create-react-app.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dudy6ctj3dsmkajlkgq8.png)

We delete everything on the App.js file and we add this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0or2bjjs0ujbjkuquxx0.png)

We start the app with 

```jsx
npm start
```

And on the [localhost:3000](http://localhost:3000) we are going to have this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o30smbk26w6560zzaj1h.png)

Ok, we are going to let here the front-end and we are going to continue with the back-end. 

## Back-end with node js and Express

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9mzlzmjgf06vrj2atvh.png)
I’m going to explain to you what I did. 

On the first line, I just go back to the main project folder. Then I list the folders inside of it. As you can see the only folder there it’s “fetch-data-example”, which is the front-end folder. 
Then I create a **new directory** called “back-end”. 
After that, I move into that folder and I run “**npm init -y**” to create the package.json file. 
Then I create an **“app.js” file**. 
And finally, I use “code .” to open **Visual Studio Code** and start coding. 

Before we start, we need to install some libraries.

We are going to install **express** which is a **framework** for node js designed to build APIs and Web Apps. 

We install it

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4kd8zjyrd1ycpimslge.png)
And we are going to install nodemon as a dev dependency (-D). Nodemon will watch the application and restart the server when we make some changes to the files. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7eroj63uyk67d9v86s7.png)

We are going to add a script to the package JSON to start our app on dev mode. 
Also, I going to add the “type” property to use “ES modules”.
And this will be our package.json.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxnpp6mr3zcmsq7v60g5.png)

Now we are going to open the app.js file and we are going to add some things. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5644jpe59no0pp5gatz.png)

And our console will display

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyvx10f1zo4ywrpfiapc.png)

I know, that seems a lot but let me explain it. 
First of all, we created a “Server” class. We use the constructor to use the express library and use the class methods. Then we define those methods. 

The last method starts the server on port 3001 and displays the message in the console. 

In the second one, we can add routes. In this example, I just going to add only one route (”/”) to keep it simple. 

The routes refer to how an application’s endpoints (URIs) respond to client requests. 
In this example, **our only route is “/”** and uses the **“GET” method**. There are a lot of methods like POST, PUT, DELETE, etc (you can see the [Express Documentation](https://expressjs.com/en/4x/api.html#app.METHOD) for more information). 

The get method receives 2 main properties. The **“path” or URI** (in this case it’s “/”) and a callback function. This callback function also receives 2 arguments, the “Request” (req) and the “Response” (res).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvosbakledmvhomlm5tt.png)

The **Request** **has all the information from who sent the request petition** (the front-end). The **Response’s the way to respond with data to who sent the request petition**. In this example, we send to the front-end a **JSON with some information**. What we send it’s an object with a property of “users” who has an array of users. 

So, if we look at [localhost:3001](http://localhost:3001) we can see this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjt4qx8ry86ycq6uptd8.png)

Congrats!🎉 We have our back-end working, but you still need to know the last concept: **the middleware**.

If you remember, we have 2 middlewares on our **“middleware” method**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80a98q6gxxa0rdhn1fx8.png)

So, what’s middleware? A middleware is **just a function that’s executed before the routes**. It has 3 arguments: **Request, Response, and next**.  
The first 2 are the same as those of the routes. The new one is “next”. **Next is a function whose work it’s to pass to the next middleware or**, if there is no one else, **finally to the route**. If we use middlewares and we don’t use the “next” function, the app will be blocked and **won't return anything**. 

In this example, I write a simple middleware that just made a console log, so every time that we made a request to the server, on the console we will see this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixa08cyii1jbtsp00k3i.png)

So, congrats! You have your first back-end app made it with node js and express.

# Front-end part 2

Now that we have our API ready and working on port 3001 and our front-end ready on port 3000 we can start. 

On the App.js file, we are going to import useState and useEffect from react.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78ris9wg9me6qqmmkhsp.png)

Then we will use “useEffect” and fetch to fetch the data from our API

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/himnn9h466togcqauzjv.png)

Every time that the page load is going to trigger the “getData” function who is an async function. This function it’s going to fetch the data, parse it and show it with a console.log. 

But WAIT!, **we don’t receive any data, we have an error.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea8357wgzzvhdq0resm4.png)

That happened because we forgot to add the cors into the back-end. CORS is an internet protocol. 

You can learn more about CORS [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).

## We have to come back to the back-end

Do you remember the middlewares? Well, we have to add one more: the CORS. 
Luckily for us, we have a [node js library](https://expressjs.com/en/resources/middleware/cors.html) for that.

In our back-end project, we install this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kmhi1pkgfsk61klpxash.png)

And now our back-end will look like 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l7oe8qn7mnm1582rrekc.png)

## Front-end again

Now if we look at the console of our front-end project

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngzwyflr2nb5vpr144jd.png)

**We finally connect our back-end with our front-end!** 🎉

Now we have to display the users on the front-end.
To do that we are going to use “useState”

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbr7q4t6v48zovmuckzo.png)

And now we display the data

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uoydvfqjt1ljlbl3uct9.png)

Our App.js component will be like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohgc1lmt2mhx1n6lhe9b.png)

And our web
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lryy19dm9ro5t6m08pl5.png)

**We did it! 🎉💪🎉**

That’s it friends! I hope it helps you! 

I leave here the [front-end repository](https://github.com/NicolasBiondini/front-end-tutorial) and the [back-end repository](https://github.com/NicolasBiondini/back-end-tutorial). 

Thank you so much for reading this post.

Let me know in the comment section if you want to see a tutorial with a DB and **deploy this app with docker, docker-compose, and AWS**.