Panduan untuk Pemula: Pagination di ReactJS

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

Apa Itu Pagination?

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

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

Mengapa Menggunakan Pagination di React?

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

Pada suatu waktu, ada sebuah aplikasi React yang mencoba menampilkan 10.000 item di halaman tunggal. Aplikasi itu kesulitan, menggagalkan, dan akhirnya crash, meninggalkan pengguna frustasi. Tetapi kemudian, seorang pahlawan bernama Pagination datang menyelamatkan, membagi 10.000 item itu menjadi halaman yang rapi dan mudah diatur, setiap halaman 10 item. Aplikasi berjalan mulus, pengguna senang, dan semua orang hidup bahagia seterusnya.

Moral cerita? Pagination membantu dengan:

1. Peningkatan kinerja
2. Peningkatan pengalaman pengguna
3. Navigasi yang mudah

Memulai dengan Pagination di React

Sekarang kita mengerti 'mengapa', mari kita merusak sesuatu dengan kode!

Langkah 1: Menyiapkan Proyek

Pertama, kita perlu membuat proyek React baru. Jika Anda belum melakukan itu, instal 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: Menginstal Paket Yang Diperlukan

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

npm install react-paginate

Langkah 3: Membuat Komponen Pagination Sederhana

Sekarang, mari kita buat sebuah 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 mengimpor 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 merender 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 Beberapa Gaya

Marilah kita menambahkan beberapa gaya dasar agar pagination terlihat bagus. Tambahkan yang berikut ini 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 begitu Anda mendapatkannya! Anda baru saja membuat sistem pagination sederhana tapi efektif di React. Ingat, pagination adalah seperti memotong pizza - itu membuat konten Anda lebih mudah dan menikmat untuk pengguna.

Berikut adalah ringkasan apa yang kita pelajari:

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

Saat Anda terus melanjutkan 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. Kesempatan tak terbatas!

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

Semoga Anda sukses, dan aplikasi React Anda selalu ter-paginasi sempurna!

Credits: Image by storyset