ReactJS - Пагинация: Пособие для начинающих

Здравствуйте, будущие разработчики React! Сегодня мы отправимся в увлекательное путешествие в мир пагинации в ReactJS. Не волнуйтесь, если вы никогда раньше не программировали - я буду вашим доброжелательным гидом, объясняя все шаг за шагом. Так что возьмите кружку кофе и погружайтесь с нами!

Что такое пагинация?

Прежде чем мы перейдем к коду, давайте поймем, что такое пагинация. Представьте, что вы читаете книгу. Вместо того чтобы показывать вам все страницы сразу, книга разделена на удобные части. Именно это делает пагинация с вашим веб-контентом!

В веб-разработке пагинация - это техника, используемая для разделения большого набора данных на более мелкие, удобные для управления части. Это как книга с множеством страниц, где каждая страница показывает часть контента.

Почему использовать пагинацию в React?

Теперь вы, возможно, задаетесь вопросом: "Зачем мне возиться с пагинацией?" Давайте расскажу вам一个小кую историю.

Once upon a time, there was a React app that tried to display 10,000 items on a single page. The poor app struggled, sputtered, and eventually crashed, leaving users frustrated. But then, a hero named Pagination came to the rescue, splitting those 10,000 items into neat, manageable pages of 10 items each. The app ran smoothly, users were happy, and everyone lived happily ever after.

The moral of the story? Pagination helps with:

1. Improved performance
2. Better user experience
3. Easier navigation

Начало работы с пагинацией в React

Теперь, когда мы понимаем "why", давайте脏 our hands with some code!

Шаг 1: Настройка проекта

Сначала нам нужно создать новый проект React. Если вы еще не установили Node.js и npm (Node Package Manager) на ваш компьютер, установите их. Затем откройте ваш терминал и выполните:

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

Это создаст новый проект React и запустит сервер разработчика.

Шаг 2: Установка необходимых пакетов

Для этого руководства мы будем использовать популярную библиотеку для пагинации react-paginate. Давайте установим ее:

npm install react-paginate

Шаг 3: Создание простого компонента пагинации

Теперь создадим новый файл под названием Pagination.js в папке src и добавим следующий код:

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;

Давайте разберем это:

1. Мы импортируем необходимые зависимости, включая react-paginate.
2. Мы создаем компонент Pagination, который принимает data и itemsPerPage в качестве пропсов.
3. Мы используем хук useState для управления текущими элементами, количеством страниц и смещением элементов.
4. Хук useEffect calculates которые элементы отображать на основе текущей страницы.
5. Функция handlePageClick обновляет смещение, когда пользователь нажимает на номер страницы.
6. Мы рендерим текущие элементы и компонент ReactPaginate.

Шаг 4: Использование компонента пагинации

Теперь давайте используем наш компонент Pagination в 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;

Здесь мы создаем массив из 100 элементов и передаем его в наш компонент Pagination, а также устанавливаем itemsPerPage равным 10.

Шаг 5: Добавление стилей

Давайте добавим базовое стилирование, чтобы наша пагинация выглядела хорошо. Добавьте следующее в ваш 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;
}

Заключение

И вот оно! Вы только что создали простой, но эффективный system of pagination in React. Помните, пагинация - это как нарезание пиццы - она делает ваш контент более усвояемым и приятным для пользователей.

Вот быстрый обзор того, что мы узнали:

Concept	Description
Pagination	Technique to divide large sets of data into smaller, manageable parts
react-paginate	A React library that provides easy-to-use pagination components
useState	A React hook used to manage state in functional components
useEffect	A React hook used to perform side effects in components

As 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