Это видео недоступно.
Сожалеем об этом.
Пагинация в React-приложении с Material-UI
HTML-код
- Опубликовано: 12 авг 2024
- Постраничный просмотр контента - типовая задача в
веб-разработке. Она может решаться исключительно на фронтенде, либо на бэкенде с UI реализацией на стороне клиента. В данном видео мы посмотрим как сделать пагинацию при готовом серверном решении с использованием компонента из библиотеки Material UI.
Сервис API из видео hn.algolia.com/api
Компонент пагинации mui.com/components/pagination/
Код из видео: codesandbox.io/s/nifty-beaver...
#react
00:00 Постановка задачи
02:01 Зависимости для примера
03:15 Базовая пагинация
17:16 Пагинация с роутингом
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep
![Как сделать пагинацию на React.js ? [React Pagination]](/img/1.gif)
Если у кого-то не отрисовывается ничего после добавления новых страниц и Роутинга (это из-за react-router-dom v6), замените:
===>
component={HomePage} ===> element={}
Для роутинга на нужно добавить path="*"
Upd: В v6 props сами не придут, поэтому достать их нужно вот так:
History:
import {createBrowserHistory} from "history";
const { current: history } = useRef(createBrowserHistory({ window }))
Location:
const location = useLocation();
Топ контент, спасибо большое, ваши уроки помогают в реальной работе=)
Огромное спасибо
a почему не useNavigate ?
Вот это тема. Обалденно, спасибо. Я бы хотел попросить на этом канале выкладывать как можно больше таких вот типовых задах для фронта, пагинацию, модалки, чекбоксы всякие, прогресс бары. Собрать здесь такой альманах готовых решений типовых задач. Спасибо)
Спасибо. Весь контент у тебя бомбовый. С первой зарплаты буду донатить. )
Хороший урок. Михаил возьми за правило выпускать туториалы всегда с TypeScriptom.
+1 TS сейчас очень нужен, особенно джунам
Спасибо вам большое!!! Удивляет как вы с лёгкостью рассказываете про довольно сложные вещи. Ведь чтобы до конца понимать что вы делаете нужно иметь хорошую базу по js и react. Сам основную суть понял, но детали чтобы понять нужно ещё доки библиотек почитать. То что вы на реальном примере и коде все обьясняете это очень доходчиво🤘🙏
Очень полезный урок: лично для меня - как повторение и закрепление уже пройденного ранее.
Мне очень нравиться манера изложения автора: предельно четкая, ясная и с очень понятными объяснениями, что ВЫДЕЛЯЕТ автора среди других видео блогеров.
В учебном проекте на пагинацию ушел 1 час, благодаря этому видео. Мне подача информации зашла. Все четко и доступно. Спасибо!
Круто! Полезно и своевременно!
По больше typescript, пожалуйста
Вопрос снят. Ещё раз спасибо за уроки!
Ты очень понятно объясняешь, большое уважение! Так может только чел, который разбирается в том, о чем говорит))
Круто. Спасибо.
спасибо))) чоткий мануал. лайк от самого известного сеошника и вебмастера СЕООНЛИ
Спасибо за видео, было познавательно
Просто и понятно
Предложу свой вариант для решения проблемы location и history в версии 6 роутера:
import useLocation -
const location=useLocation()
parseInt(location.search?.split('=')[1] || 1)
и
import useNavigate
const navigate = useNavigate()
navigate('/?page=1', { replace: true })
Как сделать так, чтобы в ссылке было не 'url/?page=10', а 'url?page=10'. Это сильно бросается в глаза, все таки это квери параметр, а не продолжение ссылки?
Приветствую! Очень полезное видео.
Будут ролики про React Native? В Ютубе совсем нету, вчера помучился с настройки окружения для разработки
React native пока не планирую. Не работал с ним.
раскидал код с урока на компоненты, обернул в мемо. переход по страницам - 3 рендера. это же много для пагинации?
Здарова, а как поменять цвет цифр и кружков в пагинаторе на белый, просто у меня фон сайта тёмный и плохо видно, у него есть свойство color но оно только background выделенной цифры меняет
No 'Access-Control-Allow-Origin' header is present on the requested resource что делать?
Без контекста не понять в чем суть вопроса.
@@mishanepя изначально не понял в чем проблема, все вроде из видео переписал точь в точь, однако при первом же гет запросе мне такая вот ошибка вылезла, прошерстил весь интернет, особо выхода не нашел, запустил просто чисто axios, проверил работает ли ваще запросы, о чудо все работает, однако в реакт проекте уже нет. Все оказалось проще, после pages в ссылке забыл добавить знак =
Михаил скажите а в работе приходится ли самому писать пагинацию, модальные окна итд(имеется ввиду без материал юай и других библиотек)?
С какими из них вы бы посоветовали настоятельно ознакомиться ?🙏
В коментах видел что вы предпочитаете Chakra Ui ( а вобще выбор библиотек чем обоснован? Личным приоритетом или на работе говорят что нужно использовать ?)
Понимаю что это глупые вопросы но задать то их больше и некому 🙏🙏
Раз на раз не приходится. Иногда самому всё приходится писать, иногда берутся готовые библиотеки - открытые или внутренние корпоративные. Решение обычно принимают архитекторы, лиды, синьоры. При хорошем знании одной ui библиотеки обычно не так сложно перестроиться на другую.
Для приложения без Material UI это актуально? Ещё не смотрел видео, в понедельник планирую сделать. Нужно добавить пагинацию на страничку
MUI предлагает UI компонент пагинации, он не какой-то запредельный, можно самостоятельно написать что-то подобное или попроще. Поэтому и без mui будет актуально.
@@mishanep Хорошо, спасибо, просто учусь по Вашим видео и курсам на степике, думал есть урок пагинации на чистом реакте
Что такое эти стек , контейнер и ТД.... Где тут библиотечные компоненты , а где наши?
наши те, что из нашей папки) остальные из муи)
Миша, вспомни уже
Если честно это точно ваше фамилия?
Изначально поставил дизлайк. Т.к. не нашел в этом видео то, что искал. (как осуществить пагинацию, в локальном массиве постов) Но, внимательно пересмотрев видео, на 11й минуте нашел решение по настройке самой пагинации. (настройка компонента pagination библиотека materual UI, функция onChange) далее написал функцию и привязал её к пагинации. После этого, изменил свой дизлайк на лайк.
Ты что? Совсем тупой? Не нашел то, что искал и начал ставить дизы...
@@kitsunaana9783 у тупых такая логика!
Михаил, добрый день! Подскажите, пожалуйста, как у пагинации отключить анимацию, которая возникает при клике на кнопки из под курсора.