Build RESTful API with React and Loopback (Part 2)

Hi guys! we have created a back end with loopback in the previous post. If you have missed it here is the post. So now we are going to create the front end of our Car web application.

1 Step — Create a New Folder

We have to create a new folder for front end. So im going to create a new folder as “car_src”.

After creating a new folder we are going to create new React project inside the folder.

Open VS code and open the folder we have created. After that we are going to install reactjs.

Open the terminal and type the following command.

npm install -g create-react-app

After that to create a react app type the following command in the terminal.

create-react-app .

we are using the “ . “ in here to say that i want to create the react app with in this folder.

After the react project is created you can start it by the following command

npm start

After that your browser will open and show you a page like this.

In here the localhost starts in port 3000 same as our back end port. In this case we have to change the port. Go to pakage.json file in your react project and open it. Under the script in the start line, add this line to it “SET PORT = 3001 &&”before the react-scripts start. This will change the starting port of the react project to 3001. So the back end and the react project can run simultaneously. package.json file will look like this after adding it.

After that inside the src folder you will see indec.css and logo.svg. Delete both of them because we dont need them right now.Go to index.js and in the imports remove the index.css import and go to App.js, delete the code in it and add the following code.

In the above code the reason we arent using “extend component” because the App.js arent using any components, it only show markup. When you run npm start now it will show like this

Step 2 — Setting up Route

We use route in react to navigate. Now we are going to set up the route in this project. We have to install route first. Go to the terminal and type the following command.

npm install — save react-router react-router-dom

Now create a folder in the side the src folder as components. In here we are going to put all the components of the project. In side the components folder make these files Main.js , About.js and Home.js.

Home.js will look like this

About.js will look like this

And we will be using Main.js for routing. We have to import Switch and router to Main.js.

Also we have to import About and Home to Main.js to do the routing.

Now go to index.js and add BrowserRouter like below

Now we are going to change the App.js again like below importing the Main.js to it.

Now lets see if the routers are working. Run the project and in the URL bar type localhost:3001/about

This will redirect you to about page and the text about will be displayed.

3 Step — Designing the UI

In this will be designing the UI of the project.Ill put the each file code below so we can focus on the CURD functions more. I have used Material Design you can get it from here. And a new Component is added as Nav.js. I used it to make the navigation bar.

App.js :

Nav.js :

you will have an interface like this

3 Step — Fetching data

We have to install axios to fetch data. So lets install axios.

npm install axios — save

We are going to add this code to the Home.js

In the above code we make an array as cars in the state. From the axios we call the get method.

“http://localhost:3000/api/cars" is the place where we send the get request. It will call the loopbacks GET method and sends the data in the mongodb.

Under the render() im creating a variable as carItems and im mapping car item to it.

Inside the <li> tag im calling the car’s name property.

When running the project you have to first start the back end from node . in that particular loopback project terminal and npm start in the react project which we are doing now. Then you will see data have been fetch to the UI.

Now we are going to get the other details of the each item when you click on the car name you will see the details of the car. So to make that we have to make a car item component and a car details component. We are using car item because now we just show the car item as a text. Im going to make it as a object then we can pass the object id and the get the relevant data from the back end.

Below are the CarItem.js, CarDetails.js, Home.js and the Main.js after editing.

Home.js

CarItem.js

CarDetail.js
In the Cardetails.js i have used the axio.get to get the data from the back end according to a specific ID. In “http://localhost:3000/api/cars/${carId}" the carId is the unique key i used to call the specific car type. The onDelete() method is used to delete the car item from the database. To do that simply call the axio.delete and the URL to the loopback.

Main.js

Now when you run the project. You will see like this

For now we have done viewing the data from the back end and deleting them. Now we are going to do the last CURD function that is Edit the data. Im going to make a new file called EditCar.js.
In the EditCar.js i used axios.get to get the data according to the ID of the item and display it on input fields so the user know which data they are going to edit. In the editMeetup function it will use the PUT method to alter the entered data according to details we entered in the input fields.

EditCar.js

I have add a new route to Main.js. EditCar component is added to the router

Main.js

Now hit the npm start and see you will see when you press the edit button it will take you to a new view and let you to edit and save details of the items.

Congrats🎉🎉 You have now created a RESTful API with an UI and CURD functions.

If you want the project here is the GIT link

Car_src (The Front end of the project) — https://github.com/Atix28/Car_src

Car_api (The back end of the project) -https://github.com/Atix28/Car_api

See you later guys 😄😄

Happy coding💻