Создание ИНТЕРНЕТ-МАГАЗИНА на 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

[@justfisher2920]

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

[@gozelovezova148]

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

[@caniputyourdickinmymouth]

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

[@lilchich4823]

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

[@oneviewgaming967]

ахахха

[@powerjavascriptman]

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

[@lilchich4823]

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

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

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

[@nikolayg.5319]

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

[@kuban2359]

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

[@Tomkovich]

спасибо)

[@dimasnytin]

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

[@Tomkovich]

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

[@Dragin_work]

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

[@sampetrosyan3669]

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

[@carteblanche999]

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

[@lilchich4823]

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

[@JavaScriptcher]

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

[@Tomkovich]

Спасибо ❤

[@TheS68123]

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

[@simpleview1433]

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

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

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

[@inesatananyan1191]

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

[@jiauyjiauy3777]

1:27 "npx create..." ебать, по-моему, в первый раз на ютубе сталкиваюсь с русскоговорящим разрабом, который знает алфавит. Только за это лайк бахнул))

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

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

[@Tomkovich]

спасибо ☺

[@alexeyfilippov42]

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

[@Tomkovich]

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

[@dmaberlin]

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

[@dirtyd20]

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

[@Sergey_Klimov]

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

[@AntonioBenderas]

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

[@Tomkovich]

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

[@AntonioBenderas]

@@Tomkovich 100%

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

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

[@mazerafi138]

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

[@radist126]

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

[@dssdfsfddsf3761]

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

[@MenuMoscow]

холосо)))

[@DevGirl-pv8gt]

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

[@ruslankashapov5443]

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

[@excconfusion879]

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

[@Alexander_1ov]

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

[@luckytima2315]

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

[@АртемМаксимович-й4к]

Компоне́нта - составляющая чего-либо; термин, используемый в математике и физике; сфера употребления термина компонента у́же, чем слова компонент, и включает в себя только терминологические контексты. Компоне́нт (от лат. componens, род.п. componentis «составляющий») - составная часть, элемент чего-либо. В программировании - множество классов и языковых конструкций, объединенных по общему признаку, предназначенного для повторного использования и развёртывания.

[@LenaFelica_songwriter]

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

[@frainnizil5279]

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

[@foumRU]

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

[@Tomkovich]

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

[@13mugen]

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

[@IvanZabolotny]

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

[@Tomkovich]

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

[@boycovclub]

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

[@IvanZabolotny]

@@boycovclub 13523 раза

[@DrKhmel]

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

[@salmanal-farsi1141]

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

[@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? Оно учится за вечер

[@МаксимПогорелов-е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)

[@frainnizil5279]

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

[@ВладиславКолесник-ъ6я]

ты топчик

[@seoonlyRU]

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

[@arturbrauns8292]

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

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

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

[@arturbrauns8292]

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

[@AmirLT-x6y]

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

[@xdayx53]

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

[@spondiasshow8319]

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

[@hamormaratovuch4181]

Super

[@disconnect3763]

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

[@zergzerg4844]

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

[@No-zk5xn]

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

[@narek1771]

концовка топ

[@AntonioBenderas]

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

[@narek1771]

@@AntonioBenderas ок

[@AntonioBenderas]

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

[@wavesfeel905]

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

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

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

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

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

[@Iwalkaroundtheworld]

Хорррошо 🤗

[@asmix7328]

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

[@SergeyGoodDay]

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

[@O_Shpak]

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

[@Dvs-my1nw]

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

[@vladi4507]

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

[@valerypobelenskiy1001]

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

[@sashayakimov6]

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

[@Dvs-my1nw]

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

[@mallaw4625]

Теперь я понимаю, почему ИТ в Беларуси такие хреновые.

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

Не понял тебя, причём тут Беларусь? И почему плохо то?

[@Thomas-ow2tf]

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

[@inesatananyan1191]

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

[@Tomkovich]

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

[@inesatananyan1191]

😀@@Tomkovich

[@inesatananyan1191]

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

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

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

[@romanstein13]

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

[@alexeyfilippov42]

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

[@dmaberlin]

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

[@АзимАзимов-с6н]

Привет красоточка, урок классный! моё почтение) Мне кажется или видео оборвался в моменте создания этой функции? export const createUser = createAsyncThunk( "users/createUser", async (payload, thunkAPI) => { try { const response = await axios.post(`${BASE_URL}/users`, payload); return response.data; } catch (error) { console.log(error); return thunkAPI.rejectWithValue(error) } } )

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

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

[@РедШухов-я9е]

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

[@blackwood8816]

пиши свои стили или используй библиотеки

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

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

[@evolution3658]

разве у такого магазина будет нормальное SEO ?

[@grsd2017]

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

[@kenanhaciyev3759]

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

[@quuade]

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

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

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

[@olgapan386]

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

[@salam_javascript]

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

[@olgapan386]

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

[@xleb__b]

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

[@nics51]

так се

[@valerypobelenskiy1001]

Информативно все как все таки React упрощает JS ...

[@igixprffikiberg2636]

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

[@jamjam3337]

👏👍

[@dmaberlin]

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

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

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

[@marina-ej4qd9kc1wh]

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

[@silverbkv]

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

[@marina-ej4qd9kc1wh]

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

[@y0na24]

+саб

[@Tomkovich]

+ Вам к профессионализму

[@chlen3150]

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

[@dmaberlin]

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

[@oxygen8168]

purchases

[@true227]

44:23 неверно

[@dazuki_daz16]

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

[@silverbkv]

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

[@Denis-rh9jp]

nice bro

[@-AGENT228-]

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

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

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

[@LuNa-om8ci]

да

[@MurodilIbroximov-pq1wl]

Spasiba bolshoe sestra

[@Strochkin]

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

[@Tomkovich]

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

[@mainName777]

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

[@bersagiev8233]

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

[@LenaFelica_songwriter]

я сейчас вообще без продуктов и трендов - просто черные квадратики

[@liiavard2353]

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

[@sempregiovane1]

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

[@silverbkv]

Практика

[@dastan-03]

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

[@SNSDfOu]

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