Создание ИНТЕРНЕТ-МАГАЗИНА на REACT.JS + REDUX + Деплой c API с нуля

[@Tomkovich]

Готовый код - github.com/tamkovich-yana/stuff Макет - www.figma.com/file/7itpNsHVP5LPUpK4ENDYkv/Shop?node-id=0%3A1&t=i8nKSaWzeNTqTOnX-0 Документация API - fakeapi.platzi.com/en/rest/introduction

[@Perun-cm5vq]

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

[@АлинаХамова-т8я]

со стилями та же проблема. почему то репозиторий приватный

[@makovchukers]

Будуть стилі ?)

[@gozelovezova148]

Проект работает, всё повторила как на видео, она молодец. Не зря потратила время…. Я пересмотрела много работ программистов и поняла, что готова повторять и учиться у ней, у других уже нет смысла повторять по 9-12 часов, один проект. За 4 часа она показала работу, которая для начинающих программистов, необходима ❤

[@caniputyourdickinmymouth]

А сколько времени у вас ушло на повтор этого проекта? я вот думаю тоже повторять все, у меня диплом 17 июня)))

[@natatrapaidze263]

Где мы брали стили? github недоступен (

[@lilchich4823]

боже, как же вкусно КАК ЖЕ Я РАД ЧТО ЭТО НЕ ПОПУЛЯРНОЕ ВИДЕО))) потому что если это посмотрят все, то все станут умными, и будет ещё сложнее найти ворк

[@oneviewgaming967]

ахахха

[@powerjavascriptman]

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

[@lilchich4823]

@@powerjavascriptman Согласен с вами :)

[@ИванИванов-л7ю]

Ну что нашлась работа для тебя спустя год?

[@kuban2359]

Отлично, всегда жду твои видео

[@Tomkovich]

спасибо)

[@justfisher2920]

Хорошая практика, всё чётко и понятно, мне понравилось работать с toolkit, впервые попробовал. В целом скажу что этот практикум явно не для новичков, а для тех кто хоть немного шарит за реакт и редакс, многие недоучки по любому пишут коменты что мол, нет семантики, вёрстка отстой и прочее, душнилам скажу сразу, здесь максимально пох...на вёрстку и прочее, хотите верстать, смотрите уроки HTML/CSS, хотите быть прогером, учитесь писать BLL совместно с UI. Единственный минус в том что нет чёткого разделения на контейнерные и презентационные компоненты, а так всё классно👍🔥

[@lilchich4823]

ёклмн, ты просто находка, у тебя столько годных гайдов, боже мой, как же я тебя раньше не видел.

[@JavaScriptcher]

Лайк, не глядя😎🔥

[@Tomkovich]

Спасибо ❤

[@zilant7]

стили уже не получиться скачать страницы на гитхабе нет((((

[@carteblanche999]

круто видео! было бы круто если еще можно было комментить свои действия, так как многое непонятно

[@excconfusion879]

Можете объяснить как на 10:15 она с помощью rafce создает и потом сразу же как будто сжимает код чтобы скобки перед return исчезли

[@Alexander_1ov]

Чтобы 'rafce' работал поставь расширение 'ES7 React/Redux/GraphQL/React-Native snippets'. Там еще много чего в нем, для автозаполнения. Скобки она убрала просто Alt+Shift+F...У меня стоит 'Prettier - Code formatter', он так же делает. Вернее я его поставил, после этого видоса). Еще он отступы лишние убирает и точки с запятой проставляет. Это все для VSC, для остальных не знаю)

[@МаксимПогорелов-е2л]

Кто смотрит в начале 2024 года - API работает норм (если просто ввести в строку броузера), а при выводе на 49 минуте в sidebar ничего не выводит. При обычном console.log видно, что в console.log(list) приходит три раза - первые два пустой массив, и потом уже приходит массив обьектов категорий. Кто знает, как решить вопрос, чтобы эти пустые массивы не выводились?

[@СанёкПриходько-с4ъ]

тоже 3 раза приходит, пока не разобрался в чем проблема( list Array(0)length: 0[[Prototype]]: Array(0) history.ts:501 No routes matched location "/products/15" warning @ history.ts:501 Sidebar.jsx:12 list Array(0)length: 0[[Prototype]]: Array(0) Sidebar.jsx:12 list Array(6)

[@sampetrosyan3669]

спасибо, буду ждать версию с Typescript-ом SUPER👏

[@LenaFelica_songwriter]

все круто, но почему-то у меня категорий не 5, а 35..🤔 как это пофиксить?

[@dirtyd20]

Математичный видос! Однозначно лайк + подписка 🔥

[@MikeGShorts]

Где стили взять?

[@simpleview1433]

вот что я скажу... на первый срок прежде чем смотреть поставлю сразу лайк) когда будет время смотрю ролик сначала и + коммент

[@Dragin_work]

практическое применение реакта!!! это отлично, всегда лучше учиться на практике и с реальными примерами

[@andryvoytsehovsky6591]

стили скачать не возможно на github ошибка 404

[@dssdfsfddsf3761]

у тя все будет хорошо, обещаю. Продолжай)

[@inesatananyan1191]

Люблю умных людей. Спасибо за видео 🥰.Хочу так же быстро писать коды🙄...❤

[@No-zk5xn]

у меня какая-то хрень в категориях, касасы и маркосы, кто знает как убрать?

[@ДмитрийПешнин-з7у]

Блин, ну что за милота :3

[@Tomkovich]

спасибо ☺

[@alexeyfilippov42]

о как раз на днях тебя вспоминал) доделал с нуля твой макет с видео. как же я намучался с свайпером мм

[@Tomkovich]

только мучения нас сделают лучшими

[@НискемкромеСовести]

{ "statusCode": 400, "message": "Validation failed (numeric string is expected)", "error": "Bad Request" } что делать? данные не приходят.

[@dimasnytin]

Спасибо большое. Обязательно посмотрю 🤩🤩🤩

[@Tomkovich]

Благодарю, должно понравиться!

[@TheS68123]

спасибо за наглядное применение react и redux. Иногда есть не понимание использование какой либо логике. Было бы лучше если бы это объяснялось для чего\или почему так используется.

[@mazerafi138]

Топчик! Спасибо!

[@SergeyGoodDay]

Иконки с svg почему-то не отображаются, вот просто пустота, можете объяснить как это исправить ?

[@O_Shpak]

и у меня не отображается , у меня еще проблема с UserForm никак не кликается и не скрывается в чем проблема не могу понять

[@nikolayg.5319]

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

[@СветланаАндреевна-х8р]

Спасибо за видео ! Ждем новых с реакт !

[@СерыйКойот-ъ6б]

По импортам хочу подсказать. Привет) Если автоматически не вылазает подсказка когда импортируешь файл, то выдели название файла, что ты печатаешь, нажми ctr + space и по идее появится подсказка с автоимпортом. Может поможет и упростит работу ^^

[@hyungnikim5162]

я не могу найти этот репозиторий

[@disconnect3763]

Хотел на ваш телеграм канал зайти, а его нету, нету пользователя с таким именем😔

[@dmaberlin]

Спасибо! только начал курс, но уже респект за yarn

[@zergzerg4844]

У меня вопрос. Зачем магазин писать на реакте, если там нет ssr, такое надо на next'е писать иначе поисквые роботы не проиндексируют контент?

[@ТарасДемченко]

проект супер.Продублируйте стили пожалуйста.

[@luckytima2315]

Ох ты 3 часа просто мое почтение

[@DevGirl-pv8gt]

Спасибо! Все получилось!

[@БерооОлпг]

Добрый день,Скажите пожалуйста,сколько стоит сделать сайт интенет магазин с оптимезацией и совсем остальным и был первым когда забиваешь запрос

[@СергейЛупу-т1с]

класный проект , и ты тоже👍

[@radist126]

Было здорово, чтобы я нифига не учил, а вы на работу вместо меня ходили. Навеяло комментами😅

[@wavesfeel905]

API поломали. Не могу продолжить урок. Пожалуйста, исправьте это.

[@IvanZabolotny]

4 часа, кайф))

[@Tomkovich]

Наслаждайтесь

[@boycovclub]

сколько раз кончил?)

[@IvanZabolotny]

@@boycovclub 13523 раза

[@valerypobelenskiy1001]

Вопрос почему в ютубе на Vue нет сочных ярких проектов все какое то блеклое и пасмурное очень мало... одни какие то CRM и TODO

[@AntonioBenderas]

Фигассе, какой контент, а я не готов ещё. React ещё не изучил

[@Tomkovich]

Самое время начать!

[@AntonioBenderas]

@@Tomkovich 100%

[@seoonlyRU]

чотко))) лови лайк от СЕООНЛИ!

[@romanstein13]

Привет ✌️ В этом видео нет функционала, когда при заказе, продавцу приходит имеил со списком заказанного товара?

[@frainnizil5279]

а будет гайд сто стэком react+ts, mobx?

[@MenuMoscow]

холосо)))

[@aidasabirova1315]

Привет, можно такой вопрос... А сколько времени необходимо было вам чтобы достичь такого уровня в программирований?

[@ilwl9018]

недели две-три.

[@ЕгоровДенис-д4ш]

@@ilwl9018 ахахахах

[@LegoMasterteam]

@@ilwl9018 ахахах год или 2 тут я учил месяца 4 html css, js учил 3 месяца (не вникал) потом react пока что 6 мес

[@Ari0tee]

​@@ЕгоровДенис-д4ш​​ ну кстати, без шуток, я учусь с человеком, который не любит Front-end, но чтобы сделать свое портфолио, он его понял за неделю - 2 Использовал: Redux, ReactTS, Nest и много других букв, которых я честно ещё не знаю, могу ссылку на его репозиторий дать, там увидишь стэк

[@kidll8824]

@@LegoMasterteam4 месяца учить html/css? Оно учится за вечер

[@frainnizil5279]

спасибо большое за урок!

[@grsd2017]

у вас используется jwt авторизация ?

[@DrKhmel]

Спасибо за видео) все получилось

[@Thomas-ow2tf]

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

[@ruslankashapov5443]

Я сделал это! Спасибо за практику!

[@kenanhaciyev3759]

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

[@quuade]

незнаю, актуально вам или нет, нужно использывать {list.slice(от, до).map(({ id, name }) =>())}

[@13mugen]

Наконец то долгожданное видео

[@foumRU]

Спасибо, подписался!

[@Tomkovich]

Спасибо за подписочку

[@ВасилийДимитров-с9с]

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

[@Sergey_Klimov]

Надеялся здесь найти реализацию фиксированной шапки при скроле страницы с использованием interseption observer. Почему то никто не хочет говорить по поводу этой темы. Типа пользователю чтобы начать поиск нужно обратно скролить до самого верха

[@МариамАкопян-х6з]

Подскажите где взять стили

[@IGODX]

IgorDX/stuff . Мой готовый проект на гитхабе. Все стили с помощью tailwind-а, если интересует изучения Redux, просто удалите всю логику связанную с ним.

[@asmix7328]

Спасибо за видос, это 100% жирный + в Вашу карму))) Желаю успехов и добра:)

[@Iwalkaroundtheworld]

Хорррошо 🤗

[@xdayx53]

Да, да, я тоже знаю другие теги - **Пишет вместо footer section**

[@dazuki_daz16]

Где взять готовый код всего сайта, со всем функционалом ?

[@silverbkv]

смотри закреплённый коммент

[@dmaberlin]

В компоненте Poster.jsx указаны стили и но стилей для text и button нету

[@vit1812]

Ссылка на github не работает.

[@igixprffikiberg2636]

Зачем вы используете обычные ссылки вместо NavLink???

[@perisone4902]

У меня почемуто через этот FAKE API уже другие данные идут, можно как-то исправить?

[@Tomkovich]

к сожалению, нет, это API создано не мной :(

[@perisone4902]

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

[@АлексейКрячок]

Прошу прощения, можно указать в футере свое имя? "Designed by "''me"", Пожалуйста?

[@bersagiev8233]

в сети есть данный код ?

[@-AGENT228-]

привки всем , а может кто сталкивался с ошибкой редукс Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers?

[@chlen3150]

почему не через vite проект?

[@spondiasshow8319]

вот ну круто же, все по полочкам 😀

[@vladi4507]

Крутое видео) что за цветовая тема в редакторе?

[@dmaberlin]

в файле Product.jsx мы делаем , но в стилях класса purchase нету

[@oxygen8168]

purchases

[@dastan-03]

У неё в гитхабе нету проекта я там хотел скачать css файлы откуда брать?

[@SNSDfOu]

все там есть лучше смотри

[@Dvs-my1nw]

Как впарить такое заказчику если 95% просят вордресс тильду и битрикс. морду к вордпрессу на этом нарисовать?

[@СергейК-б6н]

Ничесе

[@dssdfsfddsf3761]

не показывает че-то сприте свгшки в публик паке нехватал path to sprite.svg. решил спсибо ласкаА

[@salman_alfarsi]

29:37 Help meeee - мать успокойся хахахахаха😂😂😂😂

[@alexeyfilippov42]

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

[@sashayakimov6]

Привет, а что за волшебный спрайт, который видоизменяется)))) Есть список, значков для этого спрайта?

[@inesatananyan1191]

Дорогая Яна, если что-то не импортируется, поставьте курсор в конце слова и нажмите на ctrl и пробел.

[@Tomkovich]

оно тоже так не работает, похоже пора переходить на другой редактор кода 😀

[@inesatananyan1191]

😀@@Tomkovich

[@inesatananyan1191]

я год и больше училась React,JS,HTML,CSS,a вот теперь бросила, жалко конечно, столько труда, силы и ресурсов вложила🥲. Всем рекомендую сначала найти работу, потом начать учиться, потому что сейчас найти работу новичку почти нереально😏.🙏🙏🙏

[@dipper1138]

Как его запустить?

[@НиколайДовгий-ж7о]

Привіт! Відео ТОП!! Підкажи будь ласка на 25:14 хвилині не дуже зрозуміло як ти вставляєш svg зі sprite, які гарячі комбінації використовуєш ? поділись будь ласа

[@dmaberlin]

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

[@АлексейБатищев-щ3ч]

Попробуй так, найди или напиши сам версту, а затем примени это, я так делал с двумя, или тремя уроками

[@karkusha_gameshow]

не могу забрать стили в гите, /stuff отдаёт 404, кто нибудь позязя скиньте актуалочку

[@ilyailya8363]

В конце видео автор заливает сайт на хостинг, сайт до сих пор доступен. Через инспектор браузера заходим во вкладку Sources - top - fantastic - static. Там весь код можно посмотреть.

[@arturbrauns8292]

Было бы здорово, если бы вы комментировали каждое действие свое. Это очень здорово бы нам помогало:)

[@РинатЯрмухаметов]

И так понятно. Если нужно прям разжевать всё, то смотри арчакова

[@arturbrauns8292]

@@РинатЯрмухаметов спасибо большое за рекомендацию:)

[@AmirLT-x6y]

@@РинатЯрмухаметов thanks

[@narek1771]

концовка топ

[@AntonioBenderas]

Не спойлери, я мотать не собираюсь

[@narek1771]

@@AntonioBenderas ок

[@AntonioBenderas]

@@narek1771 о, только заметил, аватарка ТОП! Wu-Tang foeva

[@hamormaratovuch4181]

Super

[@Dvs-my1nw]

Реально фриланс найти на подобном стеке или только дядя?

[@ВиталийВиталий-с4е]

а это норм когда в одном компоненте куча useEffect и useState?

[@LuNa-om8ci]

да

[@olgapan386]

Огромное спасибо за урок! А что касается SEO оптимизации.. Будет ли такой сайт виден для поисковых систем?

[@salam_javascript]

нет, т.к. это SPA. вообще интернет магазины обычно пишут на Next.js для использования SSR, тогда можно будет делать SEO

[@olgapan386]

@@salam_javascript Ок, спасибо. Просто видела в одной статье, что вроде как гугловские боты уже научились их читать. Не знаю, насколько это правда..

[@xleb__b]

@@olgapan386 бот видит только один див root, поэтому сайт написанный на реакте не оптимизирован для SEO

[@MurodilIbroximov-pq1wl]

Now time have categories : shoes and electronics yet, where is all categories?

[@marina-ej4qd9kc1wh]

Привет, видео просто супер! Если не затруднит, у меня такой вопрос: у меня есть файл json с категориями в корне. Как мне его подключить, чтобы не пользоваться Platzi Fake Store? Я на дурака так попробовала - export const BASE_URL = "./categories.json". А под продукты еще файл создавать? Как это делают умные люди?

[@silverbkv]

json-server в помощь или MirageJS, но на реальном проекте нужно бэк делать

[@marina-ej4qd9kc1wh]

Спасибо, @@silverbkv . Мне как раз нужно фейковый создать

[@Дмитрий-щ4ы5ч]

А что за тема в vs code?

[@Параноик-ш6х]

Tokyo Night. Ищи в расширениях. Если интересны иконы - расширение Material Icon Theme

[@АлексейБатищев-щ3ч]

Отличный урок, только такая проблема раньше всë работало, а теперь апи, возвращает 403 ошибку, и не грузит картинки товаров, если посмотреть что в консоли, то картинки есть. Бред какой-то, раньше же всë работало

[@liiavard2353]

Привет! Я только начинаю свой путь во Фронтенде. Скажи, как стать такой же умной? Я хоть и делала какие-то штуки на практике, но многое не понимаю( Задачки эти с кодварса не поддаются, просто не запоминается решение( Да и просто вопросы на собесе для меня какой-то ад😢

[@sempregiovane1]

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

[@silverbkv]

Практика

[@Strochkin]

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

[@Tomkovich]

сложно так сказать, в чем проблема. какая там ошибка конкретно?

[@mainName777]

Ну что разобрались как стартануть проект ? через год 🤣😂