react rest api

Creating a REST API with React: A Step-by-Step Guide

Introduction:

As a front-end developer, you may frequently interact with REST APIs to retrieve data for your applications. In this tutorial, we will go through the process of using REST APIs in a React application. We will cover everything from setting up a new React project, to making HTTP requests and handling the response. By the end of this tutorial, you should have a solid understanding of how to work with REST APIs in your React projects.

I’ve created this tutorial based on popular demand. This tutorial is the second part of this article. So before proceeding further with this one, please ensure that you’ve completed Part 1 so that we are on the same page!

Before we can start working with REST APIs in our React application, we need to set up a new React project. There are a few different ways to do this, but the easiest method is to use the create-react-app tool. To set up a new React project using create-react-app, you need to have Node.js and npm (the Node.js package manager) installed on your machine.

Setting Up a New React Project:

In this tutorial, we will spin around the frontend to our ‘Restaurant-Menu’ app using the very famous ReactJS library and will use MongoDB as the database. We will keep it simple by making a GET request to the API we created in Part 1 and displaying the food items on the browser.

The final web-app will look like this:

Are you excited? Well, I am!

iEyJze1p4AbkDf1y02WnaEDZEXal5h9qEg5m
Source: https://giphy.com/

First things first… Setting Up The Dev Environment

I’m assuming you’ve already set up the dev environment as described in Part 1. Also, this article assumes basic knowledge of React terminology and ES2015 syntax.

  1. Install React

If you’re stuck anywhere, here is a really nice tutorial to get started with.

2. Install a text editor

In Part 1, we did not write any code, so there was no “real” need to use a text editor. In this part, we will be writing a lot of code. So, you can use your favorite text editor or my favourite text editor.

Download Visual Studio Code – Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform – Linux, macOS, and Windows. Download Visual Studio…code.visualstudio.com

3. Robomongo

This is optional. If you wish to have a graphical interface to your MongoDB database, then Robomongo is an essential tool. I personally love it.

Robo 3T – formerly Robomongo – native MongoDB management tool (Admin UI)
The Robo 3T (formerly Robomongo) tool has been acquired by 3T Software Labs, the creators of the MongoDB client Studio…robomongo.org

A little tweak in the Loopback server file:

By default, the loopback API explorer is served on port 3000, and coincidentally, React also serves on port 3000 by default. Both of these ports MUST be different. So, I’ll transfer loopback API explorer to port 8080.

So open config.json and make the following changes:

This will ensure that React and Loopback API Explorers do not clash.

Step 1: Populate your database with some dishes

The data we feed into our database will show up in our React web-app when we make a GET request.

There are different ways to populate the data. The most appropriate one would be to use the API Explorer.

So point your web browser to http://localhost:8080/explorer and make a POST request. This time, I changed the model schema and added ‘picture’ as well so that we have a nice looking app.

This is what my schema looks like:

I made 4 entries here:

You can make however many entries with whatever dishes!

So after making the entries, you can view these on Robomongo.

vYaxueDDNlnAfKH4dNTj7qpMZ35YeWtNy0XV

Step 2: Create a React App

Let’s use create-react-app to create our React web-app.

I named my app restaurant-app.

Then, cd restaurant-app.

Then run the react app by npm start. This will start the web-app on localhost:3000.

You should see this:

o0KOcdopwtJlhL5w6hopbvCONxFaaTtcq5KT

Step 3: Delete all files in the src folder

In the React boilerplate code, delete the files in src folder. We’d be writing the code from scratch.

Step 4: Add in CSS library to reduce some design headaches…

In this project, I am using Semantic UI. You are free to use whichever library you want to.

In the folder of our React project, open index.html file and add a link tag anywhere in the <head>. So let’s add Semantic UI CDN.

Step 5: Create Index.js and App.js

Create a new file in src folder named index.js.

Create a folder named Components in the src folder. Create a file named App.js in Components.

K3SuwqWjHxpyHWIAs690xU32Xu9c4s-lD2SB
Directory structure

Contents of App.js:

Contents of Index.js:

Now if you point your browser to localhost:3000, you should see App Component written on the screen.

Step 6: Install Axios to make API calls

Fire up your terminal and install Axios.

Step 7: Make API calls

We need to make changes to App.js.

This will only display name, price, and picture of the first entry. To make things easier, we will create a new component name FoodItem to reduce code in App.js.

d8f0GCZlcNtt11tCw3GzsZSUSivvIc6-i4ez

Step 8: Create a FoodItem component to render other dishes

In Components folder, create a file named FoodItem.js.

Contents of FoodItem.js:

The concept of props is used here.

Modify App.js :

The final result should look like this:

nR3G948HMYj2Cq23Ydd6hyyFHdO4gJXXmS3f

Wrapping up

In this tutorial, we only focused on GET method. We can even POST more dishes from this console and do a lot more things.

This is all for now!

I hope you made it till the end. If you liked it, please appreciate it by applauding. Thanks a lot! 

Leave a Comment

Your email address will not be published. Required fields are marked *