Как сделать пагинацию на React.js ? [React Pagination]
HTML-код
- Опубликовано: 6 июл 2024
- 🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 Patreon: / roman_timoshchuk
🔹 Buy me a coffee: www.buymeacoffee.com/tymoshchuk
🔹 Crypto:
👉 USDT(ERC20): 0xA4008910De17DB20c7505425316fF72d4C5Eed96
👉 USDT(BEP20): 0x4350c4E1C0bB35634C7fDE1cFB278BE0606E3822
👉 Binance Pay: 432902886
⏱️ Тайм-коды: ⏱️
00:00 Обзор приложения
01:11 Создаем проект
02:00 Создание state'ов
03:22 Работа с API
05:55 Создание компонента Countries
09:55 Определение текущей страницы
11:21 Создание компонента Paginate
17:55 БОНУС
📨 Сотрудничество ► timoschuk.roman@gmail.com
📨 Business inquiries ► timoschuk.roman@gmail.com
Что еще из базовых вещей вам было би интересно узнать, как реализовать ?)
Accordion
@@user-wl2xp8yo6x услышал)
Запросы с get, с базы данных
@@vlasmaskalenchik8393 есть на канале видосик про MERN, там есть запросы с базы
так же есть ролик про Next.js, там я тоже показываю и бэк в том числе)
Кастомный дропдаун) Спасибо)
Спасибо за пагинацию. Как раз то, что было нужно
Спасибо за урок, просто и понятно!
Просто великолепное видео, сделал у себя в проекте, получилось круто! Благодарность автору)
Большое спасибо за полезный и нужный урок.
Спасибо за урок, для меня пагинация оказалась сложной задачей, с помощью этого видео удалось разобраться))
Спасибо! Видео было очень полезным
спасибо, вместе с mui оч классно получилось !!!
Спасибо тебе за такой урок, возможно благодаря тебе получу свою первую работу
желаю удачи!
Спасибо, вы очень помогли!
Лучший, очень полезный материал!
без заморочек спасибо друг
Спасибо, очень круто
Спасибо за полезное видео 🤝
Спасибо помогло)
Спасибо Вам за проделанную работу, взял вариант на вооружение
очень полезые практические видиоролики . автору большое спасибо за работы . буквально начал один за другим смотреть
Спасибо)
интересно и просто) у меня сразу поулчилось
Супер спасибо огромное.
Спасибо огромное! Очень помогло)
рад помочь)
Спасибо дружище за труды
рад помочь)
Спасибо, очень помог)
Спасибо! Помог! Ни как не могу раскурить пагинацию)
спасибо все получилось, лучший просто, выручил очень сильно 😘😘
очень годно
Bro you nailed it !
От души, бро)
Очень полезный материал! Спасибо! Можно сделать полосу заполнения формы в React
очень круто, помог)
Рад помочь )
Дуже класне відео. Дякую
скоро буде відео про більш круту реалізацію пагінаціі)
Спасибо, друг. Выручил.
рад помочь)
best the best! спасибо
Братан, ты топ.
Круто, спасибо, мотаю на ус! А с react-router это можно как-то совместить?
спасибо мне помог
Дуже дякую!
Лайк
За урок спасибо! Можно как-то через реакт в пагинацию заливать контейнеры, содержащие картинки или видеофайлы в виде ссылок url к сторонней базе? ломаю голову не могу придумать как сделать по человечески)
Спасибо за познавательный контент! Очень здорово объясняешь.
Есть такой вопрос - на 6.20 ты разворачиваешь реакт компонент, набрав rfc, но у меня в vs code разворачивается классовый компонент, можешь подсказать, это у тебя плагин установлен или где-то в настройках задать?
ES7+ Snippets или как то так называется плагин, сейчас нет возможности проверить
Спасибо!
Спасибо за урок, все очень круто))
благодарю)
Спасибо. Было бы интересно со своими css классами, без bootstrap
Спасибо автору за видео но есть нюанс. Когда находишься на первой странице и нажимаешь Prev Page то все крашится и так же если дойти до конца списка и нажать Next Page. Хорошо бы предусмотреть условие
Застрял на выводе стран... Сначала сделал по своему - ошибка. Переписал символ в символ с видео. Та же ошибка -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.😭
Это перевод с канала BradTraversy? =) точнее TraversyMedia
В реальной жизни мы почти никогда не будем тянуть сразу все элементы, поэтому ожидал от видео что покажут как работать в таком случае
такая пагинация делается уже на бэке
а что за фишка при вводе rfc рисуется базовая разметка компонента.
Это react snipets устанавливается в вашей ide, полезные шорткаты, ответил если кто еще не знает)
у меня с 1 prev отрабатывает на пустой экран, подскажи плиз, как можно реализовать, что бы дойдя до 1 останавливался массив. Условия не помогли.
как сделать чтобы button светился на которую я нажал чтобы понимать на какой странице я нахожусь?
нужно условие, но как и где это написать?
Передай стейт текущей страницы пропсом в блок пагинации, и добавляй класс через проверку на его соответствие номеру из массива страниц, когда выводишь дивы с нумерацией
А почему нам нужно делать setLoading(true) , а потом setLoading(false) в useEffect, что это нам дает, без этого нельзя обойтись ? 5:14
У меня только Loading... и все? Сломалось чтоль?
Единственное что нет смысла использовать useState для country per page, можно просто в константу
Хороший урок,а то я у одного иностранца по имени Педро смотрел там у него была ошибка вроде все правильно но кнопки не работают и всего 1 цифра вместо 10
Найс кнопки сделал в конце)) Если карент пейдж равна 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. Почему не стоило добавлять кнопки? Удобный функционал для юзера.
Как быстро развернуть компонент? Что за магия такая?
это снипеты, в зависимости в чем кодишь, по разному. я использую для react в vscode расширения Reactjs code snippets создаешь файлик пишень в нем rsc, и нажимаешь таб или ентер, создается пустой компонент с импортом и експортом. ну так полно разных снипетов, обьяснил на примере этого
что то Api не работает
То что делает автор это не пагинация как таковая, а просто порционный рендеринг данных. Возможно для кейса со странами когда записей 200-300 этот кейс и будет полезен, но в большинстве случаев нет. Пагинация предполагает порционное получения данных с сервера. Представьте абстрактный пример что у вас ендпоинт отдает миллион строк, при данном подходе вам придется сначала этот миллион запросить, запросы без лимита могут создавать достаточно серьёзную нагрузку на бекенд, обязательно нужно передавать лимит или номер страницы в запросе. Если вы изучаете Реакт и ищите пример пагинации, то это не то что вам нужно
Это никуда не годится, а если апи возвращает список из тысячи и более элементов? Пагинация должна определяться на бэке, а не на фронте.
должна, но не всегда определяется)
@@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.