Panduan Pemula untuk Pagination di ReactJS

Hai teman-teman, pengembang React masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia pagination di ReactJS. Jangan khawatir jika Anda belum pernah mengoding sebelumnya - saya akan menjadi panduan temananda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambil secangkir kopi, dan mari kita masuk ke dalamnya!

Apa Itu Pagination?

Sebelum kita masuk ke kode, mari kita mengerti apa itu pagination. Bayangkan Anda membaca buku. Daripada menampilkan semua halaman sekaligus, buku itu dibagi menjadi bagian yang mudah ditangani. Itu tepat apa yang pagination lakukan untuk konten web Anda!

Dalam pengembangan web, pagination adalah teknik yang digunakan untuk membagi set data besar menjadi bagian yang lebih kecil dan mudah ditangani. Itu seperti memiliki buku dengan banyak halaman, di mana setiap halaman menampilkan sebagian konten.

Mengapa Menggunakan Pagination di React?

Sekarang, Anda mungkin bertanya-tanya, " Mengapa harus bermasalah dengan pagination?" Well, mari saya ceritakan kecil.

Pada suatu waktu, ada aplikasi React yang mencoba menampilkan 10.000 item di halaman tunggal. Aplikasi itu kesulitan, kesulitan, dan akhirnya mogok, meninggalkan pengguna frustasi. Tetapi kemudian, pahlawan bernama Pagination datang untuk menyelamatkan, membagi 10.000 item itu menjadi halaman yang rapih dan mudah ditangani, 10 item masing-masing. Aplikasi berjalan mulus, pengguna senang, dan semua orang hidup bahagia selamanya.

Moral cerita? Pagination membantu dengan:

1. Peningkatan kinerja
2. Pengalaman pengguna yang baik
3. Navigasi yang mudah

Memulai dengan Pagination di React

Sekarang kita mengerti 'mengapa', mari kita merusak tangannya dengan beberapa kode!

Langkah 1: Menyiapkan Proyek

Pertama, kita perlu membuat proyek React baru. Jika Anda belum melakukan itu, install Node.js dan npm (Node Package Manager) di komputer Anda. Kemudian, buka terminal Anda dan jalankan:

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

Ini akan membuat proyek React baru dan memulai server pengembangan.

Langkah 2: Menginstall Paket Yang Diperlukan

Untuk panduan ini, kita akan menggunakan pustaka pagination populer yang disebut react-paginate. Mari kita instalnya:

npm install react-paginate

Langkah 3: Membuat Komponen Pagination Sederhana

Sekarang, mari kita buat file baru bernama Pagination.js di folder src dan tambahkan kode berikut:

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;

mari kitauraikan ini:

1. Kita import dependensi yang diperlukan, termasuk react-paginate.
2. Kita membuat komponen Pagination yang menerima data dan itemsPerPage sebagai prop.
3. Kita menggunakan hook useState untuk mengelola item saat ini, jumlah halaman, dan offset item.
4. Hook useEffect menghitung item mana yang harus ditampilkan berdasarkan halaman saat ini.
5. Fungsi handlePageClick memperbarui offset saat pengguna mengklik nomor halaman.
6. Kita menampilkan item saat ini dan komponen ReactPaginate.

Langkah 4: Menggunakan Komponen Pagination

Sekarang, mari kita gunakan komponen Pagination di 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>React Pagination Demo</h1>
<Pagination data={data} itemsPerPage={10} />
</div>
);
}

export default App;

Di sini, kita membuat array 100 item dan mengirimkannya ke komponen Pagination, bersamaan dengan itemsPerPage diatur ke 10.

Langkah 5: Menambahkan Gaya

Mari kita tambahkan gaya dasar untuk membuat pagination terlihat bagus. Tambahkan yang berikut ke App.css Anda:

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

Kesimpulan

Dan itu dia! Anda telah membuat sistem pagination sederhana tapi efektif di React. Ingat, pagination seperti memotong pizza - itu membuat konten Anda lebih mudah dan menikmati bagi pengguna.

Berikut adalah ringkasan apa yang kita pelajari:

Konsep	Deskripsi
Pagination	Teknik untuk membagi set data besar menjadi bagian yang lebih kecil, mudah ditangani
react-paginate	Pustaka React yang menyediakan komponen pagination mudah digunakan
useState	Hook React yang digunakan untuk mengelola state di komponen fungsional
useEffect	Hook React yang digunakan untuk melakukan efek samping di komponen

Dalam perjalanan React Anda, Anda akan menemukan banyak cara untuk menyesuaikan dan meningkatkan pagination Anda. Mungkin Anda akan menambahkan fungsi pencarian, atau mungkin Anda akan membuat sistem pengambilan data yang lebih kompleks. Kemungkinan adalah tak terbatas!

Ingat, kunci untuk menjadi ahli React (atau keterampilan pemrograman apa pun) adalah latihan. Jadi, jangan khawatir untuk mencoba kode ini, merusak hal-hal, dan belajar dari kesalahan Anda. Itu adalah bagaimana kita semua tumbuh sebagai pengembang.

Selamat koding, dan semoga aplikasi React Anda selalu terpaginasi sempurna!

Credits: Image by storyset