#10: 🍕 React Pizza v2 - Разрабатываем пагинацию и поиск пицц
Вставка
- Опубліковано 29 вер 2024
- 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...
Что я понял из этого видео?
- React это как пожар в доме, передавайте пропсы правильно, иначе исход может быть плачевным.
Спасибо за видео, с примера на 14:00, смеялся от всей души.
а есть смысл сейчас через цепочку промисов получать количество для пагинации, а потом уже вызывать дальше? Или потом поправим?
Автор, очень интересно заходит такая подача) для меня это что-то среднее между супер-подробным материалом it-kamasutra, который впадлу смотреть, и всеми остальными "супер-вылизанными идеальными" курсами, которые не дают представления, что у тебя может что-то не получаться с первого раза ) Настоящий красавумба 👍👍
на самом деле, тут по времени как и it-kamasutra, единственное, что он устарел
@@dennyfedyna9707 раза в 2 по времени айтикамасутра дольше
@@sergeyklokol558 в IT камасутра видосов больше в 3 раза, а видосики вместо часа, вроде по 20 минут
@@dennyfedyna9707 там половина видосов по часу как раз,и минут по 40, остальная половина по 20 минут,а последний вообще 2 часа,крутой курс,хоть и старый но полезный для новичков
@@sergeyklokol558 понятно, я то проходил первых 30 вроде, та где начались классовые компоненты я уже понял, что не хочу смореть
0:00 Создаём компонент поиска
8:50 Про props drilling. Передача состояний из одного компонента в другие через пропсы
15:38 Про инпуты в Реакт. Управляемые инпуты.
27:52 Про нынешнюю проблему с передачей пропсов.
31:50 Поиск реализованный для статики.
39:00 Реализуем поиск с бекенд данными.
47:05 Пагинация
drilling*
@@kokunin ты еще проходишь курс?
@@crypto4elikА ты?)
я прошел
@@crypto4elik И как?
Я правильно понимаю что Редакс мы будем использовать чтобы не заниматься этой дрочкой пропсов и состояний через родителя и ребенка? Это же просто пиздец захламляет код и ты путаешься
14:08 Уже представляю как я на собесе буду приводить примеры)
Я не понимаю как у автора выходит выгрузить SVG c полями circle и тд. у меня только какой то path в котором куча цифр и всё
классно, что ты и поиск через filter показал, и через бэк, и пояснил, чем они отличаются. Респект!
это конечно прикол, назвала не title, a name - забыла. Через неделю два часа разбиралась и не втупляла, повторяя за автором title, почему includes не находит))
аналогично! спасибо за комментарий, Вы сэкономили мне кучу времени😆
бро используй react-icons там намного проще, зачем тебе эти svg
кто смог решить проблему что при поиске пицц не переносятся на одну страницу, а остаются на своих?
После добавления пагинации что-то перестали отображаться пиццы в категориях. скелетон срабатывает, но пицц нету((
у меня такая же проблема - такая ссылка работает некорректно ----> ?page=1&limit=3category=1&sortBy=rating&order=asc
да, такая же ошибка. не помнишь, как ее решил?
у меня тоже так. Кто решил, подскажите пожалуйста
ребят если у кого-то не будет инпут отчищятся с первого клика, уберите в стилях 'focus' . Ломал голову долго))
А почему у него работает с первого раза?0_о
а будет ли курс с норм бэком вместо мокапи?
Не знал что Нурлан Сабуров фронтендер.
Вот такая вот история
Не забудь добавить видео в плейлист!
1) 56:10 по центру у тебя не встало потому что align-items надо было написать, не align-self
2) Пагинация. Если бэк не возвращает нужное количество страниц, то мы можем сами посчитать: Math.ceil(Общее количество товаров / Лимит отображения товаров на странице)
3) 1:10:13. Mockapi работает корректно. Ты при поиске должен перекидывать пользователя на первую страницу. При поиске тебе надо было пересчитывать количество товара отображаемого и в пагинации показывать нужное количество страниц (Если бы у тебя было, например, 5 сырных пицц, то на второй странице была бы одна пицца). Данная проблема выкатилась из пункта 2, который я описал выше
2) Тогда надо чтобы бек возвращал общее количество товаров отдельным полем. В данном случае mockapi не возвращает ни общее количество страниц, ни общее количество товаров.
Общее количество товаров мы здесь получим, ТОЛЬКО если вытянем абсолютно ВСЕ товары в запросе не указывая page и limit. А если товаров будет 1000+ ?
Так что я более солидарен с автором, бекенд должен возвращать либо общее кол-во страниц и текущую, либо общее кол-во товаров.
@@dmytronice1337 общее кол-во item как раз таки возвращает
@@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.
@@vladimirivanov4756 ого, супер. Это уже конструктивный ответ, спасибо) А ведь стоило мне нажать пару кнопок и я бы это обнаружил, признаю. Просто, думаю, автору стоило разобрать это в видео, и претензия была конечно не к МокАпи, а к видосу.
Но с другой стороны, я как заинтересованный чел, мог это и сам найти и сделать пагинацию не так как на видео.
Ну наконец-то) А то испугался, что что-то случилось) Продолжай)
У кого-нибудь получилось сделать поиск в категории с помощью MockApi? У меня при поиске просто отображает пиццы в этой категории. Ищет только с категории "Все"
такой же вопрос, удалось ли тебе решить проблему?
@@holyholy413 не удалось, хз вообще как сделать
@@Dudd1man все я разобралась 😉
@@holyholy413 ого, как??
@@holyholy413 нуууу??
Ребят, это трындец! С этим проектом я все время хочу пиццу! Представляю, что было бы если бы проект был о каких-то секс-игрушках)))
Крутой урок!) Спасибо)
Но пагинацию написал сам, показалось так проще, что бы под стили библиотеки не подстаиваться)
При работающей анимации расширения поля ввода при фокусе, к сожалению, очистка поля не срабатывает с первого раза. Если убрать анимацию - все отлично.
У меня также, незнал в чем проблема а оказывается вот в чем..
Кто может подсказать, какая здесь тема VS Code? Вроде на дефолтный Atom One Dark не похоже, хотя может ошибаюсь :/
@levovskii спасибо, добрый человек)
Если есть кто пишет сначала rafc, а потом дописывает вручную export default, то можно использовать сразу алиас rafce
Огромное спасибо за лучший курс по react!
Привет ,когда li стилизуешь ,написал align-self а надо было items тогда бы сразу цифры по центру втали
Лучший курс по реакту в ютуб!)
react-paginate = редкостная дичь
Добрый день! подскажите как сделать очистку поля ввода при работающей анимации расширения при фокусе, потому что так не работает, только если анимация отключена. Заранее спасибо!
уидтх и хеигхт
Ачаков, умоляю добавь таймкоды 🙏
какой темой ты пользуешься в вскоде?
Просто крутой и бесплатный современный курс по реакт
9:00 SEARCH
47:00 pagination
Курс от души. Archakov добра тебе. Сделай пожалуйста после этого курса еще какой-нибудь посложнее
Mockapi вазращает массив пицц, мы же можем длину этого масива разделить на количество пицц на одной странице и получить колличество страниц
основная задача показать концепцию а допилить (длину) можно уже отдельно
Спасибо за отличное видео. React, redux, js, lesson
спасибо!
подскажите, у нас при поиску по бэкенду toLowerCase происходит на стороне бэкенда?
Получается, что да
а что будет, если мы уйдем на 3ю страницу и потом воспользуемся поиском?
не будет работать поиск
(
Очень круто и подробно расписано по запросам. Спасибо!
Что бы поиск прижат к логотипу нужно margin-right: auto
есть альтернатива mockapi?
json server
Ты не учёл один момент. Ты сказал, что при вводе текста в поле мы отправляем запрос в бэк и получаем оттуда пиццы. Но получается, что мы сильно при этом нагрузим бэк постоянными запросами, в таких случаях использкется дэбоунс. Я думаю, что ты специально об этом не рассказал, так как это сложная тема для новичков, надеюсь в следующих видео ты об этом не забыл упомянуть, спасибо за видео
1:07:00
Спасибо за замечательный учебный курс
1:04:09 Когда спрашивают, нужна ли математика программисту :D
автор, скажи, пожалуйста, почему ты выбрал именно мокапи, если в нем нельзя то, что можно у всех остальных бек-сервисов?
с бека приходит массив пицц, можно же по длине массива посчитать, кол-во страниц
вы сделали ?
@@unclechernomor4421 Ну я на работе так делал, как временный костыль, пока бек не исправили. Там была таблица, покупок пользователя и они приходили все сразу, и нужно было все что пришло разбить на страницы. Если не приходит все сразу, так не сделать. Вроде логично обьяснил.
@@user-islamkaz Какой ты догадливый.
@@user-islamkaz тут только практика поможет, дорогу осилит идущий. Я вот вообще выгорел, отдыхаю
Такой вопрос, уже 10 урок, а когда начнёшь внедрять ts и redux?
С 20 урока
Отдельное спасибо за смешные аналогии, отлично разбавляет обстановку)
ребята, лайкайте обязательно видео, идеальная подача как по мне
44:40 у меня одного mockapi нормально работает без багов и выводит все четко как надо?
У меня тоже вроде работает без багов, т. е. поиск работает внутри категории (например, из "Вегетарианских" при поиске на "пеп" выдает только одну пиццу Крэйзи пепперони, и на mockapi отдает запрос вроде тоже правильно: category=2&sortBy=rating&order=desc&search=%D0%BF%D0%B5%D0%BF. Наверное, починили :)
@@VadimFilippov нет, не починили(
scroll срабатывает потому что window.scrollTo(0,0) находится внутри useEffect, который срабатывает при изменении currentPage, так как currenPage находится в массиве зависимостей useEffect.
Я правильно понял, что на каждом сервере будут свои команды для поиска, сортировки?
Немного смесь получилась. React-pagination позволяет реализовать пагинацию статических данных, но в видео автор малость проглядел и скопировал только компонент без всяких констант и обработчиков и прочей шелухи. А далее получается, что этот пакет уже используется для получения динамических данных с БД. Ощущение, будто делал-делал, а потом понял, что чет как-то не так выходит, на ходу всех переиграл и уничтожил)
Столкнулся с проблемой mockApi - если я добавляю еще search в url params, то поиск вообще не работает.
Решил это следующим образом - оставил фильтрацию на фронтенде, но при начале поиска перевожу вручную категорию на Все пиццы. Таким образом делается всего 1 запрос на бек (в будущем не нужно будет даже дебаунсить все это), но фильтрация выдает нужные результаты еще и с сортировкой. Мне решение понравилось, мб будет кому-то еще полезно.
Попробуйте json-server вместо mock-api
@@lidijajezova2025 на данный момент там нет поиска. Он был в версии 0.17.4, сейчас 1.0.0-beta.2. Мой коммент для тех, кто захочет поставить.
Кому надо её установить npm i json-server@0.17.4
В целом, я использую последнюю версию и поиск сделала на клиенте
мок апи нифига походу не может,а за что они бабки просят тогда...
а нельзя было бы, вернуть колличество все пиццы, разделить их на колличество пицц на страницу, округлить сумму в большую сторону и засунуть это в колличество страниц, если бэк не даёт этой инфы?
55:25 English very good 🤣🤣
pochemu scroll obnulyayet ya uznal s tvoix video eto iz za a vnutri pagination sps class
Для вас то стили это фигня а для кого то это бесценный урок...
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.
55:51 align-items: center; * 🙂
👍
Сколько всего уроков планируется в курсе?
+-30
Дэннис, ты пофиксишь в дальнейшем захардкоженную пагинацию? это изи сделать
Через редакс?
@@ArchakovBlog неважно через что. ты понял, что количество страниц можно динамически получать исходя из длины массива пицц?
Можно, но так не делают в реальных приложениях. Бэк может вернуть 10.000 записей и нет смысла их всех запрашивать. Нормальный бэк должен говорить сам сколько у него страниц
@@ArchakovBlog понял
ТОП контент :))
Кто знает почему при поиске пицц через бэкенд, у меня ничего не получает? Т.е у меня отображаются все пиццы, в network'e fetch получает данные search, но пиццы не рендерятся, делал чуть по-другому - не работало, делал точь-в-точь как автор - не работает. Может кто подсказать? Или это уже проблемы с mockapi в нынешнее время?
разобрались? такая же фигня, по ходу мокапи оставили бесплатным фильтр только по одному параметру
Если тут поиск идет через бэкэнд, то к нижнему регистру где-то там же автоматически переводит?
бл, я yarn установил и перестало работать 😆
Че-то у меня поиск в мокапи на бэке вообще не работает, парамтры норм передаются, все видно в Payload, но пустой массив возвращает
причем он не ищет именно по title. А price отрабатывает нормально
Может кто-то сталкивался: Мокапи не возвращает пустой массив, а возвращает "Not found" из-за чего приложение ломается. Например, это происходит после того как в поиск ввести запрос, который не будет отображать пиццы. По идее должен быть возвращён пустой массив и в приложении просто ничего не отобразиться, а в моём случае отображается 404 и приложение ломается.
Нашли ответ на этот вопрос?
@@bax8686 я сама фиксила эту проблему, делала проверку вернулся ли массив или нет.
... (предыдущий код)
.then((data) => {
if (Array.isArray(data)) {
setItems(data);
} else {
setItems([]);
}
не знаю правильно или нет, но у меня работает, приложение не ломается
@@РенатаАндросова Cпасибо помогли, сразу не додумался до такого решения
@@bax8686 Не стал разбираться, так как axios решил эту проблему автоматически, ошибки 404 не было, при этом в запросе на наш мок-сервер ошибка всё равно появлялась, как и должно быть. Как я понял, это особенность сервиса Мокапи. Хочу отметить, пройдя этот курс, тот факт, что я не стал заморачиваться над этой проблемой это только +, так как далее по курсу она будет не актуальна, всё будет работать корректно.
Propsдриллинг - это ни есть хорошо! 28:00
Мб у мокапи кол-во страниц в headers
Объясняет супер подробно, почти что на пальцах👍
У кого не получилось сделать пагинацию через MOKKY? не могу понять как сделать. Ставлю лимит и страницы, возвращается объект а не массив
тоже самое , не могу понять как обойти.
@@Калабарака я разобрался там прилетает два массива по моему, но потом с пагинацией такие ошибки полезли. Ушел от этого, вернул все назад без лимита и пагинации.
Объясните подробней, что за ошибка, попробую решить
@@ArchakovBlog если пользоваться твоим сервисом а не мокапи, то при запросе прилетает 2 объекта или массива не помню, потому что у тебя по уму бек сделан а у мокапи нет. Через твой сервис можно и начальную страницу получить и количество, я вроде сделал и пагинацию настроил с параметрами которые прилетают, а потом короче пошёл расинхрон, пришлось делать без пагинации. Вроде доступно объяснил?)
Хммм
выглядит так, что вроде проблема есть, вроде и нет)
Загляни в документацию Mokky, в раздел «Примеры на React/JS». Там есть пример как работать с пагинацией.
Также загляни в доку в раздел «Пагинация», я подробно объяснил как и что работает.
Надеюсь, что это поможет. Если нет, то есть телеграм-чат Mokky, там смогу помочь
жаль, что вы не написали пагинцию с нуля сами , хотелось бы без библиотеки! но урок все равно хороший, конечно
для практики хорошо было бы, но в реальной разработке все равно используют библы
пора уже делать урок как сделать нормальный бекенд и не мучатся с mockApi
можно попробовать фаербейс
Компоненты приложения становятся нагруженными и менее понятными. А так все супер продолжаем))
Супер урок про пагинацию
пример с пожаром крутой, вот бы побольше таких)
почему передавая в .includes пустую строку, он возвращает true?
Когда пустая строка '' передается в метод .includes(), она рассматривается как пустая подстрока. Поскольку пустая подстрока является частью любой строки, метод .includes('') всегда возвращает true, потому что каждая строка содержит пустую подстроку.
опять таки благодарю за отличный контент
6:20 иконка
Около-гениальная подача на самом деле
тоже орнул с примера пожара))
Ты лучший, а примеры твои еще лучше 😁 Спасибо за видео
ммм) кто-то флексы не знает😄
с кайфом, мок апи упал
Отличный курс
можно ли очистку инпута сделать так
onClick={(event) => setSearchValue((event.target.value = ' ' ))}
У меня работает
onClick={() => setSearchValue(' ' )} чем тебя это не устроило?) не изобретай велосипед)
@@alexey_samokhin меня-то устраивает, просто я сделал до того как он показал как делать, и хотел знать можно ли так делать
делала без пагинации , показалось сложно) через. неделю вернулась и сделала с вами с пагинацией 😊 уроков в ютуб я лучше вашей пиццы не нашла. ПОдскажите пожалуйста, как убрать поиск из Header когда мы переходим в корзину ??? там он совсем ни к чему, но он лежит в Header и не меняется. или это. дальше по курсу мы уберем ?
еще есть путь самурая, но немного устарел, зато оч подробный. Хочешь в чат для тех кто прям сейчас пиццу проходит?
@@crypto4elik да, хочу
Спасибо.
Пожар и ведра))))))!
класс
А как в итоге отключить прыжок скролла вверх при запросе?
window.scrollTo(0,0) убрать
Отлиные видео ))
D Z I Ę K U J [Ę]
С мокапи все впорядке) нужен параметр не search а title для поиска
поставил title, не заработало :9
@@krypton5204 Так же
@@Dudd1man Лично я поставил &search после &sortBy. проблема в том что теперь поиск не работает когда ты отфильтровал :(
@@krypton5204 Возможно забыл указать зависимость в useEffect, если не указать, то оно не будет перерисовывать пиццы
Как выводить два терменала сразу ?
@Денис Басанець спасибо))