Ajoutez de la pagination à votre site avec React

Dans cet article, nous verrons comment ajouter une pagination (diviser les données en pages séparées) à une application à l’aide de react-paginate.

Le processus de fractionnement des données en pages distinctes est appelé pagination. Au lieu de récupérer une grande quantité de données du serveur et de les montrer à l’utilisateur en une seule fois, la division des données sur plusieurs pages permet aux développeurs de limiter la quantité de données qu’un utilisateur charge au fil du temps, les incitant à en demander davantage si nécessaire.

Dans cet article, nous verrons comment diviser les données en morceaux. Nous allons créer une galerie d’images paginées à l’aide de l’API officielle Unsplash JSON et réagir-paginer.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de :

• Une compréhension de base de React.js
• Node installé sur votre PC
• Un éditeur de texte

Configuration du projet

Dans ce tutoriel, nous utiliserons Réagir comme framework JavaScript, Axios pour récupérer les données de l’API, et réagir-paginer pour ajouter de la pagination à notre site. Commençons par installer les dépendances nécessaires.

Exécutez cette commande pour créer une nouvelle application React dans un dossier nommé image-gallery:

npx create-react-app image-gallery
cd image-gallery

Exécutez cette commande pour installer la dépendance :

npm install axios

La commande ci-dessus installe Axios, qui est la dépendance que nous utiliserons pour récupérer les données d’une API.

Pour nettoyer les choses, supprimons les fichiers dont nous n’aurons pas besoin de notre application. Supprimez les fichiers suivants : App.css, App.test.js, logo.svg, reportWebVitals.js, setupTest.js.

Remplacez tout dans votre index.js fichier avec ceci :

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

Remplacez le code dans votre App.js fichier avec les éléments suivants :

import axios from "axios";
import { useEffect, useState } from "react";
import config from "./config";

function App() {
  const [images, setImages] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  useEffect(() => {
   setIsLoading(true);
    axios
      .get(
        `https://api.unsplash.com/photos/?client_id=${config.Image_Gallery_Client_ID}`
      )
      .then((res) => {
        setImages((prevState) => [...res.data]);
        setIsLoading(false);
        console.log(res.data);
        return res.data;
      })
      .catch((err) => {
        console.log(err);
        setIsLoading(false);
      });
  }, []);
  return (<div>Welcome</div>)
}
export default App;

Dans le code ci-dessus, nous importons Axios et l’utilisons dans le useEffect crochet pour récupérer nos données une fois la page chargée. Nous avons également créé des variables d’état avec les useState crochet qui stocke nos données.

Lors de l’appel de notre point de terminaison API, nous lisons la valeur de notre client_id à partir d’un fichier de configuration que nous n’avons pas encore créé. Nous devons obtenir une clé d’accès auprès d’Unsplash, puis stocker la clé dans un fichier de configuration.

Configuration de l’API Unsplash

Dirigez-vous vers ceci Site sans éclaboussures et suivez ces étapes :

• Connectez-vous ou inscrivez-vous en tant que développeur si vous n’avez pas encore de compte.
• Clique le Nouvelle application lien.
• Vous devriez être redirigé vers la page des directives de l’API. Vérifiez les boutons et cliquez sur le Accepter les termes bouton.
• Remplissez les informations requises et cliquez sur le Créer une application bouton.
• Vous devriez être redirigé vers votre page d’applications. Faites défiler jusqu’à Clés section de la page et copiez votre clé d’accès.

À l’intérieur de src répertoire de votre projet, créez un config.js fichier et ajoutez-y ce qui suit avec votre clé d’accès :

Image_Gallery_Client_ID="Your_Access_Key"

Nous avons déjà importé le fichier de configuration dans le App.js fichier, ajoutez donc le config.js fichier à votre .gitignore dossier.

Nous pouvons aller de l’avant et tester nos progrès jusqu’à présent. Exécutez cette commande dans votre terminal pour démarrer votre serveur.

npm start

Ouvrez vos outils de développement. Dans la console, vous devriez voir les données extraites de l’API.

Utilisons les données du projet. Remplacez ce qui suit par ce qui se trouve dans la déclaration de retour de votre App.js dossier:

<>
  <h2>My Image Gallery</h2>
  <div className="App">
    {images?.map((image, i) => {
      return (
        <div className="img-wrapper" key={i}>
          <img src={image?.urls?.thumb} alt={image.alt_description} />
        </div>
      );
    })}
  </div>
</>

Dans le code ci-dessus, nous parcourons les données, et pour chaque itération, nous renvoyons une image. Si vous exécutez votre serveur, vous devriez voir quelque chose comme ceci :

Maintenant, pour styliser la page, ajoutez ce qui suit à votre index.css dossier:

h2 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  margin: 3rem 0;
}
.App {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
  margin-bottom: 2.5rem;
}
.img-wrapper {
  width: 100%;
}
.img-wrapper img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
  margin-bottom: 3rem;
}
button {
  background: #fafafa;
  border: 1px solid #eaeaea;
  padding: 0.7rem 1.2rem;
  border-radius: 3px;
  cursor: pointer;
}
button:hover {
  background: #eaeaea;
}
p {
  font-size: 1rem;
  margin: 0 1rem;
}

Vous devriez voir quelque chose de similaire à l’image ci-dessous.

En regardant notre application maintenant, nous n’obtenons que 10 images, ce que nous obtenons par défaut de l’API Unsplash. Et si nous voulons charger plus d’images ? L’API Unsplash a un système de pagination que nous pouvons utiliser. Ouvrez votre App.js fichier et ceci:

const [page, setPage] = useState(1);

Cela crée un état qui stocke la page sur laquelle nous nous trouvons actuellement. Ajoutez maintenant page au tableau de dépendances dans le useEffect accrocher.

Remplace le axios.get demande dans votre useEffect crochet avec ce qui suit :

axios.get(
  `https://api.unsplash.com/photos/?client_id=${config.Image_Gallery_Client_ID}&page=${page}`
)

Dans le code ci-dessus, nous avons ajouté une chaîne de requête appelée pageet sa valeur est la valeur de page Etat. La page La requête indique à Unsplash quelle page nous devons renvoyer.

Par défaut, cette requête renverra une liste d’images paginées en pages de 10 éléments.

Pour que la pagination fonctionne, ajoutez ce qui suit à la ligne 38 de votre App.js dossier:

<div className="pagination">
  {isLoading ? (
    <p>Loading...</p>
  ) : (
    <>
     <button
        disabled={page === 1}
        onClick={() => setPage((prevState) => prevState - 1)}
      >
        Prev
      </button>
      <p>{page}</p>
     <button onClick={() => setPage((prevState) => prevState + 1)}>
        Next
      </button>
    </>
  )}
</div>

Dans le code ci-dessus, nous avons deux boutons : un qui soustrait un à la page pour obtenir la page précédente et un qui en ajoute un à la page courante pour obtenir la page suivante. C’est pourquoi nous avons ajouté page au tableau de dépendances dans le useEffect crochet pour récupérer à nouveau les données chaque fois que la page est mise à jour.

Maintenant, si vous lancez le serveur, vous devriez avoir quelque chose comme ça :

Cela fonctionne assez bien si nous nous arrêtons ici. Mais on peut faire un pas en avant. Considérez une situation où nous recevons une grande quantité de données à la fois et devons ajouter une pagination pour améliorer l’apparence du site.

Mettons à jour l’appel API avec ceci pour augmenter le nombre d’images à afficher par page :

axios.get(
  `https://api.unsplash.com/photos/?client_id=${config.Image_Gallery_Client_ID}&per_page=30`
)

Nous avons ajouté le per_page paramètre de requête à notre requête API et définissez-le pour récupérer 30 images par page. Retirer page du tableau de dépendance dans le useEffect accrocher.

Composant de pagination réactif

installons réagir-paginerle composant React que nous utiliserons pour réaliser la pagination.

npm install react-paginate --save

Ensuite, ajoutons ces variables d’état à notre App.js dossier:

const [currentImages, setCurrentImages] = useState(null);
const [pageCount, setPageCount] = useState(0);
const [imagesOffset, setImagesOffset] = useState(0);

Ajoutons un autre useEffect crochet pour structurer le nombre d’images que nous demandons par page :

useEffect(() => {
  const endOffset = imagesOffset + 8;
  setCurrentImages(images.slice(imagesOffset, endOffset));
  setPageCount(Math.ceil(images.length / 8));
}, [images, imagesOffset]);

Le code ci-dessus divise les données en un nombre spécifique par page.

const handlePageClick = (event) => {
  const newOffset = (event.selected * 8) % images.length;
  setImagesOffset(newOffset);
};

Lorsque l’utilisateur clique sur n’importe quelle page de la pagination, la fonction sera déclenchée.

Dans la déclaration de retour de votre App.js fichier, nous itérons actuellement sur le images variable d’état, remplacez-la par currentImages. Dans le useEffect crochet où nous faisons la demande d’API, supprimez tous les appels à setIsLoading() et supprimer le useState crochet que nous avons défini pour cela.

Au sommet de votre App.js fichier, importez react-paginate.

...
import ReactPaginate from "react-paginate";

Maintenant, pour utiliser react-paginate, supprimez le code de pagination suivant :

<div className="pagination">
  
</div>

Remplacez la pagination précédente par celle-ci :

<div className="pagination">
  <ReactPaginate
    breakLabel="..."
    nextLabel="next >"
    onPageChange={handlePageClick}
    pageRangeDisplayed={5}
    pageCount={pageCount}
    previousLabel="< previous"
    renderOnZeroPageCount={null}
    breakClassName={"page-item"}
    breakLinkClassName={"page-link"}
    containerClassName={"pagination"}
    pageClassName={"page-item"}
    pageLinkClassName={"page-link"}
    previousClassName={"page-item"}
    previousLinkClassName={"page-link"}
    nextClassName={"page-item"}
    nextLinkClassName={"page-link"}
    activeClassName={"active"}
  />
</div>

Enfin, ajoutez ce qui suit à votre index.css fichier pour styliser le composant de pagination.

.pagination > li {
  list-style: none;
  border: 0.3px solid;
}
.pagination > li > a,
.pagination > li > span {
  float: left;
  padding: 8px 20px;
  line-height: 1.5;
  border: 1px solid #ddd;
  margin-left: -1px;
}

.pagination > li.active > a {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}
.pagination > li > a:hover {
  background-color: #218838;
  color: white;
  cursor: pointer;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
}

Vous devriez obtenir le même résultat montré dans l’image ci-dessous si vous actualisez votre navigateur.

Conclusion

Cet article a couvert différentes méthodes pour structurer la quantité de données qu’un utilisateur voit à la fois, que les données aient été paginées à partir du backend ou envoyées sous un grand format de données.