Спасибо автору за видео но есть нюанс. Когда находишься на первой странице и нажимаешь Prev Page то все крашится и так же если дойти до конца списка и нажать Next Page. Хорошо бы предусмотреть условие
Так то я сделал, а вот что бы как на озоне например показывалось всего 7 кнопок и в них динамически менялись номера страниц и активная кнопка страницы не уходила дальше например 3 кнопки. Сделал только на js, html,css
Застрял на выводе стран... Сначала сделал по своему - ошибка. Переписал символ в символ с видео. Та же ошибка -Objects are not valid as a React child (found: object with keys {common, official, nativeName}). If you meant to render a collection of children, use an array instead.😭
То что делает автор это не пагинация как таковая, а просто порционный рендеринг данных. Возможно для кейса со странами когда записей 200-300 этот кейс и будет полезен, но в большинстве случаев нет. Пагинация предполагает порционное получения данных с сервера. Представьте абстрактный пример что у вас ендпоинт отдает миллион строк, при данном подходе вам придется сначала этот миллион запросить, запросы без лимита могут создавать достаточно серьёзную нагрузку на бекенд, обязательно нужно передавать лимит или номер страницы в запросе. Если вы изучаете Реакт и ищите пример пагинации, то это не то что вам нужно
За урок спасибо! Можно как-то через реакт в пагинацию заливать контейнеры, содержащие картинки или видеофайлы в виде ссылок url к сторонней базе? ломаю голову не могу придумать как сделать по человечески)
Спасибо за познавательный контент! Очень здорово объясняешь. Есть такой вопрос - на 6.20 ты разворачиваешь реакт компонент, набрав rfc, но у меня в vs code разворачивается классовый компонент, можешь подсказать, это у тебя плагин установлен или где-то в настройках задать?
Передай стейт текущей страницы пропсом в блок пагинации, и добавляй класс через проверку на его соответствие номеру из массива страниц, когда выводишь дивы с нумерацией
Хороший урок,а то я у одного иностранца по имени Педро смотрел там у него была ошибка вроде все правильно но кнопки не работают и всего 1 цифра вместо 10
это снипеты, в зависимости в чем кодишь, по разному. я использую для react в vscode расширения Reactjs code snippets создаешь файлик пишень в нем rsc, и нажимаешь таб или ентер, создается пустой компонент с импортом и експортом. ну так полно разных снипетов, обьяснил на примере этого
@@lets_try_js if(currentPage !== 1) Хватило такого условия в prevPage чтоб пофиксить и аналогичного в nextPage. Почему не стоило добавлять кнопки? Удобный функционал для юзера.
@@lets_try_js и к тому же отображать все 35 элементов пагинации эт очень стремная идея, нужно сокращать до 1, 2, 3 ... 15 ... 34, 35, 36 суть надеюсь уловил
@@lets_try_js ну я думаю в конце можно было сделать ремарку на это, мол вот я все это показал но еще лучше делать так, а то будут потом все такие пагинации делать )) я кстати сам react не так долго изучаю , базовые хуки выучил , интересная тема когда нужно думать только о логике без постоянных манипуляций с дом деревом
Что еще из базовых вещей вам было би интересно узнать, как реализовать ?)
Accordion
@@ТёмаКоролёв-к6ф услышал)
Запросы с get, с базы данных
@@vlasmaskalenchik8393 есть на канале видосик про MERN, там есть запросы с базы
так же есть ролик про Next.js, там я тоже показываю и бэк в том числе)
Кастомный дропдаун) Спасибо)
Спасибо за урок, для меня пагинация оказалась сложной задачей, с помощью этого видео удалось разобраться))
Спасибо тебе за такой урок, возможно благодаря тебе получу свою первую работу
желаю удачи!
Получил?
Спасибо Вам за проделанную работу, взял вариант на вооружение
Просто великолепное видео, сделал у себя в проекте, получилось круто! Благодарность автору)
Спасибо за пагинацию. Как раз то, что было нужно
Дуже класне відео. Дякую
скоро буде відео про більш круту реалізацію пагінаціі)
Лучший, очень полезный материал!
Спасибо, вы очень помогли!
Спасибо за урок, просто и понятно!
спасибо, вместе с mui оч классно получилось !!!
спасибо все получилось, лучший просто, выручил очень сильно 😘😘
Спасибо! Помог! Ни как не могу раскурить пагинацию)
Bro you nailed it !
без заморочек спасибо друг
Спасибо дружище за труды
рад помочь)
Спасибо! Видео было очень полезным
Спасибо автору за видео но есть нюанс. Когда находишься на первой странице и нажимаешь Prev Page то все крашится и так же если дойти до конца списка и нажать Next Page. Хорошо бы предусмотреть условие
best the best! спасибо
Спасибо помогло)
Братан, ты топ.
Спасибо огромное! Очень помогло)
рад помочь)
у меня с 1 prev отрабатывает на пустой экран, подскажи плиз, как можно реализовать, что бы дойдя до 1 останавливался массив. Условия не помогли.
В реальной жизни мы почти никогда не будем тянуть сразу все элементы, поэтому ожидал от видео что покажут как работать в таком случае
такая пагинация делается уже на бэке
Спасибо за полезное видео 🤝
Спасибо, очень круто
От души, бро)
интересно и просто) у меня сразу поулчилось
Дуже дякую!
Круто, спасибо, мотаю на ус! А с react-router это можно как-то совместить?
очень круто, помог)
Рад помочь )
Спасибо, очень помог)
Очень полезный материал! Спасибо! Можно сделать полосу заполнения формы в React
Так то я сделал, а вот что бы как на озоне например показывалось всего 7 кнопок и в них динамически менялись номера страниц и активная кнопка страницы не уходила дальше например 3 кнопки. Сделал только на js, html,css
Это перевод с канала BradTraversy? =) точнее TraversyMedia
очень годно
Спасибо, друг. Выручил.
рад помочь)
спасибо мне помог
Застрял на выводе стран... Сначала сделал по своему - ошибка. Переписал символ в символ с видео. Та же ошибка -Objects are not valid as a React child (found: object with keys {common, official, nativeName}). If you meant to render a collection of children, use an array instead.😭
То что делает автор это не пагинация как таковая, а просто порционный рендеринг данных. Возможно для кейса со странами когда записей 200-300 этот кейс и будет полезен, но в большинстве случаев нет. Пагинация предполагает порционное получения данных с сервера. Представьте абстрактный пример что у вас ендпоинт отдает миллион строк, при данном подходе вам придется сначала этот миллион запросить, запросы без лимита могут создавать достаточно серьёзную нагрузку на бекенд, обязательно нужно передавать лимит или номер страницы в запросе. Если вы изучаете Реакт и ищите пример пагинации, то это не то что вам нужно
За урок спасибо! Можно как-то через реакт в пагинацию заливать контейнеры, содержащие картинки или видеофайлы в виде ссылок url к сторонней базе? ломаю голову не могу придумать как сделать по человечески)
Спасибо за познавательный контент! Очень здорово объясняешь.
Есть такой вопрос - на 6.20 ты разворачиваешь реакт компонент, набрав rfc, но у меня в vs code разворачивается классовый компонент, можешь подсказать, это у тебя плагин установлен или где-то в настройках задать?
ES7+ Snippets или как то так называется плагин, сейчас нет возможности проверить
Спасибо!
как сделать чтобы button светился на которую я нажал чтобы понимать на какой странице я нахожусь?
нужно условие, но как и где это написать?
Передай стейт текущей страницы пропсом в блок пагинации, и добавляй класс через проверку на его соответствие номеру из массива страниц, когда выводишь дивы с нумерацией
Спасибо за урок, все очень круто))
благодарю)
а что за фишка при вводе rfc рисуется базовая разметка компонента.
Это react snipets устанавливается в вашей ide, полезные шорткаты, ответил если кто еще не знает)
Спасибо. Было бы интересно со своими css классами, без bootstrap
Единственное что нет смысла использовать useState для country per page, можно просто в константу
У меня только Loading... и все? Сломалось чтоль?
Хороший урок,а то я у одного иностранца по имени Педро смотрел там у него была ошибка вроде все правильно но кнопки не работают и всего 1 цифра вместо 10
Лайк
что то Api не работает
Как быстро развернуть компонент? Что за магия такая?
это снипеты, в зависимости в чем кодишь, по разному. я использую для react в vscode расширения Reactjs code snippets создаешь файлик пишень в нем rsc, и нажимаешь таб или ентер, создается пустой компонент с импортом и експортом. ну так полно разных снипетов, обьяснил на примере этого
Найс кнопки сделал в конце)) Если карент пейдж равна 1 пожмякай на превпейдж кнопку и глянь че будет)
ну это легко поправляется)
хотя не стоило все таки эти кнопки добавлять
Сделайте доп проверку на номер страницы, это не так сложно:
function prevPage() {
setCurrentPage(pageNumber => pageNumber === 1 ? 1 : pageNumber - 1)
}
function nextPage() {
setCurrentPage(pageNumber =>
pageNumber === Math.ceil(countries.length / countriesPerPages) ?
pageNumber : pageNumber + 1)
}
@@lets_try_js if(currentPage !== 1) Хватило такого условия в prevPage чтоб пофиксить и аналогичного в nextPage. Почему не стоило добавлять кнопки? Удобный функционал для юзера.
Это никуда не годится, а если апи возвращает список из тысячи и более элементов? Пагинация должна определяться на бэке, а не на фронте.
должна, но не всегда определяется)
@@lets_try_js Тогда у этого веб приложения нет перспектив.
@@lets_try_js и к тому же отображать все 35 элементов пагинации эт очень стремная идея, нужно сокращать до 1, 2, 3 ... 15 ... 34, 35, 36 суть надеюсь уловил
@@awenn2015 ясное дело)
тут прям совсем база, что бы понимать, как это работает
исходя из этого, уже можно сделать так, как ты написал
@@lets_try_js ну я думаю в конце можно было сделать ремарку на это, мол вот я все это показал но еще лучше делать так, а то будут потом все такие пагинации делать )) я кстати сам react не так долго изучаю , базовые хуки выучил , интересная тема когда нужно думать только о логике без постоянных манипуляций с дом деревом
очень много недостатков, не продуман урок
сел делать, а аппи не работает...
Любую апишку можно взять )
@@lets_try_js Взял это..Спасибо за урок"!!!!
стран стало 251, и это нужно уже 26 страниц, но math.floor не покажет тебе 26 страницу, поэтому лучше Math.ceil.
Супер спасибо огромное.
Большое спасибо за полезный и нужный урок.