Пагинация в React-приложении с Material-UI

Постраничный просмотр контента - типовая задача в
веб-разработке. Она может решаться исключительно на фронтенде, либо на бэкенде с UI реализацией на стороне клиента. В данном видео мы посмотрим как сделать пагинацию при готовом серверном решении с использованием компонента из библиотеки Material UI.

#react

00:00 Постановка задачи
02:01 Зависимости для примера
03:15 Базовая пагинация
17:16 Пагинация с роутингом

Мои курсы по вебу с купонами:

📢 Поддержка канала:

[Nikitosss]

Вот это тема. Обалденно, спасибо. Я бы хотел попросить на этом канале выкладывать как можно больше таких вот типовых задах для фронта, пагинацию, модалки, чекбоксы всякие, прогресс бары. Собрать здесь такой альманах готовых решений типовых задач. Спасибо)

[art_st]

Если у кого-то не отрисовывается ничего после добавления новых страниц и Роутинга (это из-за react-router-dom v6), замените:
<Switch> ===> <Routes>
component={HomePage} ===> element={<HomePage />}
Для роутинга на <NotFound /> нужно добавить path="*"

Upd: В v6 props сами не придут, поэтому достать их нужно вот так:
History:
import {createBrowserHistory} from "history";
const { current: history } = useRef(createBrowserHistory({ window }))
Location:
const location = useLocation();

Топ контент, спасибо большое, ваши уроки помогают в реальной работе=)

[IhorVyshniakov]

Спасибо вам большое!!! Удивляет как вы с лёгкостью рассказываете про довольно сложные вещи. Ведь чтобы до конца понимать что вы делаете нужно иметь хорошую базу по js и react. Сам основную суть понял, но детали чтобы понять нужно ещё доки библиотек почитать. То что вы на реальном примере и коде все обьясняете это очень доходчиво🤘🙏

[SergiyAntonyuk_PhD]

Очень полезный урок: лично для меня - как повторение и закрепление уже пройденного ранее.

Мне очень нравиться манера изложения автора: предельно четкая, ясная и с очень понятными объяснениями, что ВЫДЕЛЯЕТ автора среди других видео блогеров.

[ueljtoq]

В учебном проекте на пагинацию ушел 1 час, благодаря этому видео. Мне подача информации зашла. Все четко и доступно. Спасибо!

[nazar]

Спасибо. Весь контент у тебя бомбовый. С первой зарплаты буду донатить. )

[ffptheo]

Круто! Полезно и своевременно!
По больше typescript, пожалуйста

[San-sdbz]

Ты очень понятно объясняешь, большое уважение! Так может только чел, который разбирается в том, о чем говорит))

[vladimirpetikov]

Вопрос снят. Ещё раз спасибо за уроки!

[cwxhnvt]

Хороший урок. Михаил возьми за правило выпускать туториалы всегда с TypeScriptom.

[seoonlyRU]

спасибо))) чоткий мануал. лайк от самого известного сеошника и вебмастера СЕООНЛИ

[michaelveselov]

Предложу свой вариант для решения проблемы location и history в версии 6 роутера:

import useLocation -
const location=useLocation()
|| 1)

и

import useNavigate
const navigate = useNavigate()
navigate('/?page=1', { replace: true })

[stephencurry]

Приветствую! Очень полезное видео.
Будут ролики про React Native? В Ютубе совсем нету, вчера помучился с настройки окружения для разработки

[druf]

раскидал код с урока на компоненты, обернул в мемо. переход по страницам - 3 рендера. это же много для пагинации?

[volselongames]

Здарова, а как поменять цвет цифр и кружков в пагинаторе на белый, просто у меня фон сайта тёмный и плохо видно, у него есть свойство color но оно только background выделенной цифры меняет

[silverlr]

Как сделать так, чтобы в ссылке было не 'url/?page=10', а 'url?page=10'. Это сильно бросается в глаза, все таки это квери параметр, а не продолжение ссылки?

[idenis]

Для приложения без Material UI это актуально? Ещё не смотрел видео, в понедельник планирую сделать. Нужно добавить пагинацию на страничку

[moses]

No 'Access-Control-Allow-Origin' header is present on the requested resource что делать?

[mars_family]

Михаил скажите а в работе приходится ли самому писать пагинацию, модальные окна итд(имеется ввиду без материал юай и других библиотек)?

С какими из них вы бы посоветовали настоятельно ознакомиться ?🙏

В коментах видел что вы предпочитаете Chakra Ui ( а вобще выбор библиотек чем обоснован? Личным приоритетом или на работе говорят что нужно использовать ?)

Понимаю что это глупые вопросы но задать то их больше и некому 🙏🙏

[mityadima]

Что такое эти стек, контейнер и ТД.... Где тут библиотечные компоненты , а где наши?