Guide de pagination avec ReactJS pour les débutants

Bonjour à tous, futurs développeurs React ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde de la pagination en ReactJS. Ne vous inquiétez pas si vous n'avez jamais codé auparavant - je serai votre guide amical, expliquant tout étape par étape. Alors, prenez une tasse de café et plongeons dedans !

Qu'est-ce que la pagination ?

Avant de plonger dans le code, comprenons ce qu'est la pagination. Imaginez que vous lisez un livre. Au lieu de vous montrer toutes les pages d'un coup, le livre est divisé en morceaux gérables. C'est exactement ce que la pagination fait pour votre contenu web !

En développement web, la pagination est une technique utilisée pour diviser un grand ensemble de données en parties plus petites et plus gérables. C'est comme avoir un livre avec plusieurs pages, où chaque page affiche une partie du contenu.

Pourquoi utiliser la pagination en React ?

Vous vous demandez peut-être : "Pourquoi me soucier de la pagination ?" Eh bien, laissez-moi vous raconter une petite histoire.

Il était une fois une application React qui a tenté d'afficher 10 000 éléments sur une seule page. L'application a lutté, s'est essoufflée et a finalement planté, laissant les utilisateurs frustrés. Mais alors, un héros nommé Pagination est venu à la rescousse, divisant ces 10 000 éléments en pages nettes et gérables de 10 éléments chacune. L'application a fonctionné en douceur, les utilisateurs étaient heureux, et ils ont vécu heureux pour toujours.

La morale de l'histoire ? La pagination aide à :

1. Améliorer les performances
2. Fournir une meilleure expérience utilisateur
3. Faciliter la navigation

Commencer avec la pagination en React

Maintenant que nous comprenons le "pourquoi", mettons les mains dans le cambouis avec un peu de code !

Étape 1 : Configuration du projet

Tout d'abord, nous devons créer un nouveau projet React. Si vous ne l'avez pas déjà fait, installez Node.js et npm (Node Package Manager) sur votre ordinateur. Ensuite, ouvrez votre terminal et exécutez :

npx create-react-app react-pagination-demo
cd react-pagination-demo
npm start

Cela créera un nouveau projet React et démarrera le serveur de développement.

Étape 2 : Installation des packages nécessaires

Pour ce tutoriel, nous allons utiliser une bibliothèque de pagination populaire appelée react-paginate. Installons-la :

npm install react-paginate

Étape 3 : Création d'un composant de pagination simple

Maintenant, créons un nouveau fichier appelé Pagination.js dans le dossier src et ajoutons le code suivant :

import React, { useState, useEffect } from 'react';
import ReactPaginate from 'react-paginate';

const Pagination = ({ data, itemsPerPage }) => {
const [currentItems, setCurrentItems] = useState([]);
const [pageCount, setPageCount] = useState(0);
const [itemOffset, setItemOffset] = useState(0);

useEffect(() => {
const endOffset = itemOffset + itemsPerPage;
setCurrentItems(data.slice(itemOffset, endOffset));
setPageCount(Math.ceil(data.length / itemsPerPage));
}, [itemOffset, itemsPerPage, data]);

const handlePageClick = (event) => {
const newOffset = (event.selected * itemsPerPage) % data.length;
setItemOffset(newOffset);
};

return (
<>
<div className="items-list">
{currentItems.map((item, index) => (
<div key={index}>{item}</div>
))}
</div>
<ReactPaginate
breakLabel="..."
nextLabel="suivant >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< précédent"
renderOnZeroPageCount={null}
/>
</>
);
};

export default Pagination;

Décomposons cela :

1. Nous importons les dépendances nécessaires, y compris react-paginate.
2. Nous créons un composant Pagination qui prend data et itemsPerPage comme props.
3. Nous utilisons le hook useState pour gérer les éléments courants, le nombre de pages et le décalage des éléments.
4. Le hook useEffect calcule quels éléments afficher en fonction de la page actuelle.
5. La fonction handlePageClick met à jour le décalage lorsque l'utilisateur clique sur un numéro de page.
6. Nous rendons les éléments courants et le composant ReactPaginate.

Étape 4 : Utilisation du composant de pagination

Maintenant, utilisons notre composant Pagination dans App.js :

import React from 'react';
import Pagination from './Pagination';
import './App.css';

function App() {
const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

return (
<div className="App">
<h1>Démonstration de pagination React</h1>
<Pagination data={data} itemsPerPage={10} />
</div>
);
}

export default App;

Ici, nous créons un tableau de 100 éléments et le passons à notre composant Pagination, ainsi que itemsPerPage défini à 10.

Étape 5 : Ajout de quelques styles

Ajoutons un peu de style pour rendre notre pagination plus jolie. Ajoutez ce qui suit à votre App.css :

.App {
text-align: center;
font-family: Arial, sans-serif;
}

.items-list {
margin-bottom: 20px;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: inline-block;
margin: 0 5px;
}

li a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
transition: background-color .3s;
border: 1px solid #ddd;
}

li a:hover {
background-color: #ddd;
}

li.active a {
background-color: #4CAF50;
color: white;
border: 1px solid #4CAF50;
}

Conclusion

Et voilà ! Vous venez de créer un système de pagination simple mais efficace en React. Souvenez-vous, la pagination est comme couper une pizza - elle rend votre contenu plus digeste et plus agréable pour les utilisateurs.

Voici un résumé rapide de ce que nous avons appris :

Concept	Description
Pagination	Une technique pour diviser de grands ensembles de données en parties plus petites et plus gérables
react-paginate	Une bibliothèque React qui fournit des composants de pagination faciles à utiliser
useState	Un hook React utilisé pour gérer l'état dans les composants fonctionnels
useEffect	Un hook React utilisé pour effectuer des effets secondaires dans les composants

While you continue your React journey, you'll find many ways to customize and improve your pagination. Maybe you'll add search functionality, or perhaps you'll create a more complex data fetching system. The possibilities are endless!

Remember, the key to mastering React (or any programming skill) is practice. So, don't be afraid to experiment with this code, break things, and learn from your mistakes. That's how we all grow as developers.

Happy coding, and may your React apps always be perfectly paginated!

Credits: Image by storyset