Connecting Your React App to Back-end |Part-01| React JS and Express | MyChronicles007
Hello everybody. Hope you are doing good. If you have started creating apps with React, you might feel the need to connect your application to a back-end service.Without connecting your React app to any back-end, you might find the limitations in expanding your application’s scope, and your application looks minimal. With Back-end, your application gets all of its requirements solved, CRUD operations, powering your app with lot more features and thus moving your application towards completion.
In this article, I would focus on Express for Back-end and the examples focus on how to connect your React app to Express, but only the basics. Advanced concepts are to be covered in the next article.
Pre-requisite:
I assume you know the basics of React and that’s more than enough to understand the logic here.
How React communicates to Back-end?
As how we have JDBC (Java DataBase Connectivity) for Java, we have to create our APIs to connect our React app to the back-end. As React is a Front-end JavaScript library, you cannot connect your DB client to it and do DB manipulations. Connecting to your DB Client and querying the DB can happen only in the back-end. So, the process of communicating with the back-end follows the below procedure:
1.Create API end points with Express, define functions to handle the requests and respond with a resource (Back-end).
2.Make a Request to the API end point from React (Front-end).
3.Handle the Response in React and use them in your app (Front-end).
Creating API end points with Express | Node.js
In order to start with your back-end development, you need to install three packages — express, body-parser, cors.
- express - to create APIs for your application
- body-parser - to parse the request body (in which user might send data), as data sent through the request may not be safe to handle as such
- cors - CORS Stands for Cross-Origin-Resource-Sharing. When you are making a cross-domain request, that is communicating between two different servers, you might end up getting CORS error. You need to enable cors in your Express code, making cross-domain requests open.
Installing the packages:
npm install express — save
npm install body-parser — save
npm install cors--save
Let’s get into coding the real stuff.
By convention, let’s name our back-end server file as server.js and start loading the required packages:
After loading required packages, we need to define our express app and use body-parser and cors.
Once we are done with loading the packages and defining our express app, we can create our first API. An API end-point is nothing but your API route, which looks like http://localhost:5500/users or http://domain.com/api/users.
Let’s look at a sample GET API:
app.get()- to create GET APIs.
Any API has two parts - route, call-back-function.
route is the API route to which apps make a HTTP request. In our case, it is ‘/api/message’.
call-back-function is the function that gets executed when user makes a request to the specified route. This call-back function gets two parameters — request and response, where request — denotes the HTTP request, response- the object with which you respond back to the request. In our case, the call back function replies with a string value — ‘This is the welcome message’.
That’s it with our API creation. Now, let’s start the server. You need to specify the port number in which you want the back-end server to be running.
The above snippet starts the server in the specified port number- 3001 in our case. This listen function takes two parameters- port-number, call-back-function.
port-number : where the server should run.
call-back-function: Function that gets executed when the server is started.
Starting the Back-end server
Now, everything is done, save your file, open a cmd or terminal in the directory where you created your server.js file and start your server:
node server.js or node <yourfilename>
Once your server is started successfully, you’ll get your call back function executed and here it displays ‘listening on 3001’.
Let’s learn how to make request to this API and get the response message.
Make a Request and Handle the Response
To make a request to an API end point, we will use ‘axios’ to do that.
Axios is a HTTP Client for browsers, with which you can make HTTP requests from the browser.
In your command prompt or terminal:
npm install axios --save
‘--save’ option will add axios entry in your package.json file.Importing axios:
import axios from ‘axios’;
Now, let’s make the request. In the below example, I am making the HTTP request inside a function and writing the response to the console. We will call this function inside componentDidMount(), so that our component makes the HTTP call once it is mounted.
Thus, we made a HTTP request to the API we just created and we are writing the response data to the console. Let’s have a look at the console in our browser.
In the console, we have the response recorded, where we get our response message in the data property of the response object. In real-world apps, you ll be reading the response data, store it in your state variables and use it in your application.
Thus, we created an API, made a request to it, handled the response. This sums up to connecting React to back-end. But, this is not the end. In real-world applications, you’ll have to send data to the back-end in your HTTP requests, retrieve data from the request in your back-end code, connect your back-end to a database and real cool stuff. In this article, I decided to just explain the way to connect Front-end and Back-end.
If you want to learn in-depth about express, axios or cors, visit their official documentation. It gives you a very detailed understanding about them.
In the next article, sending data to the back-end, retrieving data from the request, and sending tokens in the request header will be explained in detailed.
Stay Tuned..!!
— Lesley.