DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
abhinav the builder
abhinav the builder

Posted on

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 strapireactcscd strapireactcsyarn start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

Declare the class

export default class People extends React.Component{
Enter fullscreen mode Exit fullscreen mode

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

state={people:[]};
Enter fullscreen mode Exit fullscreen mode

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.

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});}
Enter fullscreen mode Exit fullscreen mode

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>);}}
Enter fullscreen mode Exit fullscreen mode

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-

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.

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await