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

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 41

  • @art_st2671
    @art_st2671 3 ปีที่แล้ว +11

    Если у кого-то не отрисовывается ничего после добавления новых страниц и Роутинга (это из-за 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();
    Топ контент, спасибо большое, ваши уроки помогают в реальной работе=)

    • @darth_revan3287
      @darth_revan3287 2 ปีที่แล้ว

      Огромное спасибо

    • @osad4enko
      @osad4enko ปีที่แล้ว

      a почему не useNavigate ?

  • @Nikitosss91
    @Nikitosss91 3 ปีที่แล้ว +19

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

  • @IhorVyshniakov
    @IhorVyshniakov 3 ปีที่แล้ว +4

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

  • @n1azar
    @n1azar 3 ปีที่แล้ว +2

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

  • @НиколайСеливанов-и2в
    @НиколайСеливанов-и2в 3 ปีที่แล้ว

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

  • @SergiyAntonyuk_PhD
    @SergiyAntonyuk_PhD 3 ปีที่แล้ว

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

  • @vladimirpetikov579
    @vladimirpetikov579 ปีที่แล้ว

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

  • @San-sd3bz
    @San-sd3bz ปีที่แล้ว

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

  • @ДмитрийКозливцев
    @ДмитрийКозливцев 3 ปีที่แล้ว +1

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

  • @АлександрДми
    @АлександрДми 3 ปีที่แล้ว +7

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

    • @OnlyLuck1000
      @OnlyLuck1000 3 ปีที่แล้ว +2

      +1 TS сейчас очень нужен, особенно джунам

  • @seoonlyRU
    @seoonlyRU 3 ปีที่แล้ว +2

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

  • @Дмитрийсекрет-н7о
    @Дмитрийсекрет-н7о 3 ปีที่แล้ว +1

    Круто. Спасибо.

  • @demiurgen13
    @demiurgen13 3 ปีที่แล้ว

    Спасибо за видео, было познавательно

  • @ТарасХомайко-к1щ
    @ТарасХомайко-к1щ หลายเดือนก่อน

    Было бы отлично обновить курс по Material UI , крайнее мало поянтной инфы на данный момент

  • @from_brest2631
    @from_brest2631 3 ปีที่แล้ว

    Просто и понятно

  • @volselongames4505
    @volselongames4505 ปีที่แล้ว

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

  • @michaelveselov589
    @michaelveselov589 ปีที่แล้ว +1

    Предложу свой вариант для решения проблемы location и history в версии 6 роутера:
    import useLocation -
    const location=useLocation()
    parseInt(location.search?.split('=')[1] || 1)
    и
    import useNavigate
    const navigate = useNavigate()
    navigate('/?page=1', { replace: true })

  • @druf5962
    @druf5962 ปีที่แล้ว

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

  • @stephencurry8078
    @stephencurry8078 3 ปีที่แล้ว

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

    • @mishanep
      @mishanep  3 ปีที่แล้ว

      React native пока не планирую. Не работал с ним.

  • @moses4327
    @moses4327 2 ปีที่แล้ว

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

    • @mishanep
      @mishanep  2 ปีที่แล้ว

      Без контекста не понять в чем суть вопроса.

    • @moses4327
      @moses4327 2 ปีที่แล้ว

      ​@@mishanepя изначально не понял в чем проблема, все вроде из видео переписал точь в точь, однако при первом же гет запросе мне такая вот ошибка вылезла, прошерстил весь интернет, особо выхода не нашел, запустил просто чисто axios, проверил работает ли ваще запросы, о чудо все работает, однако в реакт проекте уже нет. Все оказалось проще, после pages в ссылке забыл добавить знак =

  • @mars_family
    @mars_family 2 ปีที่แล้ว

    Михаил скажите а в работе приходится ли самому писать пагинацию, модальные окна итд(имеется ввиду без материал юай и других библиотек)?
    С какими из них вы бы посоветовали настоятельно ознакомиться ?🙏
    В коментах видел что вы предпочитаете Chakra Ui ( а вобще выбор библиотек чем обоснован? Личным приоритетом или на работе говорят что нужно использовать ?)
    Понимаю что это глупые вопросы но задать то их больше и некому 🙏🙏

    • @mishanep
      @mishanep  2 ปีที่แล้ว +1

      Раз на раз не приходится. Иногда самому всё приходится писать, иногда берутся готовые библиотеки - открытые или внутренние корпоративные. Решение обычно принимают архитекторы, лиды, синьоры. При хорошем знании одной ui библиотеки обычно не так сложно перестроиться на другую.

  • @b1tbuling
    @b1tbuling ปีที่แล้ว

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

  • @idenis28
    @idenis28 2 ปีที่แล้ว

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

    • @mishanep
      @mishanep  2 ปีที่แล้ว

      MUI предлагает UI компонент пагинации, он не какой-то запредельный, можно самостоятельно написать что-то подобное или попроще. Поэтому и без mui будет актуально.

    • @idenis28
      @idenis28 2 ปีที่แล้ว

      @@mishanep Хорошо, спасибо, просто учусь по Вашим видео и курсам на степике, думал есть урок пагинации на чистом реакте

  • @mityadima
    @mityadima 2 ปีที่แล้ว

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

    • @Александр-и9й6ъ
      @Александр-и9й6ъ 2 ปีที่แล้ว

      наши те, что из нашей папки) остальные из муи)

  • @Умарбек-Махмадиев
    @Умарбек-Махмадиев 10 หลายเดือนก่อน

    Если честно это точно ваше фамилия?

  • @ArcherDe-w6t
    @ArcherDe-w6t 2 ปีที่แล้ว

    Миша, вспомни уже

  • @ГригорийШустиков
    @ГригорийШустиков 2 ปีที่แล้ว +1

    Изначально поставил дизлайк. Т.к. не нашел в этом видео то, что искал. (как осуществить пагинацию, в локальном массиве постов) Но, внимательно пересмотрев видео, на 11й минуте нашел решение по настройке самой пагинации. (настройка компонента pagination библиотека materual UI, функция onChange) далее написал функцию и привязал её к пагинации. После этого, изменил свой дизлайк на лайк.

    • @kitsunaana9783
      @kitsunaana9783 ปีที่แล้ว +1

      Ты что? Совсем тупой? Не нашел то, что искал и начал ставить дизы...

    • @mikeempire
      @mikeempire ปีที่แล้ว

      @@kitsunaana9783 у тупых такая логика!

  • @АрчибальтГугенов
    @АрчибальтГугенов ปีที่แล้ว

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