#6: React Sneakers - создаем простой интернет-магазин (junior)

📢 Платный курс по ReactJS с наставником: mentor.archako...
❤️ Поддержка:
- Донаты: www.donational...
- Patreon: / archakovblog
В этом курсе я расскажу как сверстать с нуля макет и разработать логику для интернет-магазина. Это упрощённая версия курса React Pizza без Redux.
Исходники доступны в моём Telegram-канале: t.me/archakov_im
Тут есть информация о теме, плагинах и т.д.: www.notion.so/...
🔗 Следите за обновлениями и информацией в:
- Telegram-канале: t.me/archakov_im
- VK: archako...
- Личном блоге: archakov.im
- GitHub: github.com/Arc...
- Моё резюме: career.habr.co...

[@vladislavaleksandrovich7291]

5:46 - ответы на вопросы из чата 11:30 - vue - это кайф 25:40 - план на урок 27:10 - правка багов 50:10 - реализация отображения на главной странице добавленного в корзину товара 53:25 - про булевые пропсы 58:00 - синхронизация загрузки данных из апи 1:07:20 - карточки при состоянии загрузки 1:09:40 - про react skeleton 1:16:30 - немного про yarn 1:21:40 - про Fragment 1:41:00 - баг с айди при добавлении\удалении в корзину 1:46:40 - про createContext и useContext, рефакторинг под использование данных контекста 2:33:20 - флоу данных из контекста в компонент 2:42:10 - делаем логику для оформления заказа 3:07:35 - анимация для кнопки оформления заказа 3:17:00 - что в итоге сделали за урок 3:26:20 - вопросы из чата

[@Nohchiyn_K1ant]

Спасибо тебе за твою работу. Ты очень помогаешь🙂

[@alexbork8659]

Это лучший канал по REACT ...... !!!!!! Ничего подобного я нигде не видел !!!!! СУПЕР ........... !!!!!!!!!!!!

[@ДимаАртюхов-э6щ]

Продолжай в том же духе, у тебя уникальный формат уроков - написание полноценных проектов для портфолио)

[@GUNTRUP_]

как же я задолбался с роутером ,у меня ошибок было ,потом взял перерыв ,пришел снова решать ошибки ,подумал ,пошел смотреть видосы на ютубе и оказалось что есть более нова весрия роутера ,а я пытался все по старому сделать - как в видео ,слава мне что все нашел

[@danzakuduro32]

Сам решил дай и другим решение

[@ГришаПетров-б1м]

Бесконечно можно смотреть на три вещи: как горит огонь, как течет вода, как Дэннис делает верстку ровнее и страдает от перфекционизма

[@serjmarkelov9915]

Спасибо за твою работу) Как говорят - you are doing God's job, keep it up!

[@ni4egonepridumal]

Денис говорит: я отхожу от того, чтобы записывать видео на 2 - 3 часа, МАКСИМУМ БУДЕТ ПОЛТОРА! Денис говорит: этот курс будет МАКСИМУМ НА 4 УРОКА, МАКСИМУМ! я который смотрит 6 урок на 3 с половиной часа !! Это шутка Денис, у тебя крутые видео, продолжай в том же духе!

[@ЗапасЗнаний]

Лайк перед просмотром урока. Все по красоте для новичков.

[@-it7046]

Продолжение) супер! Не сомневался в тебе автор) учусь по твоим видео!

[@UchimVmeste.]

Денис , когда ты устаешь , реально лучше завершить трансляцию чем морочить голову и себе и людям.

[@soko9005]

Добрый день. Хотелось бы спросить, почему же наши карточки не рендерились и вместо плюсов не появились галочки, ведь в их isAdded есть true, насколько я понимаю при изменении каждого state в App react заставляет все перерендериваться и в итоге должны и карточки?? Сломал себе мозг, но все равно не пойму, не могли бы Вы еще раз объяснить, пожалуйста

[@kanyshaiosmonova2008]

было сложно понять useContext, пойду и еще дальше буду изучать. Спасибо за уроки! Было очень полезно

[@alexandrgusletsov2567]

жду продолжение, спасибо тренер , было полезно , спасибо

[@ВадянойПионер]

Все супер! Но есть одно пожелтение, а именно: можешь в описании ролика прикреплять план на урок и тайминг. В последующем чтобы проще было ориентироваться по тем или иным вещам

[@kseniiaefremova4696]

Хороший курс по Реакту, и отличная подача материала. Я делаю другой интернет магазин и ваш курс для него тоже прекрасно подходит. Понятна логика и объяснения! Спасибо!

[@coldtouch9099]

Курс топ, спасибо большое!

[@bossmusa9075]

Данная серия после часа 30 я уже не совсем понимаю что делаю)) надеюсь не только у меня так

[@tupotapok6689]

жиза

[@qwetfcvnjjjnbg25]

Как успехи, удалось устроиться?

[@vagiz]

Спасибо большое за труд!

[@dyadyavitya467]

Подскажите пожалуйста как называется рисовалка с линейкой, которую вы используете?

[@cryptodillery119]

Это как летсплей какой-то игры, очень интересно смотреть за прохождением)

[@Александр-ц4т8в]

ааааа.... Объясняешь круто, все пытаешь разжевать и объяснить, но голова сейчас лопнет, такое ощущение что я не когда даже до такого уровня не дойду((( Спасибо за крутой контент

[@Александр-ц4т8в]

спустя столько времени, я все таки понимаю все, что ты говоришь и пишешь. Слушаю, что ты будешь сейчас делать и пишу на перед тебя, если какой-то затык, то чуть-чуть подсмотрю, говорю сам себе "аааа так вот как" и пилю дальше сам. Самое сложное было построить алгоритм интерфейса с закладками и корзиной, что бы при первом нажатии добавлялось, а при втором удалялось и при этом везде все правильно показывалось, галочки и сердечки. Спасибо большое за курс и суперское объяснение контекста.

[@Человек-р9ц]

@@Александр-ц4т8в и как? сейчас трудишься?

[@Александр-ц4т8в]

@@Человек-р9ц Сейчас работаю верстальщиком, устроился еще до изучения реакт. До августа дорабатываю, так как в отпуск очень очень хочу. Собесы начну проходить заранее июнь-июль, буду тренироваться на тех компаниях где я точно не буду работать, нужно узнать свои пробелы, ну и мандраж убрать, знаю это по поискам на верстальщика.

[@fringle6457]

@@Александр-ц4т8в Ну а сейчас кем работаешь ? аахахах, интересно стало)

[@Alon794]

@@fringle6457 он же написал - верстальщиком.

[@serjdenisov2114]

Спасибо за курс!

[@xonnox9901]

Спасибо за столь полезный контент! Небольшая просьба. Можешь ли сделать в VS Code другую Color Theme, чтобы закрывающиеся скобочки было чётче видно. Please)

[@ArchakovBlog]

уже сделал)

[@xonnox9901]

@@ArchakovBlog Пасиб))

[@anzhelikacherniavska2605]

Этого очень не хватало на протяжении курса) при отлавливании ошибок на маленьком мониторе нужно было присматриваться)

[@Человек-р9ц]

Dennis, привет)) Когда мы переделали запрос на сервер через fetchData() на 1:06:06 то сайт принимает данные с mockAPI только в том случае, если есть в items, cart и favorite хотят бы один объект с данными, иначе загрузка с данными прерывается и сваливается в ошибку. Соответственно , сайт не отображает item. Скопировал ваш код с исходников, все то же самое. Далее пофиксим, или у меня одного так? 3й день с этим мучаюсь, не знаю, что делать..

[@triton0920]

аналогично

[@Grantttorg]

+++ тоже самое

[@ArchakovBlog]

а какую ошибку пишет? проверь еще, пожалуйста, что тебе возвращает в ответ: корзина, фавориты и айтемсы. Эти три запроса должны вернуть массив. Тогда, по идее, всё будет работать корректно

[@Grantttorg]

@@ArchakovBlog Добрый вечер. Ошибку не выдает, суть вот в чем: так как идет запрос сначала к корзине, потом к фаворитс и в конце к айтемс, поетому если в корзине или фаворитс пусто то ошибка 404 и запрос к айтемс не происходит, к нему просто как бы не доходит очередь. P.S. пусто не в стейте а именно в мокапи

[@Человек-р9ц]

@@ArchakovBlog ​ @Archakov Blog Да, Дэн, пробовал и твой код копировать и в свой проект вставлять, все то же самое. Вот залил видео, как это выглядит kzbin.info/www/bejne/sGKoiqaYi9-poJo

[@Игорь-п5б1ъ]

Спасибо за урок. После пиццы скучновато, но очень уж мне нравится твой подход. А на счет сторонних есть две версии: 1. Люди не хотят юзать то, что они не понимают ( перфекционизм наше все). 2. Боятся потратить на либу время, а она загнется. Вот если бы ты объяснил , что надо попробовать, поюзать не весь функционал а какую то часть в таком то случае, мб тебе бы так и не писали )

[@azizbekrasulov949]

То случай когда вместо двух фильмов посмотрел этот видеоурок и было даже интереснее

[@anton-vr5xw]

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

[@whatisloveel]

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

[@CDmus]

У кого то была проблема с useContext Когда я передаю cartItems favorits items у них пустой массив не могу понять где ошибка. Я заметил что этот массив пуст лишь на мгновение думаю проблема в asynk await функциях

[@multtanker6365]

оч хорошо объяснил useContext)

[@vibetotrip2316]

Хороший курс, но после 2х часов уже ничего не понятно, особенно когда говорят: «зайди сюда, от сюда убери» а почему мы это делаем, не понятно :(

[@lesjoni8347]

Try catch, лучше всего использовать с axios? Поэтому что в fetch там уже есть then и catch. Или и fetch можно обернуть?

[@temamx]

Очень крутой контент!!

[@timchenkod88]

Здравствуйте. Спасибо Вам за очень интересный и полезный курс. Можно как-то с Вами связаться? Писал ближе к концу 2022 года, уже Роутер поменялся, возможно поэтому или по какой-то другой причине не работает Скелетон и в принципе очень долго грузится страница. Очень хотел бы разобраться, если поможете.

[@sportschelsea8799]

@ArchakovBlog, в Mock API теперь ограничения, нельзя больше 2 ресурса хранить, есть другие сайты с подобным функционалом?

[@vitaliylipovoy6210]

Храни другие ресурсы на втором аккаунте

[@КройторАлександр]

привет, доделал проект?

[@sportschelsea8799]

​@@КройторАлександр привет, да

[@kaiparker6710]

А где можно у вас ещё посмотреть уроки по контексту?

[@nikitamaliarchuk2481]

А ведь всех этих костылей с id можно было избежать добавив уникальный id товара, который был бы во всех таблицах привязан к конкретному товару.

[@front-cat]

либо осуществлять сравнение по названию товара, по сути это и есть уникальный id

[@void6237]

@@front-cat Названия могут повторятся

[@void6237]

У меня такая проблема: Я не могу вызвать объект из mockapi по своему уникальному id

[@front-cat]

@@void6237 зачем иметь 2 товара с абсолютно одинаковым названием ?

[@front-cat]

@@void6237 к сожалению без контекста проблемы, помочь не смогу

[@argentum2521]

такая ошибка у меня. когда добавляешь items в cart , то происходит такая вещь: первый items добавляется, а второй нет, третий items добавляется, четвертый items выдает not found. почему то в корзину добавляется всё через раз

[@Sweet-Bubaleh]

С середины этого видоса вообще перестал что-либо понимать и посыпались ошибки какие-то! В первый и последний раз смотрю какой-либо курс, записанный произвольно со стрима )

[@YulVilaya]

у меня в самом конце 3:14 не удаляется по id, пишет id is not defained

[@exe611]

на моменте 1:38:28 у меня код идентичен, абсолютно идентичен, только вот у меня ошибки появляются на счет id, title, imageUrl, price. Пишет, что не может их прочитать. Что делать?

[@exe611]

смог исправить, я до этого передавал id={obj.id} и т.д. Решил попробовать это {...obj} и заработало

[@veronikas.1347]

С другой стороны это круто, что школьники, которые пишут бред в сообщениях с донатами (в предыдущем выпуске мешали работать) учат программирование в столь юном возрасте. Плохо, что у них отсутствует воспитание...

[@helplrewerse2925]

Все переписал буква к букве, но не пашет удаление товара с главной и отображение плюса при добавлении и обновлении.

[@LizzyBrio]

открой файл с Card и в верстке кнопки плюса проверь, чтобы было added в условии отображения вариантов этой кнопки:

[@LizzyBrio]

но это костыль)

[@Alon794]

@@LizzyBrio у меня таже самая проблема, автор видео косячит походу. При обновлении страницы не сохраняется зеленый плюсик. Я из-за этой проблемы заново весь курс начал проходить и снова тоже самое. Очень разозлил меня этот курс и этот автор этим косяком. Как так можно? Хоть помог бы! p.s., Весь код проверил идеально: всё в точности как у автора!

[@LivePassingGames]

Кто-нибудь знает в чем проблема? 2:55:30 Когда нажимаю на оформить заказ, то у меня возникают ошибки типа cartItems.some is not a function isItemAdded. До этого каким-то чудом решилась подобная ошибка, только с кнопкой Оформить заказ. Тоже какую-то функцию таковой не считала Причем если я это делаю на localhost:3000/favorites, то все работает нормально, но возвращаясь на главную снова возникает эта ошибка UPD: РЕШЕНО В drawer.js , где const onClickOrder = ( )=>{ setIsOrderComplete(true) setCartItems({}) } Вместо setCartItems({}) должно быть setCartItems([])

[@strelok6903]

Такой вопрос ,почему когда заливаешь сайт на реакте в git hub pages при переходе на сайт просто выдает белый экран ,делал по твоему видео старому где ты показывал как заливать реакт приложение на хостинге

[@FilmsMediaTV]

В Конце вопрос, ответь пожалуйста! Топовый урок! Как по мне самый тяжелый из всех но и самый познавательный Спасибо тебе за такой классный и, что удивительно ХАЛЯВНЫЙ курс. Донат залетает в конце курса однозначно !! На сколько данный проект отличается от того если бы он был коммерческим ? + - в процентном соотношении

[@nikomunikabelen8540]

спасибо!

[@Petrov-Live]

Лоадинг можно было сделать просто обычным переключателем через UseState, чем создавать какой то массив дополнительный. Тем более когда в компоненте Card уже условие было готово =)

[@exe611]

объясни пж как это)))

[@nagibbator4449]

что ты жмёшь чтобы выровнять в столбик все пропсы переданные в компонент?)

[@Валерка-п6х]

shift +alt+k+f

[@КамильМиникеев-ю4д]

2:37:00 В предыдущем уроке автор сам решил убрать строчку, а в этом уроке не понимал долго почему ее нет)

[@YulVilaya]

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

[@rw_machine1974]

Это наверное странно, но у меня почему-то при удалении товаров из корзины, галочки автоматически убираются без использования контекста. При том что всё делал в точности как показано в уроке. Может это связано с тем, что за год произошли некоторые изменения в реакте, которые влияют на подобные вещи.

[@КамильМиникеев-ю4д]

Либо через контекст можно как на видео. Либо через пропсы прокидывать (возможно у вас так).

[@mrrappbit]

потому что мы в карточку прокидываем item корзины и проверяем наличие в ней товара, соответственно при каждом изменении состояния корзины происходит повторный рендер карточки где проверяется снова наличие товара в корзине

[@hentum7788]

Ни кто не знает в чем прикол, там где пишу [...Array(10)] все на сайте пропадает, а если без трех точек написать то все работает

[@matveyd7272]

дай бог тебе здоровья!) сижу второй час не могу понять что не так, оказывается проблема была в трёх точках Только получается теперь, что при загрузке отображается всего одна "непрогруженная" карточка

[@hentum7788]

@@matveyd7272 без трех точек выводится только одна фейковая карточка, я создал пустой масств с объектами и его вызвал в том месте где это точки

[@front-cat]

@@hentum7788 у меня примерно в этом месте было затруднение со скелетом, в итоге вынес скелет из карточек на страницу home, и уже там ее рендерил

[@mentafolium2217]

Благодарю за решение, так же сидел и морочил голову...

[@creese85]

Спс за урок!!!

[@jamjam3337]

👍

[@alexxxx89]

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

[@svoloche_]

Не обновляется const [isAdded, setIsAdded] = React.useState(added) на true 1:38:39

[@adammunaev6340]

передавай через контекст

[@dimka3628]

Ощущение будто интересный сериал смотрю.. над попкорнчик купить

[@fringle6457]

2:36:40 лол, так ты сам сделал так, чтобы на клиентской части не сразу удалялась, якобы клиент может мискликнуть по кнопке)))

[@sergeydenisovich4424]

Дэн, подскажи пож-та что за прога у тебя - kzbin.info/www/bejne/aJuvd4efrtmZnck Спасибо

[@БабкенГеворгян-ю9ю]

какая у тебя тема на vs code ?

[@ЭнтониСтарк-й9ы]

mokka

[@darkside2436]

Как тебе Vue js?

[@programmeruz9714]

Добрый вечер. Пожалуйста отзовись, у меня Id почему-то undefined. Помоги пж, 3 день мучаюсь((

[@ivanavlasevich9005]

В карточках на бэке задай. У меня удаление по нажатию на зелёную галочку не работало по id, делал по title...

[@restuschannel9031]

скорее всего ты забыл его где-то передать, подозреваю что в страничке Home когда по массиву мап делаешь и там в карте прописываешь key, id и т.д. делай как в видосе указано передавая ...obj(...item) или же не забывай прописать туда id.

[@ivanavlasevich9005]

@@restuschannel9031 салют, у тебя не возникло проблемы с id в карточках и в корзине?

[@restuschannel9031]

@@ivanavlasevich9005 смотря какой , у меня уже куча их возникало, но в большей степени почти всё связано было с тем что я забывал где-то куда-то прокинуть пропс, и если бы изначально юзал контекст возможно таких бы проблем не возникало)

[@FooFie2131]

не легче было, вместо перевода ID у товаров в число просто сделать не строгое сравнение?

[@TheAlexChannelClub]

Отвечать не нужно Сам разобрался В App есть такая функция. Она получает в качестве параметра id Сравнивает его с тем что есть в стейте Я не могу понять откуда в нее приходит id По логике оно должно приходить из евента. Мы сравнивает то на что мы нажали с тем что у нас уже есть в стейте. Но вот синтаксис мне пока не ясен Из какой именно строчки оно берет это id Которое приходит в качестве параметра const isItemAdded = (id) => { return cartItems.some((obj)=> Number(obj.id) === Number(id) ) }

[@YulVilaya]

жалко, что слайд с лягушкой не будем делать из макета

[@serjsamoilow8711]

helloWorldYopta xD

[@bossmusa9075]

1:41:35

[@UchimVmeste.]

Очень большая каша с этим фаворитами , айдишками и т д. Надо 10 раз посмотреть чтобы что-то понять . Нету конкретики.

[@alexcseev]

Я

[@etoyoshimura6228]

Этот курс вряд ли можно назвать для джунов , курс сделан на костылях , ощущение будто автор не понимает о чем он несёт. Да автор пытается че то объяснить , но очень туго. На каждом шагу баги , много не нужной воды . Интересно о каком менторстве может идти речь ? Если мысль не можешь свою правильно изложить. Жалею что смотрел до 6 урока , пустая трата времени.

[@gribashov8315]

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

[@gribashov8315]

т.е. все что происходит в уроке не выглядит как тупой пересказ документации

[@serzhuk22]

Критикуешь - предлагай. Или не критикуй. Нравится - не нравится - все субъективно.

[@ShoTHIk]

Подача материала Автором, лично для меня очень даже заходит. У него не заготовлен где то код, он его не копирует откуда-то, фиг пойми откуда, он пишет его в реальном времени, рассказывает, излагает свои мысли, и что !очень важно! - сталкивается с ошибками, багами, с которыми сталкиваюсь я при написании этого же кода. После озвучивания своих мыслей автором и указания вектора его действий, я ставлю видео на паузу, стараюсь написать код за логикой автора, сталкиваюсь с трудностями, ошибками, пытаюсь их решить. Что-то получается, что-то нет. Включаю дальше видео, и тут автор сталкивается с теми же ошибками что и я, рассказывает почему они возникли, как их пофиксить и как их можно избежать. Да, я нашел ещё кучу багов в этой приложухе, которые автор пока не решил (я пытался их решить но пока не получается) и которые мозолят мне глаза. Может быть в следующем видео он всё пофиксит, (я ещё его пока не смотрел), но тем не менее: контент- Топ! :)

[@nikita00750]

Присоединяюсь, друзья, прекрасно объясняет , и видно , что автор на опыте

[@TheAlexChannelClub]

Спасибо огромное за твою работу

[@АлексейЧухланцев-л5г]

1:52:00

[@bossmusa9075]

2:39:37

[@んだ男二度死]

2:40:50

[@jr-fb5lo]

2:30:44