Bootstrap : https://react-bootstrap.github.io/getting-started/introduction/
Install bootstrap
npm install react-bootstrap bootstrap@5.1.3
C:\reactdev\myreactdev>npm install react-bootstrap bootstrap@5.1.3
https://react-bootstrap.github.io/getting-started/introduction/
API call https://reqres.in/
https://reqres.in/api/users?per_page=2&page=1
{"page":1,"per_page":2,"total":12,"total_pages":6,"data":[{"id":1,"email":"george.bluth@reqres.in","first_name":"George","last_name":"Bluth","avatar":"https://reqres.in/img/faces/1-image.jpg"},{"id":2,"email":"janet.weaver@reqres.in","first_name":"Janet","last_name":"Weaver","avatar":"https://reqres.in/img/faces/2-image.jpg"}],"support":{"url":"https://reqres.in/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
//src/App.js
import React, { useEffect, useState } from 'react';
function App() {
const perPage = 2;
const [totalPages, setTotalPages] = useState(1);
const [page, setPage] = useState(1);
const [userList, setUserList] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
const getUserList = () => {
setLoading(true);
fetch(`https://reqres.in/api/users?per_page=${perPage}&page=${page}`)
.then(res => res.json())
.then(res => {
setTotalPages(res.total_pages);
setUserList([...userList, ...res.data]);
setLoading(false);
});
}
getUserList();
}, [page]);
return (
<div className="container" style={{padding: 20}}>
<div className="row">
<div className="col-3"></div>
<div class="col-6">
<h3>ReactJS Load More Pagination Results</h3>
{userList.map((x, i) => {
return <div key={i} className="box">
<img src={x.avatar} />
<div className="name">{x.first_name} {x.last_name}</div>
<div className="email">{x.email}</div>
</div>
})}
<div className="clearfix"></div>
{totalPages !== page && <button className="btn btn-primary" onClick={() => setPage(page + 1)}>{loading ? 'Loading...' : 'Load More'}</button>}
</div>
<div className="col-3"></div>
</div>
</div>
);
}
export default App;
src/index.css
//src/index.css
.box {
float: left;
width: 200px;margin-right:20px;margin-bottom:20px;
border: 1px solid #ddd;
border-radius: 5px;
background: #f5f5f5;
padding-bottom: 10px;
}
.box img {
width: 100%;
height: 150px;
object-fit: cover;
}
.box .name {
padding: 10px 10px 5px 10px;
}
.box .email {
font-style: italic;padding-left:10px;
color: #666;
}
.clearfix {
clear: both;margin-bottom:20px;
}
