Как сделать пагинацию на React.js ? [React Pagination]

🏆 Поднять мотивацию и получить плюшки(сборка, исходники, чат со мной):
🔹 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 БОНУС
📨 Сотрудничество ► [e-mail]
📨 Business inquiries ► [e-mail]

[@lets_try_js]

Что еще из базовых вещей вам было би интересно узнать, как реализовать ?)

[@user-wl2xp8yo6x]

Accordion

[@lets_try_js]

@@user-wl2xp8yo6x услышал)

[@vlasmaskalenchik8393]

Запросы с get, с базы данных

[@lets_try_js]

@@vlasmaskalenchik8393 есть на канале видосик про MERN, там есть запросы с базы так же есть ролик про Next.js, там я тоже показываю и бэк в том числе)

[@user-mm5id3ec6c]

Кастомный дропдаун) Спасибо)

[@littlegrownbeats]

Просто великолепное видео, сделал у себя в проекте, получилось круто! Благодарность автору)

[@user-rp8oy2kf5d]

Спасибо за пагинацию. Как раз то, что было нужно

[@Ivan56792]

Спасибо за урок, просто и понятно!

[@user-kw5yy1gi7e]

Большое спасибо за полезный и нужный урок.

[@sharkman6434]

спасибо, вместе с mui оч классно получилось !!!

[@user-yt2dj8cv4j]

Спасибо! Видео было очень полезным

[@ilunya_kozyr]

Спасибо тебе за такой урок, возможно благодаря тебе получу свою первую работу

[@lets_try_js]

желаю удачи!

[@fuckthereijkee]

очень полезые практические видиоролики . автору большое спасибо за работы . буквально начал один за другим смотреть

[@lets_try_js]

Спасибо)

[@niakhai3659]

Спасибо за урок, для меня пагинация оказалась сложной задачей, с помощью этого видео удалось разобраться))

[@wastend917]

Лучший, очень полезный материал!

[@bentonfraizer69]

Спасибо за полезное видео 🤝

[@evgenya_pan]

Спасибо, вы очень помогли!

[@user-vp9qe7gh1h]

Спасибо Вам за проделанную работу, взял вариант на вооружение

[@user-kq2kf8ws6x]

спасибо все получилось, лучший просто, выручил очень сильно 😘😘

[@user-sy1sy3gu2t]

Спасибо, очень круто

[@adeil8089]

Спасибо огромное! Очень помогло)

[@lets_try_js]

рад помочь)

[@daniil__kryuchkov]

интересно и просто) у меня сразу поулчилось

[@haykkhachatryan8461]

без заморочек спасибо друг

[@Nick-hq8of]

Спасибо дружище за труды

[@lets_try_js]

рад помочь)

[@novikov-pavel]

Спасибо, очень помог)

[@yaroslavzef7267]

Спасибо помогло)

[@romanpityul8805]

Спасибо! Помог! Ни как не могу раскурить пагинацию)

[@user-zt2ot2wj9p]

Супер спасибо огромное.

[@user-tg3bj1vu9i]

Очень полезный материал! Спасибо! Можно сделать полосу заполнения формы в React

[@dever312]

Bro you nailed it !

[@Grishenkovvv]

Спасибо, друг. Выручил.

[@lets_try_js]

рад помочь)

[@karinazhuro2976]

очень круто, помог)

[@lets_try_js]

Рад помочь )

[@user-ls3xb5uh4n]

Дуже класне відео. Дякую

[@lets_try_js]

скоро буде відео про більш круту реалізацію пагінаціі)

[@nk_77777]

От души, бро)

[@user-do8kg9fj1u]

очень годно

[@fisher9340]

best the best! спасибо

[@kadirov_style]

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

[@user-kc2yb5xt3u]

Круто, спасибо, мотаю на ус! А с react-router это можно как-то совместить?

[@Sergentors]

Братан, ты топ.

[@andriishpontak1000]

Дуже дякую!

[@vadimniziev5489]

Спасибо за урок, все очень круто))

[@lets_try_js]

благодарю)

[@drdev_blog]

За урок спасибо! Можно как-то через реакт в пагинацию заливать контейнеры, содержащие картинки или видеофайлы в виде ссылок url к сторонней базе? ломаю голову не могу придумать как сделать по человечески)

[@bama2619]

Спасибо. Было бы интересно со своими css классами, без bootstrap

[@user-wt9yd5wz2e]

Спасибо за познавательный контент! Очень здорово объясняешь. Есть такой вопрос - на 6.20 ты разворачиваешь реакт компонент, набрав rfc, но у меня в vs code разворачивается классовый компонент, можешь подсказать, это у тебя плагин установлен или где-то в настройках задать?

[@lets_try_js]

ES7+ Snippets или как то так называется плагин, сейчас нет возможности проверить

[@user-wt9yd5wz2e]

Спасибо!

[@user-uq7jo6tm8z]

Лайк

[@blackwood8816]

у меня с 1 prev отрабатывает на пустой экран, подскажи плиз, как можно реализовать, что бы дойдя до 1 останавливался массив. Условия не помогли.

[@ovpunx]

Застрял на выводе стран... Сначала сделал по своему - ошибка. Переписал символ в символ с видео. Та же ошибка -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.😭

[@elconrel9665]

Спасибо автору за видео но есть нюанс. Когда находишься на первой странице и нажимаешь Prev Page то все крашится и так же если дойти до конца списка и нажать Next Page. Хорошо бы предусмотреть условие

[@mistersmith6752]

Это перевод с канала BradTraversy? =) точнее TraversyMedia

[@user-rr7yr9ml9p]

В реальной жизни мы почти никогда не будем тянуть сразу все элементы, поэтому ожидал от видео что покажут как работать в таком случае

[@lets_try_js]

такая пагинация делается уже на бэке

[@Pitbull20121000]

а что за фишка при вводе rfc рисуется базовая разметка компонента.

[@user-jo3bo4xp3v]

Это react snipets устанавливается в вашей ide, полезные шорткаты, ответил если кто еще не знает)

[@MrUnknownman1986]

А почему нам нужно делать setLoading(true) , а потом setLoading(false) в useEffect, что это нам дает, без этого нельзя обойтись ? 5:14

[@JavaScriptcher]

У меня только Loading... и все? Сломалось чтоль?

[@askarzhaanbaev5834]

как сделать чтобы button светился на которую я нажал чтобы понимать на какой странице я нахожусь? нужно условие, но как и где это написать?

[@user-sn4ib9dt3e]

Передай стейт текущей страницы пропсом в блок пагинации, и добавляй класс через проверку на его соответствие номеру из массива страниц, когда выводишь дивы с нумерацией

[@user-ky4vq5jm5u]

что то Api не работает

[@zaurhuseyn4432]

Хороший урок,а то я у одного иностранца по имени Педро смотрел там у него была ошибка вроде все правильно но кнопки не работают и всего 1 цифра вместо 10

[@votex0014]

Единственное что нет смысла использовать useState для country per page, можно просто в константу

[@Nikitosss91]

Найс кнопки сделал в конце)) Если карент пейдж равна 1 пожмякай на превпейдж кнопку и глянь че будет)

[@lets_try_js]

ну это легко поправляется) хотя не стоило все таки эти кнопки добавлять

[@art_st2671]

Сделайте доп проверку на номер страницы, это не так сложно: function prevPage() { setCurrentPage(pageNumber => pageNumber === 1 ? 1 : pageNumber - 1) } function nextPage() { setCurrentPage(pageNumber => pageNumber === Math.ceil(countries.length / countriesPerPages) ? pageNumber : pageNumber + 1) }

[@Samaelish]

@@lets_try_js if(currentPage !== 1) Хватило такого условия в prevPage чтоб пофиксить и аналогичного в nextPage. Почему не стоило добавлять кнопки? Удобный функционал для юзера.

[@JavaScriptcher]

Как быстро развернуть компонент? Что за магия такая?

[@bessuka]

это снипеты, в зависимости в чем кодишь, по разному. я использую для react в vscode расширения Reactjs code snippets создаешь файлик пишень в нем rsc, и нажимаешь таб или ентер, создается пустой компонент с импортом и експортом. ну так полно разных снипетов, обьяснил на примере этого

[@yarmik3d]

Это никуда не годится, а если апи возвращает список из тысячи и более элементов? Пагинация должна определяться на бэке, а не на фронте.

[@lets_try_js]

должна, но не всегда определяется)

[@yarmik3d]

@@lets_try_js Тогда у этого веб приложения нет перспектив.

[@awenn2015]

@@lets_try_js и к тому же отображать все 35 элементов пагинации эт очень стремная идея, нужно сокращать до 1, 2, 3 ... 15 ... 34, 35, 36 суть надеюсь уловил

[@lets_try_js]

@@awenn2015 ясное дело) тут прям совсем база, что бы понимать, как это работает исходя из этого, уже можно сделать так, как ты написал

[@awenn2015]

@@lets_try_js ну я думаю в конце можно было сделать ремарку на это, мол вот я все это показал но еще лучше делать так, а то будут потом все такие пагинации делать )) я кстати сам react не так долго изучаю , базовые хуки выучил , интересная тема когда нужно думать только о логике без постоянных манипуляций с дом деревом

[@user-fp3wz3lx7n]

То что делает автор это не пагинация как таковая, а просто порционный рендеринг данных. Возможно для кейса со странами когда записей 200-300 этот кейс и будет полезен, но в большинстве случаев нет. Пагинация предполагает порционное получения данных с сервера. Представьте абстрактный пример что у вас ендпоинт отдает миллион строк, при данном подходе вам придется сначала этот миллион запросить, запросы без лимита могут создавать достаточно серьёзную нагрузку на бекенд, обязательно нужно передавать лимит или номер страницы в запросе. Если вы изучаете Реакт и ищите пример пагинации, то это не то что вам нужно

[@user-vc6mo5nl8g]

сел делать, а аппи не работает...

[@lets_try_js]

Любую апишку можно взять )

[@user-vc6mo5nl8g]

@@lets_try_js Взял это..Спасибо за урок"!!!!

[@druf5962]

очень много недостатков, не продуман урок

[@Just__Ilya]

стран стало 251, и это нужно уже 26 страниц, но math.floor не покажет тебе 26 страницу, поэтому лучше Math.ceil.