ReactJS - Paginierung: Ein Anfängerleitfaden

Hallo da draußen, zukünftige React-Entwickler! Heute machen wir uns auf eine aufregende Reise in die Welt der Paginierung in ReactJS. Keine Sorge, wenn du noch nie kodiert hast – ich werde dein freundlicher Guide sein und alles Schritt für Schritt erklären. Also, hole dir eine Tasse Kaffee und tauchen wir ein!

Was ist Paginierung?

Bevor wir uns in den Code stürzen, lassen Sie uns verstehen, was Paginierung ist. Stell dir vor, du liest ein Buch. Anstatt dir alle Seiten auf einmal zu zeigen, ist das Buch in handhabbare Abschnitte unterteilt. Genau das tut die Paginierung auch für deinen Webinhalt!

In der Webentwicklung ist Paginierung eine Technik, um einen großen Satz von Daten in kleinere, handhabbare Teile zu unterteilen. Es ist wie ein Buch mit mehreren Seiten, wobei jede Seite einen Teil des Inhalts anzeigt.

Warum sollte man in React Paginierung verwenden?

Nun, du fragst dich vielleicht, "Warum sollte ich mich mit Paginierung beschäftigen?" Lass mich dir eine kleine Geschichte erzählen.

Es war einmal eine React-App, die versuchte, 10.000 Elemente auf einer einzigen Seite anzuzeigen. Die arme App kämpfte, stotterte und schließlich abstürzte, was die Benutzer frustriert ließ. Aber dann kam ein Held namens Paginierung zur Rettung, der diese 10.000 Elemente in ordentliche, handhabbare Seiten mit je 10 Elementen aufteilte. Die App lief flüssig, die Benutzer waren glücklich, und alle lebten glücklich bis ans Ende der Geschichte.

Die Moral der Geschichte? Paginierung hilft bei:

1. Verbesserter Leistung
2. Besserer Benutzererfahrung
3. Einfacherer Navigation

Erste Schritte mit Paginierung in React

Nun, da wir den Grund verstehen, lassen wir uns mit ein wenig Code beschäftigen!

Schritt 1: Projekt einrichten

Zuerst müssen wir ein neues React-Projekt erstellen. Wenn du das noch nicht getan hast, installiere Node.js und npm (Node Package Manager) auf deinem Computer. Öffne dann dein Terminal und führe aus:

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

Dies erstellt ein neues React-Projekt und startet den Entwicklungsserver.

Schritt 2: Erforderliche Pakete installieren

Für diesen Tutorial verwenden wir eine beliebte Paginierungslibrary namens react-paginate. Installieren wir sie:

npm install react-paginate

Schritt 3: Einen einfachen Paginierungscomponenten erstellen

Nun erstellen wir eine neue Datei namens Pagination.js im src-Ordner und fügen den folgenden Code hinzu:

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="next >"
onPageChange={handlePageClick}
pageRangeDisplayed={5}
pageCount={pageCount}
previousLabel="< previous"
renderOnZeroPageCount={null}
/>
</>
);
};

export default Pagination;

Lassen Sie uns das zusammenbrechen:

1. Wir importieren die notwendigen Abhängigkeiten, einschließlich react-paginate.
2. Wir erstellen einen Pagination-Componenten, der data und itemsPerPage als Props annimmt.
3. Wir verwenden den useState-Hook, um die aktuellen Elemente, die Seitenzahl und den Elementversatz zu verwalten.
4. Der useEffect-Hook berechnet, welche Elemente basierend auf der aktuellen Seite angezeigt werden sollen.
5. Die handlePageClick-Funktion aktualisiert den Versatz, wenn ein Benutzer auf eine Seitenzahl klickt.
6. Wir rendern die aktuellen Elemente und den ReactPaginate-Componenten.

Schritt 4: Den Paginierungscomponenten verwenden

Nun verwenden wir unseren Pagination-Componenten in App.js:

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

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

return (
<div className="App">
<h1>React Paginierung Demo</h1>
<Pagination data={data} itemsPerPage={10} />
</div>
);
}

export default App;

Hier erstellen wir ein Array von 100 Elementen und übergeben es an unseren Pagination-Componenten, zusammen mit itemsPerPage auf 10 gesetzt.

Schritt 5: Ein wenig Stil hinzufügen

Fügen wir einige grundlegende Stile hinzu, um unsere Paginierung ansprechend aussehen zu lassen. Füge das Folgende zu deiner App.css hinzu:

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

Fazit

Und da hast du es! Du hast gerade ein einfaches, aber effektives Paginierungssystem in React erstellt. Denke daran, Paginierung ist wie ein Pizzaschnitt – sie macht deinen Inhalt besser verdaulich und genießen für die Benutzer.

Hier ist eine schnelle Zusammenfassung dessen, was wir gelernt haben:

Konzept	Beschreibung
Paginierung	Eine Technik, um große Mengen von Daten in kleinere, handhabbare Teile zu unterteilen
react-paginate	Eine React-Bibliothek, die benutzerfreundliche Paginierungscomponenten bietet
useState	Ein React-Hook, der verwendet wird, um den Zustand in funktionalen Componenten zu verwalten
useEffect	Ein React-Hook, der verwendet wird, um Nebenwirkungen in Componenten auszuführen

Während du deine Reise mit React fortsetzt, wirst du viele Möglichkeiten finden, deine Paginierung anzupassen und zu verbessern. Vielleicht fügst du eine Suchfunktion hinzu oder erstellst ein komplexeres Datenabrufsystem. Die Möglichkeiten sind endlos!

Denke daran, der Schlüssel zum Beherrschen von React (oder jeder anderen Programmiersprache) ist die Übung. Also, habe keine Angst, mit diesem Code zu experimentieren, Dinge kaputt zu machen und aus deinen Fehlern zu lernen. Das ist, wie wir alle als Entwickler wachsen.

Frohes Coden und möge deine React-Apps immer perfekt paginiert sein!

Credits: Image by storyset