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

[@ЕвгенийИльинский-ж5х]

@Archakov Blog таймкод: 2:27 - Начало 5:30 - Ответы на вопросы из чата 8:10 - Небольшие изменения в дизайне 14:30 - Верстаем инпут «Поиск» 22:15 - Дорабатываем верстку карточек товара 32:30 - Верстаем side-block корзины на главной 36:26 - Верстаем карточку товара для side-block корзины 53:40 - Верстаем нижнюю часть side-block корзины на главной 1:13:50 - Объяснение что такое JSX 1:20:15 - Как поделить верстку на React компоненты 1:54:05 - Итого что мы сегодня узнали 1:57:40 - Немного про то, как залить изменения на Git 1:59:50 - Ответы на вопросы зрителей Спасибо тебе за контент для джунов. Ты супер!

[@СейтекБегалиев]

Ты лучший!

[@AinagulDaiynova]

😊

[@alianmanpi35]

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

[@death_to_enemies_]

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

[@АлексейБатькович-з5т]

И вот я уже здесь. Второй урок. Перерыв на пару часов и приступим) Спасибо учитель

[@YulVilaya]

ой, а я так рада что вертска в прямом эфире 😊 хорошо что не успели без нас сверстать )

[@alexbork8659]

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

[@PracticeSNow]

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

[@thirdbyron]

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

[@antontsvil245]

Сказать, что я тебе благодарен это ничего не сказать. И всё же спасибо мужик =)

[@МихаилСабуров-ы1в]

Очень круто! И хорошо что продолжил с версткой, многое вспомнил, многое для себя подчеркнул. Давно не верстал. И с Figma посмотрел как работа ешь. Огонь!!!

[@ildarzinnatullin8920]

Карл в восхищении!)

[@skullsk9028]

Спасибо за твой контент, очень подробно все рассказываешь, побольше контента для джунов) Мало кто так разжевано объясняет, респект тебе!!!

[@LegoMasterteam]

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

[@майнкрафт-к2и]

Ты просто монст в обучении!Блогадарю тебя!)))

[@ЧтодаКак-б2ъ]

Спасибо, за подробное разъяснение. Тебе надо книги писать с обучающим материалом.

[@vladislavkatz9774]

Объяснения на высоте, спасибо, очень полезно. Но блин, когда полгода писал классы БЭМУ, после такого именования классов хочется плакать, верстка превращается в непонятную абракадарбу возможно дело привычки, но все же...

[@АлексейБатькович-з5т]

что бы тень была на всю карточку и что бы она приподнималась при наведении лучше hover вытащить отдельно код вот такой .card:hover { box-shadow: 0 14px 30px rgba(0, 0, 0, 0.05); transform: translateY(-5px); transition: 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } Может раньше этот код и работал, но сейчас у меня не получилось так. Получается применяется к каждому элементу card отдельно)

[@artmnq]

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

[@aktotuttttt]

flex direction column не применяется. Какое то фиолетовое поле у родителя внизу мешает. Не понимаю что это и откуда!?

[@olegkaramazov5554]

Спасибо. Понял компоненты, ты их по пальцам раскидал

[@alexandrgusletsov2567]

спасибо автору вообще )) сумасшедший правильный контент

[@kanyshaiosmonova2008]

Спасибо большое! Очень полезный курс особенно для начинающих.!!!

[@АндрійШвайка]

За VirtualDOM сразу лайк))

[@matveyd7272]

Чтоб различать горизонталь и вертикаль, просто вспомни, что горизонт - горизонтальный) А если по-английски - то column (как колонна) - вертикальная. Ну а row (ряд), соответственно горизонталь (можно вспомнить игру "три в ряд" (3 in row)

[@EuegenTv]

Очень классно объясняешь, единственное что, все же стоит начать писать по BEM

[@kenanhaciyev3759]

Шикарно)

[@lotvaplotol5578]

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

[@IvanShastsiarniou]

Спасибо. За видосы !!!! Для новичков самое то !!!!! Объяснять очень. Доступно и просто ! И те кто пиздят что нудно высылай нахер !!!! Пусть сами попробуют объяснить!!!!! Ты круто рассказываешь !!!!

[@mwttr]

Привет. Сейчас начал смотреть этот плейлист. Как раз на 1.75 смотрю) Уже читал про рекат, но решил еще просмотреть твой плейлист и сделать сайт для портфолио. Спасибо за контент!)

[@Shved_2.0]

Обучение уровня бог, просто пушка

[@sashayakimov6]

Спасибо за контент и подачу!!

[@yurizhdanov]

спасибо за видео очень доступные уроки

[@temamx]

Спасибо тебе за старания, очень интересно!

[@ayhanak8913]

спасибо огромное за то, что делаешь

[@nikomunikabelen8540]

Спасибо😀😀

[@nadiiabeskurskaya8233]

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

[@anton-vr5xw]

мегаполезные уроки, спасибо огромное )))

[@darkside2436]

🔥🔥🔥Спустя 15 минут после конца трансляции уже 165 лайков.

[@igordiify]

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

[@SHIRZA1]

Спасибо за старание Арчаков 👍👍👍👍👍👍

[@dinmukhamedamirov2704]

Спасибо большое!

[@УланБекишов-б6ш]

Контент топ, спасибо большое)

[@margaritapetrova4657]

топ уроки и озвучка приятная )

[@handyfrontend]

А почему ты используешь macro-css? 2 года назад Tailwind еще не было?

[@nikitabaranov523]

Отличное видео как всегда🔥

[@nikitabaranov523]

Лучше делать верстку вместе, так интересней

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

спасибо за классные уроки по реакт!

[@Астролайф-э9ю]

Великолепен!!!

[@serega_vvoi7137]

C Версткой норм)

[@cryptodillery119]

Твои видео это как сериал, интересно все время чем все закончится)

[@tigranovakyan2783]

Вертикаль (буква В - "вверх, взлет" ) Горизонталь (буква Г - "горы, горизонт")😊

[@mr.zxzxzxz3816]

мощный урок🔥

[@aktotuttttt]

если у кого то будут проблемы с позиционированием, flex 1 обязательно для items я вот упустил

[@sergeyovsynnikov6332]

спасибо!!

[@kanyshaiosmonova2008]

оказывается я тоже. спасибо

[@kanyshaiosmonova2008]

но все равно не помогает

[@bossmusa9075]

input {outline:none;} если у кого-то обводка вокруг самодельного поиска при клике

[@kb0396]

Коммент для продвижения канала. С нетерпением жду следующий стрим! пы.сы Почему ты используешь расширение js в компонентах, а не jsx? Или дальше будешь менять?

[@ArchakovBlog]

Дальше буду менять, пока решил не путать

[@kb0396]

@@ArchakovBlog благодарю!

[@ИмильМуллагалиев]

лучший

[@КамильМиникеев-г5ъ]

Почему просто не используете инпут со свойством background image?

[@pubhouser2103]

Ну почему...? Почему так красиво, Карл??)))

[@alekseidrinevskiy521]

Возникла проблема с drawer и с тенью Ставлю width 100%,а заполняется только на то, сколько экран видит,а ниже нет ни корзины,ни тени Как это исправить?

[@margaritapetrova4657]

такая же ситуация сейчас )) ПОМОГИТЕ

[@salvadorvdali6339]

@@margaritapetrova4657 На родительский элемент .drawer надо поставить position:absolute - здесь это будет owerlay. Но owerlay является абсолютным по отношению к своему родительскому wrapper. А у wrapper стоит position:relative т.е .wrapper{ position:relative; .owerlay{ position:absolute; .drawer{ position:absolute; } } }

[@progi99]

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

[@Объективныйвзгляд-з5к]

спасибо тебе

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

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

[@hitake9807]

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

[@vasilich_bear]

Друзья, коллеги. всем привет. Подскажите, установил реакт последней версии, 18, установил node-sass, версии 7.0.1, но почему-то в dev-tools в стилях показываетс scss , а не css, так должно быть ?

[@Anastasia-os4nl]

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

[@sonyaflexx]

1:48:57 - звучит как вызов на zxc

[@ProstoZurab]

Аллах1 раьз хилв хьона вош

[@GreatVolcano]

Слушай, можешь в конце курса показать, как деплоить этот проект на реальный (не бесплатный хостинг типо heroku и ему подобных) хостинг? На ютюбе нет хорошего объяснения как это сделать

[@excelente9842]

Для этого есть команда: npm run build После выполнения, в корне создаться папка build. Все ее содержимое залить на хостинг.

[@GreatVolcano]

@@excelente9842 для ispmanager тоже пойдёт?

[@excelente9842]

@@GreatVolcano Без разницы какая панель. Там же чистый JS, HTML, CSS будет после компиляции. Но это если чисто реакт собираешься использовать. А если захочешь подключить сервак на ноде, то нужно искать хостинг с его поддержкой.

[@nikitabaranov523]

@@GreatVolcano Можешь залить на Netlify, он бесплатный. Там ты можешь подключить github и твой проект сам соберется и ты почти сразу его сможешь увидеть в инете. Когда ты будешь что-то менять в коде и комитить, то тебе ничего не нужно будет делать, Netlify сам обновит сайт

[@GreatVolcano]

@@excelente9842 понял, спасибо большое)

[@PracticeSNow]

Крутой контент!! Как раз то, что нужно для совсем начинающих! Подскажите, кто знает, название этого графического редактора для верстки? Спасибо!

[@axelvirtus2514]

Figma

[@d_r_robot]

Лукас

[@kiyotako5751]

Всем привет почему flex-direction: column; не работает кто знает?

[@Victor-vx4br]

Мне display-flex + flex-column на 1:01:00 ничего не дал, как это можно исправить?

[@АлексейДанилин-л8я]

27:57 что это за символ перед :hover ?

[@АлексейДанилин-л8я]

нашел. это &

[@saadfarisi2186]

Лучше на ютубе не найти

[@azizatamirzaev8512]

А где таймкоды(

[@Boobnovslava]

отличное видео, жаль колво просмотров почти в 3 раза меньше, чем на 1ой части

[@Rohan-Sensei]

Где посмотреть твой API?

[@atlasua2021]

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

[@romkom8426]

Добрый день, прошу прощения, не совсем понимаю,что произошло на 01:00:53 минуте #2 урока. Вы использовали display:flex; flex-direction:column; в коде страницы. И данные изменения остались и после перезагрузки страницы. То есть какой-то перенос в код в vs code был, но не понимаю как. В вашем scss файле на гите упоминания flex-direction:column нет. Возможно это просто моя невнимательность и все на самом деле очень просто, помогите, разобраться, пожалуйста

[@romkom8426]

Вопрос отпал, в scss файле нужно было написать .items{flex:1;} и в .drawer{display:flex flex-direction:column}

[@ВолодимирРадочін]

Автору спасибо за курс, ребята есть пару вопросов , первый в селекторе .card не могу понять, где у автора закрывающая скобка 29:39 , потом 29:41 перед :hover что стоит за символ и зачем он надо, и связано ли это что у меня при наведении на карточку прыгает не только сама карточка но и цена при наведение на нее и название, как это убрать?

[@fatale2ror55]

Перед hover стоит амперсанд, & Проверь вложенность селекторов в .card, закрывающая скобка у .card после вложенного блока h5 .card { border: 1px solid #f8f8f8; padding: 20px; width: 220px; border-radius: 40px; margin-right: 30px; transition: box-shadow 0.3s ease-in-out, transform 0.2 ease-in-out; cursor: pointer; &:hover { box-shadow: 0px 14px 35px rgba(0, 0, 0, 0.08); transform: translateY(-5px); } .favorite { position: absolute; cursor: pointer; } span { font-size: 13px; opacity: 0.5; text-transform: uppercase; } b { font-size: 13px; } h5 { font-weight: 400; font-size: 14px; } }

[@АлексейДанилин-л8я]

перед hover стоит знак & (на англ раскладке shift + 7)

[@ДмитрийСитников-ш2х]

Проект наподобие этого не стыдно добавлять в портфолио? Или лучше что-то вроде уровня пиццы?

[@ArchakovBlog]

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

[@ДмитрийСитников-ш2х]

@@ArchakovBlog спасибо за твои труды! Для новичков это кайф)) С первой зп задоначу тебе)

[@YulVilaya]

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

[@pustotaxoxo]

Топ видос

[@ДианаНосик-р5ю]

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

[@salvadorvdali6339]

Привет!В телеграме каналы t.me/FigmaMaket и t.me/build_html

[@jamjam3337]

👍

[@Emir-ry9yl]

не подскажит ли мне кто нибудь из опытных поддерживает ли этот проект принцип SPA?

[@obeone_tv1834]

салют! почему у меня в js файлах эммет не автозаполняет html тэги?

[@polivokser]

Пропиши в файле settings.json: "emmet.includeLanguages": { "javascript": "javascriptreact" }

[@YulVilaya]

Shapka 🤣🤣🤣🤣🤣🤣

[@dalerabdullayev1002]

У меня есть вопросы, как с вами связаться

[@cdprojectred1564]

Кир нибудь знает,где можно достать верстку?

[@gign_141]

Телеграм канал автора. Поиске напиши название проекта.

[@nonamenosurname2899]

Добавьте, пожалуйста, тайминги

[@zhyrgalizm]

А как мне изменить цену или ещё что-то, только в одной или нескольких карточек? Ведь если изменить в компонентах, то изменятся всё!!!

[@getrogetro7509]

props

[@igorgorbatovskiy4836]

Карлы на месте??

[@rdk5365]

Привет. Спасибо за урок. export function Card(){}так приятней писать чем export default Card;

[@Denis-ws1vn]

не

[@skidrow7930]

это курс по верстке?

[@urek8988]

это для реакт джунов?

[@aftemaht]

Да, для джунов, которые только начинают учить его

[@OnlyLuck1000]

Для тех кто еще не знаком с React, я бы сказал для трейни JS developers

[@abakar05]

ЖАлко что скороть видео в ютуб нельзя в 3 раза увеличить, приходится смотреть на х2

[@svitoch_blockchain]

Согласен, много воды

[@cdprojectred1564]

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

[@Ибрагим-вввв09]

👍👍👍👍👍👍👍👍👍👍👍👍👍

[@anko5389]

У тебя синдром иностранного акцента ?

[@fatale2ror55]

1:01:20 аахахахахахахха

[@jamshidkarimov1021]

бывает :)

[@ХасановЛенар-в3р]

Верчуал ДУМ? ДУМ это что? Духовное управление мусульман? ))) Шучу конечно) Но в твоем исполнении DOM звучит реально необычно)