In this tutorial, we will consume rest api in react application. Rest api url is https://jsonplaceholder.typicode.com/users/. In home page will show the list of users, then when we will click on user, it will go to user details page.
Prerequisite
1) Install node and npmInstall create-react-app
Open command prompt and install create-react-app.
npm install -g create-react-appCreate a react application
Go to project folder in command prompt and create react application. My project directory is F:\javascript-projects\react-projects. You can choose directory according to your choice. And my project name is consume-rest-api.
F:
cd F:\javascript-projects\react-projects
npx create-react-app consume-rest-apiIt will take some time to create project.
Run the application
cd consume-rest-api
npm startApplication will start and it will open url in browser http://localhost:3000/.
Install react-router for multiple page
Stop the application and install react router.
npm install react-router-dom --save
Create home and user pages
We want two webpages. In home page we will list the users and in user webpage we will show the details of user.
Create webpages like below:
. src/webpages/home.js
. src/webpages/user.js
. src/webpages/index.js
Write following code in src/webpages/home.js
import React from 'react';const Home = () => {return(
<div>
<h1>User Lists</h1>
</div>
);
}export default Home;
Write following code in src/webpages/user.js
import React from 'react';const User = () => {return(
<div>
<h1>User Details</h1>
</div>
);
}export default User;
Write following code in src/webpages/index.js
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";import Home from './home';
import User from './user';const Webpages = () => {
return(
<Router>
<Route exact path="/" component= {Home} />
<Route path = "/user" component = {User} />
</Router>
);
};export default Webpages;
Modify src/App.js
import React from 'react';
import Webpages from './webpages';function App() {
return (
<div>
<Webpages />
</div>
);
}export default App;
Run the application
npm startcheck urls in browser:
Fetch data from rest api in src/webpages/home.js
Write following lines of code in src/webpages/home.js
import React, { useState, useEffect } from 'react';const Home = () => {const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [users, setUsers] = useState([]); useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users/")
.then(res => res.json())
.then(
(data) => {
setIsLoaded(true);
setUsers(data);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, [])if (error) {
return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
return <div>Loading...</div>;
} else {
return (
<ul>
{users.map(user => (
<li key={user.id}>
{user.name}
</li>
))}
</ul>
);
}
}export default Home;
Check in browser
Application is already running, so check in browser: http://localhost:3000/
We are able to fetch users from rest api. When we click on particular user it should show the details of that user. So let us add detail link.
Add link to the user in src/webages/home.js
import { Link } from 'react-router-dom';return (
<ul>
{users.map(user => (
<li>
<Link to={`user/${user.id}`}>{user.name}</Link>
</li>
))}
</ul>
);
Check in browser: http://localhost:3000/.
Create page for user
When we click on link, it should go to user details page. Write following line of code in src/webpages/user.js.
Capture user id from url/path.
Modify path in src/webpages/index.js.
<Route path = "/user/:id" component = {User} />
Print user id in src/webpages/user.js
import React from 'react';const User = props => {var id = props.match.params.idreturn(
<div>
<h1>User Details</h1>
ID: {id}
</div>
);
}export default User;
Check url in browser: http://localhost:3000/user/1
Fetch user details according to user id in src/webpages/user.js
import React, { useState, useEffect} from 'react';const User = props => { var id = props.match.params.id const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [user, setUser] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users/" + id)
.then(res => res.json())
.then(
(data) => {
console.log(data);
setUser(data);
setIsLoaded(true);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, []) if (error) {
return <div>Error: {error.message}</div>;
}
if (!isLoaded) {
return <div>Loading...</div>;
}
if (user) {
return (
<div>
<h1>{user.name}</h1>
<div>
Email: {user.email}
</div>
<div>
Phone: {user.phone}
</div>
<div>
Website: {user.website}
</div> </div> );
}
}export default User;
Check in browser
http://localhost:3000/user/1
http://localhost:3000/user/2
Display other details of user also
We can see, we have address and company also, which is another object.
Declare useState for user address and company.
const [userAddress, setUserAddress] = useState([]);
const [userCompany, setUserCompany] = useState([]);
setUserAddress(data.address);
setUserCompany(data.company);
Print address and company
<div>
Company: {userCompany.name}
</div>
<div>
Address: {userAddress.street}, {userAddress.suite}, {userAddress.city}, {userAddress.zipcode}
</div>Full code of src/webpages/user.js
import React, { useState, useEffect } from 'react';const User = props => { var id = props.match.params.id const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);
const [user, setUser] = useState([]);
const [userAddress, setUserAddress] = useState([]);
const [userCompany, setUserCompany] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users/" + id)
.then(res => res.json())
.then(
(data) => {
console.log(data);
setIsLoaded(true);
setUser(data);
setUserAddress(data.address);
setUserCompany(data.company);
},
(error) => {
setIsLoaded(true);
setError(error);
}
)
}, []) if (error) {
return <div>Error: {error.message}</div>;
}
if (!isLoaded) {
return <div>Loading...</div>;
}
if (user) {
return (
<div>
<h1>{user.name}</h1>
<div>
Email: {user.email}
</div>
<div>
Phone: {user.phone}
</div>
<div>
Website: {user.website}
</div>
<div>
Company: {userCompany.name}
</div>
<div>
Address: {userAddress.street}, {userAddress.suite}, {userAddress.city}, {userAddress.zipcode}
</div> </div> );
}
}export default User;
Check in browser:
Click on any user: http://localhost:3000/user/1
Thanks for reading.
