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; }