How to create a simple React js single page application?

In this particular post, we will learn to create a single React js single page application. React JS uses JSX — it helps us in keeping code simpler and elegant when writing large pieces of code. The popularity of React JS is well known for providing component-driven rich user interfaces. Nowadays most of the tools and respective applications are coming with reusable React components.

This exercise page will have a button to retrieve the random user from an API. It helps to understand the basics of React JS and the usage of API communication within it.

Pre-requisites

1. Codesandbox — To develop the React JS project
2. Random User API — It is an open-source free API that gives random user data

Step 1: Develop the React JS Project

Navigate to https://codesandbox.io/ — Codesandbox URL. Click on the React JS.

It will open up the code editor window as below

Step 2: Develop RandomUserExample React component

Rename the App.js to “RandomUserExample.js” and copy the following code.

The following code is self-explanatory from the JSX perspective.

import "./styles.css";
import React from "react";
export default class RandomUserExample extends React.Component {
state = {
loading: true,
person: null
};
getRandomUser = async (props) => {
const url = "https://api.randomuser.me/";
const response = await fetch(url);
const data = await response.json();
this.setState({ person: data.results[0], loading: false });
};
clearRandomUser = () => {
this.setState({ loading: true, person: null });
};
render() {
return (
<div className="App">
{this.state.loading ? (
<div>
<button className="Randomuserbutton" onClick={this.getRandomUser}>
Random User
</button>
</div>
) : (
<div>
<div>
<img src={this.state.person.picture.large} />
</div>
<div className="Content">
<label>First Name: </label>
{this.state.person.name.first}
</div>
<div className="Content">
<label>Last Name: </label>
{this.state.person.name.last}
</div>
<div className="Content">
<label>City: </label>
{this.state.person.location.city}
</div>
<div>
<button
className="Randomuserbutton"
onClick={this.clearRandomUser}
>
Clear
</button>
</div>
</div>
)}
</div>
);
}
}

Update the references in the index.js as below — To replace the App to RandomUserExample component.

import ReactDOM from "react-dom";
import RandomUserExample from "./RandomUserExample";
const rootElement = document.getElementById("root");
ReactDOM.render(<RandomUserExample />, rootElement);

Step 3: Update styling of the RandomUserExample component

In the Styles.css file — Update with the following content

.App {
font-family: sans-serif;
text-align: center;
}
.Content {
/* Body H4 */
font-family: Montserrat;
font-style: normal;
font-size: 16px;
line-height: 36px;
/* identical to box height, or 150% */
letter-spacing: -0.015em;
color: #000000;
}
.Randomuserbutton {
/* Button
Primary Button
*/
position: relative;
width: 130px;
height: 40px;
left: 593px;
top: 737px;
/* Rectangle 2 */
position: relative;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;
/* Actionable Item */
background: #18a0fb;
border-radius: 6px;
/* Register */
position: relative;
left: 40.15%;
right: 26.15%;
top: 5.5%;
bottom: 27.5%;
font-family: Montserrat;
font-style: bold;
font-weight: 500;
font-size: 15px;
line-height: 18px;
display: flex;
align-items: center;
text-align: center;
letter-spacing: -0.015em;
color: #ffffff;
}

Note: For styling the application, If you are new then I recommend using Figma.

Step 4: Testing the application

On the right-hand side, you can see a random user button to retrieve the random user from the API.

Hurray, congratulations :) Now you successfully completed a React JS Single page application to use an API to get the information.