|
In this article, you will learn to develop a React application, which will fetch the data from a REST API using Fetch. We will use GitHub Users API to fetch the user’s public information with their username. You can find the API reference and source code links at the end of this article.
Prerequisites:Steps to Create the React Application And Installing Module:Step 1: Create a React application.
npx create-react-app foldername
Step 2: Move into the project folder.
cd foldername
Step 3: Create a components folder and now Project Structure will look like:
 Project Structure The updated dependencies in package.json file will look like:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
}Approach: Custom components resides in the components folder, with everything put together in the MainComponent.js, we will place this component inside App.js, which itself goes under “root” DOM node and everything inside this node will be managed by React DOM.
We are going to develop three components:
- Main Component: Responsible for fetch operation and state changes in the application.
- Search Bar: A search bar to get the user input for GitHub username.
- UserInfoCard: A reusable component to display the GitHub user information.
JavaScript
import React, { useState, useEffect } from "react";
import SearchBar from "./SearchBar";
import UserInfoCard from "./UserInfoCard";
function Main() {
const [username, setUsername] = useState("");
const [userData, setUserData] = useState(Object);
useEffect(() => {
getUserData();
}, [username]);
var gitHubUrl = `https://api.github.com/users/${username}`;
const getUserData = async () => {
const response = await fetch(gitHubUrl);
const jsonData = await response.json();
if (jsonData && jsonData.message !== "Not Found") {
setUserData(jsonData);
console.log(jsonData)
}
else if (username !== "") {
console.log('Username does not exist');
}
else {
setUserData({})
}
};
return (
<div>
<SearchBar username={username}
setUsername={setUsername} />
<UserInfoCard userData={userData} />
</div>
);
}
export default Main;
import React from "react";
function SearchBar({ username, setUsername }) {
const onChange = (e) => {
setUsername(e.target.value)
}
return (
<div className="searchbar">
<input
placeholder="Search"
type="text"
onChange={(event) => { onChange(event) }}
onKeyUp={(event) => { onChange(event) }}
onPaste={(event) => { onChange(event) }}
/>
</div>
);
}
export default SearchBar;
import React from "react";
function UserInfoCard({ userData }) {
return (
<div className="datacontainer">
{userData.avatar_url ? (<div className="dataitem">
<img src={userData.avatar_url}
alt="avatar" /></div>) : (<div></div>)}
{userData.login ? (<div className="dataitem">Login:
{userData.login}</div>) : (<div></div>)}
{userData.name ? (<div className="dataitem">
Name : {userData.name}</div>) : (<div></div>)}
{userData.blog ? (<div className="dataitem">
Blog: {userData.blog}</div>) : (<div></div>)}
</div>
);
}
export default UserInfoCard;
Step to run the application: To start the application on your system, run the following command:
npm start
Output:
|
