Developing React Apps by Consuming APIs

In the previous part, I talked about developing the backend with a GUI, you can serve your database as an API. Few benefits:

1. AJAX-style loading, because page reloading is not needed.
2. Hosting on two different servers is a lot more secure. It takes a little work to figure out where the admin panel is, otherwise it’s just website.com/admin. Now website.com serves the frontend, fetching APIs from a backend you know the URL of.
3. Super customizable.
4. Faster, since all your code is not hosted on one server.
5. If something breaks, you know where to dig in first.

Enough talk, let’s get coding. To be fair, this can be done without React. To also be fair, you can dig a pool using spoons. You don’t, right? I’ll explain how React works as we code, just keep in mind what we are doing: Fetching an API and displaying it but in style.

First, start your project with

npx create-react-app strapireactcs
cd strapireactcs
yarn start

I used the file name ‘strapireactcs’ because I want to make a differentiation that this is a CS- or Client-Side Code. This is purely for convenience.

One more thing, make a parent directory for the Strapi backend and React frontend. It should look like this-

parentdir
|__strapireact
|__strapireactcs

This is a good practice.

Now, let’s look at our project structure. You should have two subfolders named Public and Src. Heads up, we will be using Materialize CSS to style our app, so go ahead and add the CDN to index.html.

Add this how you would to a normal HTML file.

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

This will be in index.html, which is where we will call app.js.

Now let’s head over to app.js!

import React from 'react';

We have to have React in our JavaScript file to use it!

Declare the class

export default class People extends React.Component{

The logic for our app goes into this. First we declare a state.

state={people:[]};

According to W3:

React components has a built-in state object.

The state object is where you store property values that belongs to the component.

When the state object changes, the component re-renders.

people will be where the JSON data will be stored that we will get from the server.

async componentDidMount(){
  const url="http://localhost:1337/todos";
  const response=await fetch(url);
  const data=await response.json();
  console.log(data);
  this.setState({todo:data});
}

ComponentDidMount() is a function of React that runs the content inside the parenthesis after the page markdown has loaded.

It’s a good place to setState, that is- Set a value to the state object.

When I console.log’d data, you should be able to see an object in your inspect element console (CTRL+SHIFT+I on Windows).

Let’s Render some HTML now?

Render() function serves the HTML to browser. You can write JavaScript in {} and React will take the value and turn it to HTML Hypertext.

render() {
  const mystyle={padding:'10px'}
return (
 <div style={mystyle}>
     {this.state.todo.map(todo=>(
     <div class="card" style={mystyle}>
         <div>{todo.title}<br></br>{todo.deadline}<br></br></div>
     </div>
))}
</div>
);}}

Now during deployment, you will just have to replace localhost URI with the URI of your backend server. Map is an iterative function. Dot is used to access data members of an object.

So for example, todo.deadline is used to access deadline data from todo state object.

So here is the original API fetch request would give us-

You can check this with CURL, GET or Postman too!

And after fetching that data and serving it with React, we get

Next we will talk about deployment to Heroku, you can also find the Github there.