Building a simple React application using React Hooks and API
Table of contents
PermalinkIntroduction
React is an open-source, JavaScript library for developing user interfaces (UI) in web applications. It was created by Facebook in 2013 and has since gained popularity amongst developers. Learning react isn't as difficult as it may seem, but an understanding of the fundamentals of JavaScript especially ES6 syntaxes, classes, functions, and array methods, to mention a few will help a lot.
PermalinkProject Overview
In this tutorial, we will be building a simpe random-user generator fetching data from an API. You will learn how to use some react hooks like useState()
and useEffect({},[])
, how to make API calls using fetch
PermalinkProject Initialization and Setup
For this tutorial, I will be installing react and initalizing the project using vite. Vite (French word for "quick", pronounced /vit/
, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. And from experience, installing react on a project takes less time using vite as against using npx create react app 'app name'
. You should checkout the documentation to learn more about vite.
To follow through withe the tutorial, make sure to have the latest version of node and VSCode / anyother text-editor installed on your computer and a project folder to hold the project.
To create a folder on your computer and install react js on it using the terminal, run the following commands in your terminal:
cd desktop
to change your directory to desktopmkdir Project_Name
to create a directory / folder with the "Project_Name" replaced with the name of your project.cd Project_Name
to change the directory to your newly created project folder.npm create vite@latest
to install react on the project. Follow the prompt giving your project a name and choosing ReactJs and JavaScript.cd my-project
to change the directory to your project foldernpm install
to install react and its dependenciesnpm run dev
to start the serverTo make this really simple, we will be working only with the root component
App.jsx
Clear up the root component to look like this;
import React from 'react'
const App = () => {
return (
<div>App</div>
)
}
export default App;
Lets create a template for our user card.
import React from 'react'
const App = () => {
return (
/*the codes are similar to html, but they are not. They are simply jsx codes*/
<section>
<article className="user-card">
<img src="" alt="" />
<h2>Name</h2>
<h4>Email</h4>
<p>Address</p>
</article>
</section>
)
}
export default App;
Since we will be pulling the user datas(image, name, email, phone number, address,...) from an api, it is important we store each user data somewhere. To hold each user data, we will use the useState()
hook. useState
is a Hook that lets you add React state to function components.
/*importing react and useState hook from react*/
import React, { useState } from "react";
const App = () => {
/*useState hook to hold each user data*/
const [user, setUser] = useState();
return (
/*the codes are similar to html, but they are not. They are simply jsx codes*/
<section>
<article className="user-card">
<img src="" alt="" />
<h2>Name</h2>
<h4>Email</h4>
<p>Address</p>
</article>
</section>
)
}
export default App;
The useEffect
Hook allows you to perform side effects in your components. Some examples of side effects are: fetching data from an api, directly updating the DOM, and timers.
useEffect
accepts two arguments. The second argument is optional.
useEffect(<function>, <dependency>)
. we will be importing the useEffect hook from react and write all the codes to fetch data from the api there.
/*importing react and useState hook from react*/
import React, { useState, useEffect } from "react";
const App = () => {
/*useState hook to hold each user data*/
const [user, setUser] = useState();
/*useEffect hook to perform side functions. fetching data from an api in this case*/
useEffect(() => {
fetch("https://randomuser.me/api/?results=100") /*fetches user data from the randomuser api and returns a promise*/
.then((response) => response.json()) /*the promise called response als returns a promise called data*/
.then((data) => {
setUser(data.results); /*the result i.e user data generated is stored in user state using the setUser()*/
})
.catch((err) => {
console.log(err);
});
}, [])
return (
/*the codes are similar to html, but they are not. They are simply jsx codes*/
<section>
<article className="user-card">
<img src="" alt="" />
<h2>Name</h2>
<h4>Email</h4>
<p>Address</p>
</article>
</section>
)
}
export default App;
Rember the template we created with some dummy texts? The dummy texts will now be replaced with the user data
/*importing react and useState hook from react*/
import React, { useState, useEffect } from "react";
const App = () => {
const [user, setUser] = useState();
useEffect(() => {
fetch("https://randomuser.me/api/")
.then((response) => response.json())
.then((data) => {
setUser(data.results);
})
.catch((err) => {
console.log(err);
});
}, [])
return (
<section>
<article className="user-card">
<img src={user.picture?.medium} alt="" />
<h2>
{user.name?.first} {user.name?.last}
</h2>
<h4>{user.email}</h4>
<p>{user.location?.country}</p>
</article>
</section>
)
}
export default App;
With this, we have successfully created our simple random user generator.