#10: 🍕 React Pizza v2 - Разрабатываем пагинацию и поиск пицц

React Pizza V2 - Это обновлённый курс на 2022 год, одного из самых популярных курсов 🔥 по ReactJS для начинающих.
Более подробней тут: www.notion.so/...
Исходники доступны в Boosty или в моём Telegram-канале: t.me/archakov_im
❤️ Поддержка:
- Boosty (исходники, макеты): boosty.to/arch...
- Донаты: www.donational...
Старый курс React Pizza - • #1: React Pizza - разр...
👀 Демо: react-pizza-v2...
📝 Полный стек:
ReactJS 18
TypeScript
Redux Toolkit (хранение данных / пицц)
React Router v6 (навигация)
Axios + Fetch (отправка запроса на бэкенд)
React Hooks (хуки)
Prettier (форматирование кода)
CSS-Modules / SCSS (стилизация)
React Content Loader (скелетон)
React Pagination (пагинация)
Lodash.Debounce
Code Splitting, React Loadable, useWhyDidYouUpdate
Ссылка на исходник: github.com/Arc...
Ссылка на вёрстку: github.com/Arc...
Ссылка на дизайн: www.figma.com/...
Таймкоды: еще не готовы
📢 Платный курс по ReactJS с наставником: mentor.archako...
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archako...
- Личном блоге: archakov.im
- GitHub: github.com/Arc...
- Моё резюме: career.habr.co...

[@evilinarm]

Что я понял из этого видео? - React это как пожар в доме, передавайте пропсы правильно, иначе исход может быть плачевным. Спасибо за видео, с примера на 14:00, смеялся от всей души.

[@znogoud4009]

Автор, очень интересно заходит такая подача) для меня это что-то среднее между супер-подробным материалом it-kamasutra, который впадлу смотреть, и всеми остальными "супер-вылизанными идеальными" курсами, которые не дают представления, что у тебя может что-то не получаться с первого раза ) Настоящий красавумба 👍👍

[@dennyfedyna9707]

на самом деле, тут по времени как и it-kamasutra, единственное, что он устарел

[@sergeyklokol558]

@@dennyfedyna9707 раза в 2 по времени айтикамасутра дольше

[@dennyfedyna9707]

@@sergeyklokol558 в IT камасутра видосов больше в 3 раза, а видосики вместо часа, вроде по 20 минут

[@sergeyklokol558]

@@dennyfedyna9707 там половина видосов по часу как раз,и минут по 40, остальная половина по 20 минут,а последний вообще 2 часа,крутой курс,хоть и старый но полезный для новичков

[@dennyfedyna9707]

@@sergeyklokol558 понятно, я то проходил первых 30 вроде, та где начались классовые компоненты я уже понял, что не хочу смореть

[@strr699]

0:00 Создаём компонент поиска 8:50 Про props drilling. Передача состояний из одного компонента в другие через пропсы 15:38 Про инпуты в Реакт. Управляемые инпуты. 27:52 Про нынешнюю проблему с передачей пропсов. 31:50 Поиск реализованный для статики. 39:00 Реализуем поиск с бекенд данными. 47:05 Пагинация

[@kokunin]

drilling*

[@crypto4elik]

@@kokunin ты еще проходишь курс?

[@maggicc]

@@crypto4elikА ты?)

[@crypto4elik]

я прошел

[@maggicc]

@@crypto4elik И как?

[@tatianaagapkina8658]

классно, что ты и поиск через filter показал, и через бэк, и пояснил, чем они отличаются. Респект!

[@ЛусінеАтаджанян]

Огромное спасибо за лучший курс по react!

[@shokhrookhr3850]

Ну наконец-то) А то испугался, что что-то случилось) Продолжай)

[@ВладиславКорчагин-н2п]

Лучший курс по реакту в ютуб!)

[@GabrialWeb]

Очень круто и подробно расписано по запросам. Спасибо!

[@RafatAbbassov]

14:08 Уже представляю как я на собесе буду приводить примеры)

[@ПолинаЛисица-в1д]

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

[@ПавелСтародубцев-ц6ш]

Объясняет супер подробно, почти что на пальцах👍

[@TheAlexChannelClub]

Спасибо за замечательный учебный курс

[@Evgeny..]

Спасибо за отличное видео. React, redux, js, lesson

[@РусланХолов-ж5г]

Просто крутой и бесплатный современный курс по реакт

[@КириллМохначевский-о3ю]

Не забудь добавить видео в плейлист!

[@delaynah]

ребята, лайкайте обязательно видео, идеальная подача как по мне

[@tastebublik]

опять таки благодарю за отличный контент

[@mavldr]

Ты лучший, а примеры твои еще лучше 😁 Спасибо за видео

[@CyberGenius777]

1) 56:10 по центру у тебя не встало потому что align-items надо было написать, не align-self 2) Пагинация. Если бэк не возвращает нужное количество страниц, то мы можем сами посчитать: Math.ceil(Общее количество товаров / Лимит отображения товаров на странице) 3) 1:10:13. Mockapi работает корректно. Ты при поиске должен перекидывать пользователя на первую страницу. При поиске тебе надо было пересчитывать количество товара отображаемого и в пагинации показывать нужное количество страниц (Если бы у тебя было, например, 5 сырных пицц, то на второй странице была бы одна пицца). Данная проблема выкатилась из пункта 2, который я описал выше

[@dmytronice1337]

2) Тогда надо чтобы бек возвращал общее количество товаров отдельным полем. В данном случае mockapi не возвращает ни общее количество страниц, ни общее количество товаров. Общее количество товаров мы здесь получим, ТОЛЬКО если вытянем абсолютно ВСЕ товары в запросе не указывая page и limit. А если товаров будет 1000+ ? Так что я более солидарен с автором, бекенд должен возвращать либо общее кол-во страниц и текущую, либо общее кол-во товаров.

[@vladimirivanov4756]

@@dmytronice1337 общее кол-во item как раз таки возвращает

[@dmytronice1337]

@@vladimirivanov4756 Можешь, пожалуйста, показать/объяснить, где у нас возвращается общее кол-во товаров?

[@vladimirivanov4756]

@@dmytronice1337 в мокапи, там где ты выбираешь свои бд, есть кнопочка edit, там для эндпоинта GET /items пропиши { "items": "$mockData", "count": "$count" } $mockData - refers to the actual data stored in DB. $count - refers to the number of records stored in DB.

[@dmytronice1337]

@@vladimirivanov4756 ого, супер. Это уже конструктивный ответ, спасибо) А ведь стоило мне нажать пару кнопок и я бы это обнаружил, признаю. Просто, думаю, автору стоило разобрать это в видео, и претензия была конечно не к МокАпи, а к видосу. Но с другой стороны, я как заинтересованный чел, мог это и сам найти и сделать пагинацию не так как на видео.

[@СергейСомов-м8ы]

пример с пожаром крутой, вот бы побольше таких)

[@iamboikodmytro]

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

[@carnivores6823]

Около-гениальная подача на самом деле

[@СашоКутуков]

Курс от души. Archakov добра тебе. Сделай пожалуйста после этого курса еще какой-нибудь посложнее

[@ВадимГапоненко-ь4в]

Привет ,когда li стилизуешь ,написал align-self а надо было items тогда бы сразу цифры по центру втали

[@ПерсивальЛоуэл]

9:00 SEARCH 47:00 pagination

[@DirtyKalach]

Thanks for a lesson. You're THE GOAT

[@Калабарака]

GOAT - это же козел ...

[@finger_colors]

@@Калабарака это двухсмысленное слово, у него ещё есть значение типо крутой или чё то типо того

[@youthhazed3606]

@@Калабарака GOAT - greatest of all time

[@x-bit5193]

Что бы поиск прижат к логотипу нужно margin-right: auto

[@ГеннадийГорохов-ц8н]

Супер урок про пагинацию

[@iznaur_18]

Отличный курс

[@learningit2572]

ребят если у кого-то не будет инпут отчищятся с первого клика, уберите в стилях 'focus' . Ломал голову долго))

[@maga_frank]

А почему у него работает с первого раза?0_о

[@smoke2638]

тоже орнул с примера пожара))

[@helloglobalme9689]

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

[@maga_frank]

У меня также, незнал в чем проблема а оказывается вот в чем..

[@EvilYou]

1:04:09 Когда спрашивают, нужна ли математика программисту :D

[@Artur-oh3pt]

Не знал что Нурлан Сабуров фронтендер. Вот такая вот история

[@Oleg_Artemov]

ТОП контент :))

[@nadiapekarskaya9776]

Ребят, это трындец! С этим проектом я все время хочу пиццу! Представляю, что было бы если бы проект был о каких-то секс-игрушках)))

[@nikomunikabelen8540]

Спасибо.

[@nickdunne1235]

Cпасибо.

[@aiperiaku633]

scroll срабатывает потому что window.scrollTo(0,0) находится внутри useEffect, который срабатывает при изменении currentPage, так как currenPage находится в массиве зависимостей useEffect.

[@aserezhnikov]

Если есть кто пишет сначала rafc, а потом дописывает вручную export default, то можно использовать сразу алиас rafce

[@meowdices]

а будет ли курс с норм бэком вместо мокапи?

[@КенанСалахов]

Ты не учёл один момент. Ты сказал, что при вводе текста в поле мы отправляем запрос в бэк и получаем оттуда пиццы. Но получается, что мы сильно при этом нагрузим бэк постоянными запросами, в таких случаях использкется дэбоунс. Я думаю, что ты специально об этом не рассказал, так как это сложная тема для новичков, надеюсь в следующих видео ты об этом не забыл упомянуть, спасибо за видео

[@JavaScriptcher]

Propsдриллинг - это ни есть хорошо! 28:00

[@vova_elys1um]

Столкнулся с проблемой mockApi - если я добавляю еще search в url params, то поиск вообще не работает. Решил это следующим образом - оставил фильтрацию на фронтенде, но при начале поиска перевожу вручную категорию на Все пиццы. Таким образом делается всего 1 запрос на бек (в будущем не нужно будет даже дебаунсить все это), но фильтрация выдает нужные результаты еще и с сортировкой. Мне решение понравилось, мб будет кому-то еще полезно.

[@lidijajezova2025]

Попробуйте json-server вместо mock-api

[@katenka_katrusya]

​@@lidijajezova2025 на данный момент там нет поиска. Он был в версии 0.17.4, сейчас 1.0.0-beta.2. Мой коммент для тех, кто захочет поставить. Кому надо её установить npm i json-server@0.17.4 В целом, я использую последнюю версию и поиск сделала на клиенте

[@victoriakovaleva7238]

После добавления пагинации что-то перестали отображаться пиццы в категориях. скелетон срабатывает, но пицц нету((

[@theoty-js]

у меня такая же проблема - такая ссылка работает некорректно ----> ?page=1&limit=3category=1&sortBy=rating&order=asc

[@argentum2521]

да, такая же ошибка. не помнишь, как ее решил?

[@alexsatm05]

у меня тоже так. Кто решил, подскажите пожалуйста

[@ПолинаЛисица-в1д]

это конечно прикол, назвала не title, a name - забыла. Через неделю два часа разбиралась и не втупляла, повторяя за автором title, почему includes не находит))

[@ВикторияПерник]

аналогично! спасибо за комментарий, Вы сэкономили мне кучу времени😆

[@джидай-ю6р]

55:25 English very good 🤣🤣

[@ГавриловАлександр-н2е]

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

[@theoty-js]

основная задача показать концепцию а допилить (длину) можно уже отдельно

[@aliskhankhutiev]

55:51 align-items: center; * 🙂

[@nursultansarazhiev9821]

бро используй react-icons там намного проще, зачем тебе эти svg

[@Евгений-х7п9с]

Компоненты приложения становятся нагруженными и менее понятными. А так все супер продолжаем))

[@dever312]

43:57 Гвардиола

[@anton-haskevych]

Ачаков, умоляю добавь таймкоды 🙏

[@unclechernomor4421]

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

[@zetkart1821]

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

[@Unnamed-r8x]

Отлиные видео ))

[@rusfungame]

с бека приходит массив пицц, можно же по длине массива посчитать, кол-во страниц

[@unclechernomor4421]

вы сделали ?

[@rusfungame]

@@unclechernomor4421 Ну я на работе так делал, как временный костыль, пока бек не исправили. Там была таблица, покупок пользователя и они приходили все сразу, и нужно было все что пришло разбить на страницы. Если не приходит все сразу, так не сделать. Вроде логично обьяснил.

[@rusfungame]

@@user-islamkaz Какой ты догадливый.

[@rusfungame]

@@user-islamkaz тут только практика поможет, дорогу осилит идущий. Я вот вообще выгорел, отдыхаю

[@fmleglrmglrml]

Я не понимаю как у автора выходит выгрузить SVG c полями circle и тд. у меня только какой то path в котором куча цифр и всё

[@kenanhaciyev3759]

класс

[@andreynevazhniy]

Добрый день! подскажите как сделать очистку поля ввода при работающей анимации расширения при фокусе, потому что так не работает, только если анимация отключена. Заранее спасибо!

[@АлександрБородинов-к2р]

С мокапи все впорядке) нужен параметр не search а title для поиска

[@krypton5204]

поставил title, не заработало :9

[@Dudd1man]

@@krypton5204 Так же

[@ИльяСеливанов-п5э]

@@Dudd1man Лично я поставил &search после &sortBy. проблема в том что теперь поиск не работает когда ты отфильтровал :(

[@SnowBoard154]

@@krypton5204 Возможно забыл указать зависимость в useEffect, если не указать, то оно не будет перерисовывать пиццы

[@Dudd1man]

У кого-нибудь получилось сделать поиск в категории с помощью MockApi? У меня при поиске просто отображает пиццы в этой категории. Ищет только с категории "Все"

[@holyholy413]

такой же вопрос, удалось ли тебе решить проблему?

[@Dudd1man]

@@holyholy413 не удалось, хз вообще как сделать

[@holyholy413]

@@Dudd1man все я разобралась 😉

[@Dudd1man]

@@holyholy413 ого, как??

[@Dudd1man]

@@holyholy413 нуууу??

[@dmaberlin]

какой темой ты пользуешься в вскоде?

[@RusDevel]

Я правильно понял, что на каждом сервере будут свои команды для поиска, сортировки?

[@jamjam3337]

👍

[@arturaghasafyants316]

A ReactJS component to render a pagination. Note: You should write your own css to obtain this UI. This package do not provide any css.

[@navajo458]

Немного смесь получилась. React-pagination позволяет реализовать пагинацию статических данных, но в видео автор малость проглядел и скопировал только компонент без всяких констант и обработчиков и прочей шелухи. А далее получается, что этот пакет уже используется для получения динамических данных с БД. Ощущение, будто делал-делал, а потом понял, что чет как-то не так выходит, на ходу всех переиграл и уничтожил)

[@dvromin]

автор, скажи, пожалуйста, почему ты выбрал именно мокапи, если в нем нельзя то, что можно у всех остальных бек-сервисов?

[@B1nikup]

Кто может подсказать, какая здесь тема VS Code? Вроде на дефолтный Atom One Dark не похоже, хотя может ошибаюсь :/

[@B1nikup]

@levovskii спасибо, добрый человек)

[@ИльяИваник-ф8ф]

а что будет, если мы уйдем на 3ю страницу и потом воспользуемся поиском?

[@powerjavascriptman]

не будет работать поиск (

[@ДмитрийЛихачев-в2у]

Пожар и ведра))))))!

[@JdIm6fhjLgdWRhn]

1:07:00

[@diggerdog001]

Я правильно понимаю что Редакс мы будем использовать чтобы не заниматься этой дрочкой пропсов и состояний через родителя и ребенка? Это же просто пиздец захламляет код и ты путаешься

[@Tauron211]

Если тут поиск идет через бэкэнд, то к нижнему регистру где-то там же автоматически переводит?

[@MaximLisyanskiy]

Такой вопрос, уже 10 урок, а когда начнёшь внедрять ts и redux?

[@ArchakovBlog]

С 20 урока

[@rygach]

спасибо! подскажите, у нас при поиску по бэкенду toLowerCase происходит на стороне бэкенда?

[@sergeko9443]

Получается, что да

[@holovkevych]

есть альтернатива mockapi?

[@lidijajezova2025]

json server

[@tutnichegonet]

Сколько всего уроков планируется в курсе?

[@ArchakovBlog]

+-30

[@eigan_is]

Может кто-то сталкивался: Мокапи не возвращает пустой массив, а возвращает "Not found" из-за чего приложение ломается. Например, это происходит после того как в поиск ввести запрос, который не будет отображать пиццы. По идее должен быть возвращён пустой массив и в приложении просто ничего не отобразиться, а в моём случае отображается 404 и приложение ломается.

[@bax8686]

Нашли ответ на этот вопрос?

[@РенатаАндросова]

@@bax8686 я сама фиксила эту проблему, делала проверку вернулся ли массив или нет. ... (предыдущий код) .then((data) => { if (Array.isArray(data)) { setItems(data); } else { setItems([]); } не знаю правильно или нет, но у меня работает, приложение не ломается

[@bax8686]

​@@РенатаАндросова Cпасибо помогли, сразу не додумался до такого решения

[@eigan_is]

@@bax8686 Не стал разбираться, так как axios решил эту проблему автоматически, ошибки 404 не было, при этом в запросе на наш мок-сервер ошибка всё равно появлялась, как и должно быть. Как я понял, это особенность сервиса Мокапи. Хочу отметить, пройдя этот курс, тот факт, что я не стал заморачиваться над этой проблемой это только +, так как далее по курсу она будет не актуальна, всё будет работать корректно.

[@webbomj]

Вопрос что ты делал целый месяц. видюшки уже месячной давности

[@vladyslavkravchenko5955]

ммм) кто-то флексы не знает😄

[@YulVilaya]

делала без пагинации , показалось сложно) через. неделю вернулась и сделала с вами с пагинацией 😊 уроков в ютуб я лучше вашей пиццы не нашла. ПОдскажите пожалуйста, как убрать поиск из Header когда мы переходим в корзину ??? там он совсем ни к чему, но он лежит в Header и не меняется. или это. дальше по курсу мы уберем ?

[@crypto4elik]

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

[@YulVilaya]

@@crypto4elik да, хочу

[@Павел-ф9ш6р]

6:20 иконка

[@YulVilaya]

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

[@crypto4elik]

для практики хорошо было бы, но в реальной разработке все равно используют библы

[@zakiro4277]

49:05 В ЧЁМ разница между yarn и npm и почему именно npm используем?

[@zakiro4277]

посмотрел видео на тему ярн против нпм кратко плюсы yarn новее, быстрее на 30%, чуть легче работать с версиями зависимостей, догоняет npm по популярности, разработала команда фейсбука npm старее, популярнее на 30% (но ярн догоняет быстро)

[@salvadorvdali6339]

Npm устанавливает пакеты зависимостей последовательно Yarn это делает параллельно Поэтому установка с ярном быстрее. Ну и в форме записей npm i или yarn add А так более различий особо нет

[@serjsamoilow8711]

44:40 у меня одного mockapi нормально работает без багов и выводит все четко как надо?

[@VadimFilippov]

У меня тоже вроде работает без багов, т. е. поиск работает внутри категории (например, из "Вегетарианских" при поиске на "пеп" выдает только одну пиццу Крэйзи пепперони, и на mockapi отдает запрос вроде тоже правильно: category=2&sortBy=rating&order=desc&search=%D0%BF%D0%B5%D0%BF. Наверное, починили :)

[@holyholy413]

@@VadimFilippov нет, не починили(

[@crn05]

Че-то у меня поиск в мокапи на бэке вообще не работает, парамтры норм передаются, все видно в Payload, но пустой массив возвращает

[@crn05]

причем он не ищет именно по title. А price отрабатывает нормально

[@injty]

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

[@vladp5728]

Спасибо за уроки! Кто-нибудь знает название этого расширения, что при выделении переводит текст с отображением картинки в тему)?

[@clojure_sith]

Vimbox расширение

[@vladp5728]

@@clojure_sith Спасибо

[@DenysTolmachov]

пора уже делать урок как сделать нормальный бекенд и не мучатся с mockApi

[@crypto4elik]

можно попробовать фаербейс

[@dev-kj7on]

😌

[@Андрей-д3й7ъ]

А как в итоге отключить прыжок скролла вверх при запросе?

[@ArchakovBlog]

window.scrollTo(0,0) убрать

[@ryumayer]

почему передавая в .includes пустую строку, он возвращает true?

[@Alias_s]

Когда пустая строка '' передается в метод .includes(), она рассматривается как пустая подстрока. Поскольку пустая подстрока является частью любой строки, метод .includes('') всегда возвращает true, потому что каждая строка содержит пустую подстроку.

[@nomad5566]

Дэннис, ты пофиксишь в дальнейшем захардкоженную пагинацию? это изи сделать

[@ArchakovBlog]

Через редакс?

[@nomad5566]

@@ArchakovBlog неважно через что. ты понял, что количество страниц можно динамически получать исходя из длины массива пицц?

[@ArchakovBlog]

Можно, но так не делают в реальных приложениях. Бэк может вернуть 10.000 записей и нет смысла их всех запрашивать. Нормальный бэк должен говорить сам сколько у него страниц

[@nomad5566]

@@ArchakovBlog понял

[@Frezeee3D]

Когда добавил пагинацию, перестали работать категории, надо бы как то исправить

[@dever312]

у меня тоже. нашел решение?

[@Frezeee3D]

@@dever312 Ну по идее, так как пиц мало, то все они, при выборе категории, остаются на первой страничке

[@dever312]

@@Frezeee3D да я уже решил, у меня проблема была при fetch, не верно указал параметр.

[@maxim_cernegei7776]

вот мой код если что const Home = ({ searchValue }) => { const [items, setItems] = React.useState([]); const [isLoading, setIsLoading] = React.useState(true); const [categoryId, setCategpryId] = React.useState(0); const [sortType, setSortType] = React.useState({ name: 'популярности', sort: 'rating' }); const category = categoryId > 0 ? `&category=${categoryId}` : ''; const search = searchValue ? `&search=${searchValue}` : ''; const [currentPage, setCurrentPage] = React.useState(1); React.useEffect(() => { setIsLoading(true); fetch( `6511e90eb8c6ce52b3952fb2.mockapi.io/items?&page=${currentPage}&limit=4&sortBy=${sortType.sort}&order=desc${search}${category}`, ) .then((res) => { return res.json(); }) .then((arr) => { setItems(arr); setIsLoading(false); }); window.scrollTo(0, 0); }, [categoryId, sortType, searchValue, category, search, currentPage]);

[@RuslanDasaev-f7f]

Ребят, скиньте пожалуйста готовый код первых 10 уроков, я работаю и нет возможности проходить весь курс (((

[@MsThe13th]

если еще актуально, кинь телегу, скину архивом

[@nazarii027]

@@MsThe13th скинь @isco23

[@tastebublik]

с кайфом, мок апи упал

[@GLUCKKKKKKKKKK]

Как выводить два терменала сразу ?

[@GLUCKKKKKKKKKK]

@Денис Басанець спасибо))

[@OvGames]

Мб у мокапи кол-во страниц в headers

[@velony2988]

Кто знает почему при поиске пицц через бэкенд, у меня ничего не получает? Т.е у меня отображаются все пиццы, в network'e fetch получает данные search, но пиццы не рендерятся, делал чуть по-другому - не работало, делал точь-в-точь как автор - не работает. Может кто подсказать? Или это уже проблемы с mockapi в нынешнее время?

[@true227]

разобрались? такая же фигня, по ходу мокапи оставили бесплатным фильтр только по одному параметру