Hướng dẫn cơ bản về Phân trang trong ReactJS

Xin chào các bạnfuture nhà phát triển React! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới phân trang trong ReactJS. Đừng lo lắng nếu bạn chưa bao giờ viết mã trước đây - tôi sẽ là người hướng dẫn thân thiện của bạn, giải thích mọi thứ từng bước. Vậy, hãy lấy một tách cà phê, và chúng ta cùng bắt đầu!

Phân trang là gì?

Trước khi chúng ta nhảy vào mã, hãy hiểu phân trang là gì. Hãy tưởng tượng bạn đang đọc một cuốn sách. Thay vì hiển thị tất cả các trang cùng một lúc, cuốn sách được chia thành các phần dễ quản lý. Đó chính xác là điều phân trang làm cho nội dung web của bạn!

Trong phát triển web, phân trang là một kỹ thuật được sử dụng để chia một bộ dữ liệu lớn thành các phần nhỏ hơn, dễ quản lý hơn. Nó giống như một cuốn sách có nhiều trang, nơi mỗi trang hiển thị một phần nội dung.

Tại sao sử dụng phân trang trong React?

Bây giờ, bạn có thể tự hỏi, "Tại sao tôi phải phiền phức với phân trang?" Hãy để tôi kể cho bạn một câu chuyện nhỏ.

Ngày xưa, có một ứng dụng React cố gắng hiển thị 10.000 mục trên một trang duy nhất. Ứng dụng đáng thương đó đã cố gắng, sputtered, và cuối cùng là crash, để lại người dùng tức giận. Nhưng sau đó, một anh hùng tên là Phân trang đã đến cứu giúp, chia những 10.000 mục thành các trang nhỏ gọn, dễ quản lý với 10 mục mỗi trang. Ứng dụng chạy mượt mà, người dùng hài lòng, và mọi người sống hạnh phúc mãi mãi.

Bài học rút ra? Phân trang giúp với:

1. Cải thiện hiệu suất
2. Tốt hơn cho trải nghiệm người dùng
3. Dễ dàng hơn trong việc điều hướng

Bắt đầu với Phân trang trong React

Bây giờ chúng ta đã hiểu tại sao, hãy cùng làm việc với một chút mã!

Bước 1: Thiết lập dự án

Trước hết, chúng ta cần tạo một dự án React mới. Nếu bạn chưa cài đặt, hãy cài đặt Node.js và npm (Node Package Manager) trên máy tính của bạn. Sau đó, mở terminal và chạy:

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

Điều này sẽ tạo một dự án React mới và khởi động máy chủ phát triển.

Bước 2: Cài đặt các gói yêu cầu

Trong hướng dẫn này, chúng ta sẽ sử dụng một thư viện phân trang phổ biến叫做 react-paginate. Hãy cài đặt nó:

npm install react-paginate

Bước 3: Tạo một thành phần Phân trang đơn giản

Bây giờ, hãy tạo một tệp mới có tên Pagination.js trong thư mục src và thêm mã sau:

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;

Hãy phân tích điều này:

1. Chúng ta import các phụ thuộc cần thiết, bao gồm react-paginate.
2. Chúng ta tạo một thành phần Pagination nhận data và itemsPerPage làm props.
3. Chúng ta sử dụng hook useState để quản lý các mục hiện tại, số trang và offset của mục.
4. Hook useEffect tính toán các mục cần hiển thị dựa trên trang hiện tại.
5. Hàm handlePageClick cập nhật offset khi người dùng nhấp vào một số trang.
6. Chúng ta hiển thị các mục hiện tại và thành phần ReactPaginate.

Bước 4: Sử dụng thành phần Phân trang

Bây giờ, hãy sử dụng thành phần Pagination của chúng ta trong 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;

Tại đây, chúng ta đang tạo một mảng có 100 mục và truyền nó đến thành phần Pagination của chúng ta, cùng với itemsPerPage đặt là 10.

Bước 5: Thêm một chút phong cách

Hãy thêm một chút phong cách cơ bản để làm cho phân trang của chúng ta trông đẹp hơn. Thêm mã sau vào App.css của bạn:

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

Kết luận

Và thế là bạn đã tạo xong một hệ thống phân trang đơn giản nhưng hiệu quả trong React. Nhớ rằng, phân trang giống như việc cắt một miếng pizza - nó làm cho nội dung của bạn dễ tiêu hóa và thú vị hơn cho người dùng.

Dưới đây là một tóm tắt nhanh những gì chúng ta đã học:

Khái niệm	Mô tả
Phân trang	Một kỹ thuật để chia các bộ dữ liệu lớn thành các phần nhỏ hơn, dễ quản lý
react-paginate	Một thư viện React cung cấp các thành phần phân trang dễ sử dụng
useState	Một hook React được sử dụng để quản lý trạng thái trong các thành phần hàm
useEffect	Một hook React được sử dụng để thực hiện các hiệu ứng phụ trong các thành phần

Khi bạn tiếp tục hành trình với React, bạn sẽ tìm thấy nhiều cách để tùy chỉnh và cải thiện phân trang. Có thể bạn sẽ thêm chức năng tìm kiếm, hoặc có thể bạn sẽ tạo một hệ thốngfetch dữ liệu phức tạp hơn. Các khả năng là không giới hạn!

Nhớ rằng, chìa khóa để thành thạo React (hoặc bất kỳ kỹ năng lập trình nào khác) là thực hành. Vậy, đừng ngần ngại thử nghiệm với mã này, làm rối loạn mọi thứ, và học từ những sai lầm của bạn. Đó là cách chúng ta đều phát triển thành nhà phát triển.

Chúc mừng编码, và mong rằng các ứng dụng React của bạn luôn được phân trang hoàn hảo!

Credits: Image by storyset