Пагінація React: Прості та ефективні рішення

Пагінація react – це процес поділу вмісту веб-сторінок на окремі сторінки, що значно спрощує навігацію та сприйняття великих обсягів інформації.

У веб-розробці пагінація відіграє ключову роль, тому що дає змогу користувачам більш ефективно взаємодіяти з контентом, уникаючи перевантаження візуальної інформації та покращуючи загальний користувацький досвід. Вона допомагає організувати дані структуровано, полегшуючи пошук потрібної інформації, а також сприяє поліпшенню продуктивності сайту, оскільки зменшує час завантаження сторінок за рахунок зниження обсягу відображуваної інформації. Таким чином, правильна реалізація пагінації робить веб-додатки більш зручними та інтуїтивно зрозумілими для користувачів.

Прочитайте цю статтю від онлайн школи FoxmindEd і дізнайтеся про те, як зробити пагінацію react швидко, правильно і без проблем.

🖥️ Бажаєте стати Front End розробником? 💡 Долучайтеся до нашого онлайн-курсу та опануйте мистецтво створення користувацьких інтерфейсів із React!

Дізнатись більше

Основні концепції пагінації

Пагінація – це важливий концепт у веб-розробці, який дає змогу розбивати об’ємний контент на більш керовані та доступні частини, полегшуючи тим самим процес навігації для користувачів. Основна мета пагінації полягає в тому, щоб підвищити зручність взаємодії з сайтом, знижуючи візуальне перевантаження і покращуючи сприйняття інформації.

Існує кілька типів пагінації, найпоширенішими з яких є статична і динамічна пагінація react. Статична пагінація являє собою фіксовану кількість сторінок, на які розбивається контент. Користувачі можуть легко переходити між сторінками, використовуючи числові посилання або кнопки “Далі” і “Назад”. Це рішення часто застосовується на сайтах із передбачуваним обсягом даних, наприклад, у блогах або портфоліо.

Динамічна пагінація, своєю чергою, складніша й адаптивніша. Тут кількість сторінок генерується на основі поточних запитів і призначених для користувача дій, що дає змогу завантажувати та відображати інформацію в міру необхідності. Це особливо корисно на платформах з великим об’ємом даних, як-от інтернет-магазини або соціальні мережі, де необхідно оптимізувати завантаження контенту і забезпечити максимально зручний користувацький досвід.

Розуміння різних концепцій пагінації та їхня правильна реалізація відіграють критично важливу роль у створенні ефективних і зручних веб-застосунків, що сприяють позитивній взаємодії користувачів із контентом.

Встановлення та налаштування середовища розробки

Встановлення та налаштування середовища розробки для роботи з React є важливим першим кроком на шляху до створення сучасних веб-додатків. Правильна конфігурація середовища допоможе уникнути безлічі проблем у майбутньому і підвищить продуктивність розробки. У цьому тексті ми розглянемо необхідні інструменти та бібліотеки, а також кроки зі створення нового проєкту React.

Необхідні інструменти та бібліотеки

Node.js: Це JavaScript-оточення, що дає змогу запускати JavaScript-код поза браузером. Встановлення Node.js необхідне, оскільки він містить пакетний менеджер npm (Node Package Manager), який використовується для керування бібліотеками та залежностями.
npm: Пакетний менеджер, що входить до складу Node.js. Він дає змогу встановлювати, оновлювати та видаляти пакети, необхідні для розробки вашої програми.
Create React App: Це стартовий інструмент для швидкого і простого налаштування проектів на React. Він автоматично налаштовує потужний збирач проєктів і засоби розробки, дозволяючи зосередитися на написанні коду, а не на конфігураціях.
Будь ласка, також встановіть редактор коду: Рекомендується використовувати редактор коду, такий як Visual Studio Code, який підтримує безліч розширень, що спрощують розробку на React.

Кроки зі створення нового проекту React

Встановлення Node.js:

Завантажте останню стабільну версію Node.js з офіційного сайту (https://nodejs.org/).
Встановіть Node.js, дотримуючись інструкцій установника для вашої операційної системи.

Проверка установки:

Відкрийте термінал (або командний рядок) і введіть наведені нижче команди, щоб переконатися, що Node.js і npm встановлені коректно:

node -v

npm -v

Створення нового проєкту за допомогою Create React App:

У терміналі перейдіть у директорію, де ви хочете створити новий проєкт, і виконайте таку команду:

 npx create-react-app my-app

Тут my-app – назва вашого проєкту. Ви можете замінити її на будь-яке інше ім’я.

Перехід у директорію проекту:

Після успішного встановлення перейдіть у директорію вашого нового проєкту:

cd my-app

Запуск локального сервера:

Для запуску проєкту використовуйте таку команду:

npm start

Це відкриє у вашому браузері нове вікно з додатком, що працює на адресі http://localhost:3000/.

Редагування коду:

Відкрийте проект у вашому редакторі коду. Ви можете почати редагувати файл src/App.js, щоб вносити зміни у ваш додаток.

Тепер ваше середовище розробки для React готове до роботи. Встановивши необхідні інструменти та дотримуючись простих кроків, ви зможете швидко налаштувати новий додаток. Надалі ви можете додавати інші бібліотеки, як-от React Router або Redux, залежно від потреб вашого проєкту.

Створення базової структури програми

Створення застосунку на React починається з налаштування його структури. Це важливо для того, щоб проект залишався організованим і розширюваним. Нижче представлено рекомендовану структуру каталогів і файлів у проєкті на React.

Опис структури папок і файлів у проекті React

Стандартна структура застосунку може мати приблизно такий вигляд:

my-app/

│

├── public/

│   ├── index.html

│   └── favicon.ico

│

├── src/

│   ├── components/

│   │   ├── App.js

│   │   ├── Pagination.js

│   │   └── DataList.js

│   │

│   ├── hooks/

│   │   └── useFetch.js

│   │

│   ├── styles/

│   │   └── App.css

│   │

│   ├── App.js

│   ├── index.js

│   └── index.css

│

├── package.json

└── README.md

Основні компоненти

App.js: Головний компонент програми, який пов’язує всі інші компоненти воєдино.
Pagination.js: Компонент для керування відображенням сторінок.
DataList.js: Компонент для відображення списку даних.

// src/components/App.js

import React from 'react';

import DataList from './DataList';

import Pagination from './Pagination';

const App = () => {

    return (

        <div>

            <h1>Список данных</h1>

            <DataList />

            <Pagination />

        </div>

    );

};

export default App;

Реалізація статичної пагінації

Статична пагінація – це підхід, за якого ви відображаєте фіксовану кількість елементів на сторінці, не звертаючись за новими даними після початкового завантаження.

Покрокове керівництво зі створення компонента пагінації

Створіть компонент Pagination.js.

// src/components/Pagination.js

import React from 'react';

const Pagination = ({ totalPages, currentPage, onPageChange }) => {

    return (

        <div className="pagination">

            {[...Array(totalPages)].map((_, index) => (

                <button

                    key={index}

                    onClick={() => onPageChange(index + 1)}

                    className={currentPage === index + 1 ? 'active' : ''}

                >

                    {index + 1}

                </button>

            ))}

        </div>

    );

};

export default Pagination;

Використовуйте компонент Pagination в DataList.js, додавши логіку для обробки поточної сторінки та відображення даних.

// src/components/DataList.js

import React, { useState } from 'react';

import Pagination from './Pagination';

const DataList = () => {

    const [currentPage, setCurrentPage] = useState(1);

    const itemsPerPage = 10;

    const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`); // 100 items

    const totalPages = Math.ceil(data.length / itemsPerPage);

    const displayedItems = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

    return (

        <>

            <ul>

                {displayedItems.map(item => (

                    <li key={item}>{item}</li>

                ))}

            </ul>

            <Pagination totalPages={totalPages} currentPage={currentPage} onPageChange={setCurrentPage} />

        </>

    );

};

export default DataList;

Реалізація динамічної пагінації

Динамічна пагінація дає змогу завантажувати дані в міру необхідності, що краще підходить для великих обсягів даних і дає змогу економити ресурси.

FoxmindEd – це навчальний центр, що має велику різноманітність напрямків курсів для новачків та програмістів з досвідом!

Тільки починаєте свій шлях в ІТ? Спробуйте курси Start

Вже маєте базові навички програмування? Тоді
курси Junior саме для вас.

Хочете поглибити свої знання в ІТ? Ми маємо курси Middle/Senior

Пояснення концепції динамічної пагінації

Динамічна пагінація передбачає, що дані завантажуються за запитом під час переходу між сторінками. Це зменшує обсяг даних, що завантажуються, що сприятливо позначається на продуктивності та часі завантаження.

Покрокове керівництво зі створення компонента динамічної пагінації:

Створіть кастомний хук useFetch.js для отримання даних із сервера.

// src/hooks/useFetch.js

import { useEffect, useState } from 'react';

const useFetch = (url) => {

    const [data, setData] = useState([]);

    const [loading, setLoading] = useState(true);

    const [error, setError] = useState(null);

    useEffect(() => {

        const fetchData = async () => {

            try {

                const response = await fetch(url);

                if (!response.ok) {

                    throw new Error('Network response was not ok');

                }

                const result = await response.json();

                setData(result);

            } catch (error) {

                setError(error);

            } finally {

                setLoading(false);

            }

        };

        fetchData();

    }, [url]);

    return { data, loading, error };

};

export default useFetch;

Оновіть компонент DataList.js, щоб завантажувати дані динамічно.

// src/components/DataList.js

import React, { useState } from 'react';

import Pagination from './Pagination';

import useFetch from '../hooks/useFetch';

const DataList = () => {

    const [currentPage, setCurrentPage] = useState(1);

    const itemsPerPage = 10;

    const { data, loading, error } = useFetch('https://api.example.com/data');

    const totalPages = Math.ceil(data.length / itemsPerPage);

    const displayedItems = data.slice((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage);

    if (loading) return <p>Загрузка...</p>;

    if (error) return <p>Сталася помилка: {error.message}</p>;

    return (

        <>

            <ul>

                {displayedItems.map(item => (

                    <li key={item.id}>{item.name}</li>

                ))}

            </ul>

            <Pagination totalPages={totalPages} currentPage={currentPage} onPageChange={setCurrentPage} />

        </>

    );

};

export default DataList;

Опрацювання помилок і поліпшення користувацького інтерфейсу

Робота з пагінацією вимагає врахування можливих помилок і поліпшення користувальницького інтерфейсу для комфортнішої взаємодії.

Методи обробки помилок:

Відсутність даних: Відображення повідомлення про те, що дані недоступні, коли їх немає.
Помилки мережі: Детальні повідомлення про помилки, які можуть допомогти користувачеві зрозуміти, що саме сталося.

Поліпшення UX:

Індикатори завантаження: Показувати індикатор завантаження під час отримання даних.
Повідомлення про помилки: Повідомлення про помилки, щоб користувач міг зрозуміти, що щось пішло не так.

// Використаний раніше код уже включає обробки завантаження і помилки.

Підпишіться на наш Ютуб-канал! Корисні відео для програмістів чекають на вас! YouTube

Оберіть свій курс програмування! Шлях до кар’єри програміста починається тут! Подивитись

Оптимізація продуктивності

Оптимізація продуктивності компонентів пагінації – важливий аспект, який допомагає вашому додатку працювати швидше і ефективніше.

Рекомендації щодо оптимізації:

React.memo: Використовуйте цей метод для запобігання непотрібних рендерів вашого компонента пагінації.
Ледаче завантаження: Реалізуйте динамічне підвантаження даних і chunking, щоб завантажувати тільки ті дані, які необхідні в даний момент.

import React from 'react';

const MemoizedPagination = React.memo(Pagination);

Тестування та налагодження

Тестування – ключова частина розробки. Це дає змогу виявити помилки і переконатися, що ваш код працює так, як задумано.

Методи тестування компонентів пагінації:

Jest: Використовується для написання юніт-тестів.
React Testing Library: дає змогу тестувати компоненти React, фокусуючись на тому, як вони поводяться.

Приклад простого тесту для компонента пагінації:

// src/components/Pagination.test.js

import React from 'react';

import { render, screen, fireEvent } from '@testing-library/react';

import Pagination from './Pagination';

test('renders pagination buttons', () => {

    const onPageChange = jest.fn();

    render(<Pagination totalPages={5} currentPage={1} onPageChange={onPageChange} />);

    const buttons = screen.getAllByRole('button');

    expect(buttons).toHaveLength(5);

    fireEvent.click(buttons[1]);

    expect(onPageChange).toHaveBeenCalledWith(2);

});

Поради з налагодження:

Використовуйте інструменти розробника в браузері для відстеження стану і пропсів.
Логи консолі можуть допомогти у виявленні помилок.

Ця структура й описані методи допоможуть вам створити ефективний, чуйний і зрозумілий застосунок на React із реалізацією пагінації.

Висновок

На закінчення, реалізація пагінації в React є важливим аспектом розробки інтерфейсів, що дає змогу поліпшити користувацький досвід під час роботи з великими обсягами даних. Ми розглянули ключові підходи до створення пагінації, включно зі статичною і динамічною пагінацією, а також використання компонентів для структурування коду і поліпшення його читабельності. Статична пагінація react js підходить для додатків із фіксованим набором даних, що дає змогу уникнути зайвих запитів і зменшити навантаження на сервер. З іншого боку, динамічна пагінація надає можливість завантажувати дані в міру необхідності, що ідеально підходить для великих масивів інформації. Також ми обговорили створення користувацького інтерфейсу для пагінації, включно з навігацією та відображенням поточної сторінки, що сприяє інтуїтивній навігації. Загалом, правильна реалізація пагінації дає змогу оптимізувати продуктивність застосунку та робить його зручнішим для користувача!

Як зробити пагінацію React швидко, правильно і без проблем