Если у кого-то не отрисовывается ничего после добавления новых страниц и Роутинга (это из-за 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(); Топ контент, спасибо большое, ваши уроки помогают в реальной работе=)
Вот это тема. Обалденно, спасибо. Я бы хотел попросить на этом канале выкладывать как можно больше таких вот типовых задах для фронта, пагинацию, модалки, чекбоксы всякие, прогресс бары. Собрать здесь такой альманах готовых решений типовых задач. Спасибо)
Спасибо вам большое!!! Удивляет как вы с лёгкостью рассказываете про довольно сложные вещи. Ведь чтобы до конца понимать что вы делаете нужно иметь хорошую базу по js и react. Сам основную суть понял, но детали чтобы понять нужно ещё доки библиотек почитать. То что вы на реальном примере и коде все обьясняете это очень доходчиво🤘🙏
Очень полезный урок: лично для меня - как повторение и закрепление уже пройденного ранее. Мне очень нравиться манера изложения автора: предельно четкая, ясная и с очень понятными объяснениями, что ВЫДЕЛЯЕТ автора среди других видео блогеров.
Предложу свой вариант для решения проблемы location и history в версии 6 роутера: import useLocation - const location=useLocation() parseInt(location.search?.split('=')[1] || 1) и import useNavigate const navigate = useNavigate() navigate('/?page=1', { replace: true })
Здарова, а как поменять цвет цифр и кружков в пагинаторе на белый, просто у меня фон сайта тёмный и плохо видно, у него есть свойство color но оно только background выделенной цифры меняет
Как сделать так, чтобы в ссылке было не 'url/?page=10', а 'url?page=10'. Это сильно бросается в глаза, все таки это квери параметр, а не продолжение ссылки?
Михаил скажите а в работе приходится ли самому писать пагинацию, модальные окна итд(имеется ввиду без материал юай и других библиотек)? С какими из них вы бы посоветовали настоятельно ознакомиться ?🙏 В коментах видел что вы предпочитаете Chakra Ui ( а вобще выбор библиотек чем обоснован? Личным приоритетом или на работе говорят что нужно использовать ?) Понимаю что это глупые вопросы но задать то их больше и некому 🙏🙏
Раз на раз не приходится. Иногда самому всё приходится писать, иногда берутся готовые библиотеки - открытые или внутренние корпоративные. Решение обычно принимают архитекторы, лиды, синьоры. При хорошем знании одной ui библиотеки обычно не так сложно перестроиться на другую.
MUI предлагает UI компонент пагинации, он не какой-то запредельный, можно самостоятельно написать что-то подобное или попроще. Поэтому и без mui будет актуально.
@@mishanepя изначально не понял в чем проблема, все вроде из видео переписал точь в точь, однако при первом же гет запросе мне такая вот ошибка вылезла, прошерстил весь интернет, особо выхода не нашел, запустил просто чисто axios, проверил работает ли ваще запросы, о чудо все работает, однако в реакт проекте уже нет. Все оказалось проще, после pages в ссылке забыл добавить знак =
Изначально поставил дизлайк. Т.к. не нашел в этом видео то, что искал. (как осуществить пагинацию, в локальном массиве постов) Но, внимательно пересмотрев видео, на 11й минуте нашел решение по настройке самой пагинации. (настройка компонента pagination библиотека materual UI, функция onChange) далее написал функцию и привязал её к пагинации. После этого, изменил свой дизлайк на лайк.
![Как сделать пагинацию на React.js ? [React Pagination]](/img/n.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 ?
Вот это тема. Обалденно, спасибо. Я бы хотел попросить на этом канале выкладывать как можно больше таких вот типовых задах для фронта, пагинацию, модалки, чекбоксы всякие, прогресс бары. Собрать здесь такой альманах готовых решений типовых задач. Спасибо)
Спасибо вам большое!!! Удивляет как вы с лёгкостью рассказываете про довольно сложные вещи. Ведь чтобы до конца понимать что вы делаете нужно иметь хорошую базу по js и react. Сам основную суть понял, но детали чтобы понять нужно ещё доки библиотек почитать. То что вы на реальном примере и коде все обьясняете это очень доходчиво🤘🙏
Спасибо. Весь контент у тебя бомбовый. С первой зарплаты буду донатить. )
В учебном проекте на пагинацию ушел 1 час, благодаря этому видео. Мне подача информации зашла. Все четко и доступно. Спасибо!
Очень полезный урок: лично для меня - как повторение и закрепление уже пройденного ранее.
Мне очень нравиться манера изложения автора: предельно четкая, ясная и с очень понятными объяснениями, что ВЫДЕЛЯЕТ автора среди других видео блогеров.
Хороший урок. Михаил возьми за правило выпускать туториалы всегда с TypeScriptom.
+1 TS сейчас очень нужен, особенно джунам
Ты очень понятно объясняешь, большое уважение! Так может только чел, который разбирается в том, о чем говорит))
Вопрос снят. Ещё раз спасибо за уроки!
Круто! Полезно и своевременно!
По больше 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 })
Здарова, а как поменять цвет цифр и кружков в пагинаторе на белый, просто у меня фон сайта тёмный и плохо видно, у него есть свойство color но оно только background выделенной цифры меняет
Приветствую! Очень полезное видео.
Будут ролики про React Native? В Ютубе совсем нету, вчера помучился с настройки окружения для разработки
React native пока не планирую. Не работал с ним.
раскидал код с урока на компоненты, обернул в мемо. переход по страницам - 3 рендера. это же много для пагинации?
Как сделать так, чтобы в ссылке было не 'url/?page=10', а 'url?page=10'. Это сильно бросается в глаза, все таки это квери параметр, а не продолжение ссылки?
Михаил скажите а в работе приходится ли самому писать пагинацию, модальные окна итд(имеется ввиду без материал юай и других библиотек)?
С какими из них вы бы посоветовали настоятельно ознакомиться ?🙏
В коментах видел что вы предпочитаете Chakra Ui ( а вобще выбор библиотек чем обоснован? Личным приоритетом или на работе говорят что нужно использовать ?)
Понимаю что это глупые вопросы но задать то их больше и некому 🙏🙏
Раз на раз не приходится. Иногда самому всё приходится писать, иногда берутся готовые библиотеки - открытые или внутренние корпоративные. Решение обычно принимают архитекторы, лиды, синьоры. При хорошем знании одной ui библиотеки обычно не так сложно перестроиться на другую.
Для приложения без Material UI это актуально? Ещё не смотрел видео, в понедельник планирую сделать. Нужно добавить пагинацию на страничку
MUI предлагает UI компонент пагинации, он не какой-то запредельный, можно самостоятельно написать что-то подобное или попроще. Поэтому и без mui будет актуально.
@@mishanep Хорошо, спасибо, просто учусь по Вашим видео и курсам на степике, думал есть урок пагинации на чистом реакте
No 'Access-Control-Allow-Origin' header is present on the requested resource что делать?
Без контекста не понять в чем суть вопроса.
@@mishanepя изначально не понял в чем проблема, все вроде из видео переписал точь в точь, однако при первом же гет запросе мне такая вот ошибка вылезла, прошерстил весь интернет, особо выхода не нашел, запустил просто чисто axios, проверил работает ли ваще запросы, о чудо все работает, однако в реакт проекте уже нет. Все оказалось проще, после pages в ссылке забыл добавить знак =
Что такое эти стек , контейнер и ТД.... Где тут библиотечные компоненты , а где наши?
наши те, что из нашей папки) остальные из муи)
Если честно это точно ваше фамилия?
Миша, вспомни уже
Изначально поставил дизлайк. Т.к. не нашел в этом видео то, что искал. (как осуществить пагинацию, в локальном массиве постов) Но, внимательно пересмотрев видео, на 11й минуте нашел решение по настройке самой пагинации. (настройка компонента pagination библиотека materual UI, функция onChange) далее написал функцию и привязал её к пагинации. После этого, изменил свой дизлайк на лайк.
Ты что? Совсем тупой? Не нашел то, что искал и начал ставить дизы...
@@kitsunaana9783 у тупых такая логика!
Михаил, добрый день! Подскажите, пожалуйста, как у пагинации отключить анимацию, которая возникает при клике на кнопки из под курсора.