Styled Components & React ПОЛНЫЙ КУРС

В этом курсе мы на практике рассмотрим такую библиотеку как styled components в связке с React
Мой курс "Продвинутый Frontend. В production на React" - ulbitv.ru/frontend
Ссылка на исходный код - github.com/utimur/styled-comp...
↓↓↓ПЛЭЙЛИСТЫ ↓↓↓
Собеседования -
• Собеседования
Полные практические курсы -
• Crash курсы
MobX & React -
• Mobx & React Полный ку...
Наглядная теория -
• Наглядная теория
Полный курс по Redux -
• Redux
React drag and drop -
• Drag and drop на REACT JS
React компоненты -
• ReactJS компоненты
React + Redux + Webpack
• React Redux Webpack - ...
Анимации в React -
• Анимации в React. Reac...
Разработка fullstack MERN web приложения -
/ playlistlist=pl6dxkon1...
Таймкоды:
00:00 - Введение, теория
00:42 - Первый Styled компонент
01:40 - Глобальные стили
04:00 - Работа с пропсами
09:02 - Псевдоклассы
11:17 - Группировка стилей на основании пропсов
13:48 - Расширение стилей компонентов
14:30 - Анимации
20:30 - Темы
21:50 - Медиа запросы
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - qiwi.com/n/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

[@MrYehBr]

Обычно я когда смотрю ролики про разработку, то я почти всегда ставлю скорость воспроизведения видео 1.25-1.5. Смотря видосы на этом канале я иногда задумываюсь поставить 0.75 :) Очень плотная подача материала, приятно смотреть. Спасибо автору :)

[@UlbiTV]

Спасибо вам!)

[@user-yj8tf7xb6g]

При этом явно талант преподнесения информации 👏 информации много и все понятно 😌

[@JIexaman]

А я смотрел на 2,5 - очень наглядно, понятно. Начал работу над новым проектом (React Native), где используются styled components, нужно было быстро обзорно изучить как оно работает. Просмотр этого видео на 100% решил эту задачу. Спасибо автору!

[@user-zn5ky3fw5h]

Спасибо, бро!) Было, честно говоря, немного лень разбираться самому с этой библиотекой, а ты за 20 минут рассказал основные концепции, за что я очень благодарен. Удачи в деятельности и продвижении канала)

[@NikolayKrishtopa]

Видео огонь! Без лишней воды, понятно, доходчиво. Спасибо!

[@vladshvec4187]

Как хорошо что я наткнулся на твой канал, все намного в этом нелегком ремесле стало чуточку прощу, респект ты красавчик!

[@alexandrchazov6185]

Спасибо за труд! Как только получил задание разобраться с библиотекой Styled Components сразу пошёл к тебе, так как знал что ты точно хорошо всё объяснишь и не прогадал ))

[@user-ml5vp6rp9n]

Автор, спасибо, что без воды!)) И очень хорошая подача материала. Спасибо!

[@darkside2436]

Такому каналу надо как минимум 1 миллион подписчиков

[@UlbiTV]

Ахах!) согласен! Спасибо! С вашей поддержкой

[@beckdev7]

Однозначно

[@zizzxiii2714]

Согласен 🔥🔥🔥

[@helenit4365]

Согласна!!!

[@jsmonstr9638]

Очень хороший курс по styled components в react. Пересмотрел два раза!

[@UlbiTV]

Спасиб)

[@hailrase794]

Чтоб не смотреть два раза, нужно было скорость видео на 0.75 ставить xD

[@jsmonstr9638]

@@hailrase794 это точно ахах

[@l_Chunga_l]

Как всегда четко, по делу, затронул все интересующие концепты, все без воды и соплей! Спасибо!

[@Anatoly8818]

Спасибо бро! Как всегда на высоте! 30 минут и уже работаю с технологией)

[@dmitrykorovin4356]

по-моему это самое топовое видео по styled components. Благодарочка!

[@vladbrusensky6599]

Все понятно, и плотно подается. Без рассусоливаний. Спасибо.

[@coldtouch9099]

В который раз убеждаюсь, насколько хорошо ты объясняешь новые, сложные вещи очень доступно и даже для новичков стараешься, #Ульбивтренды

[@DrGurgen]

Тимур не успеваю смотреть твои ролики но лаики ставлю)

[@UlbiTV]

Лайки, и по возможности, посмотреть тоже стоит, для вас стараюсь!)) Спасибо, Гурген!

[@user-cw6xh4nv9t]

Сейчас все боевые проекты идут на такой библе. Лайк за старание. Ждём выхода по видео по Storybook

[@UlbiTV]

Привет, есть в планах! Спасибо!

[@maksrygaev657]

Спасибо Тимур еще не посмотрел видео но уверен ты как всегда лучший! Любые технологии если в них затык перешерстишь документацю почитаешь сам, и затем твой видос раскидыввает все по полочкам, прям внутренняя радость когда при поиске темы выдает твой видос у меня сразу в голове мысль: 'Все, дело в шляпе сейчас разберемся с проблемой'))

[@user-eu3sl2rv7u]

Спасибо тебе, Автор! Очень кратко и, при этом, очень информативно!

[@akaibegaliev2362]

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

[@UlbiTV]

И вам спасибо огромное!) На данный момент, самое ценное, что вы можете сделать, это распространить контент!)

[@PoRoKLusT]

Спасибо за видео, всё очень доступно! Как раз сейчас проект на этой библиотеке. И какой это кошмар, я в шоке, зачем было создавать и пользоваться настолько неудобной, архитектурно поломанной библиотекой. Мешать компоненты с CSS, когда есть модульный SCSS. Слов нет. Вот уж действительно не всё хайповое = хорошее. Учитывая что обычно это еще вместе с ts пишется и каким-нибудь rxjs, это будет лютый гвнокод...

[@user-kp2st6sq3c]

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

[@STUPIDBETS]

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

[@littlegrownbeats]

Ulbi!, просто от души благодарю! Очень понятно и круто! Технология огонь! Буду применять в своих проектах!)

[@konstantinvoronin4687]

Спасибо! Отличный материал! Особенно полезен для тех, кто только начинает использовать библиотеку Styled Components в React

[@damir-n1]

Огромное спасибо. Сжато. Без воды. Полезно. Лайк!!!

[@user-ug1vi3bv1f]

Благодарю за видеоурок. Круто что сложность урока постепенно увеличивается начиная с начального.

[@grigorytrokhinin]

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

[@user-vm2db5cq1g]

Супер, нравится подача, нравится объем материала, не только по верхам, Спасибо!

[@alenagnevusheva8706]

Отличное видео, спасибо! Очень понятные примеры и объяснения)

[@zubescu]

очень годный контент и доходчивое объяснение. после ваших видосов многое в голове встает на свои места. спасибо.

[@UlbiTV]

Спасибо!

[@prigotovim]

Как раз собираемся внедрять в проект Styled Components. Спасибо.

[@konstantinzhirnov3013]

Большое человеческое спасибо Тебе за то, что Ты делаешь.

[@UlbiTV]

А вам большое человеческое спасибо за поддержку!

[@user-qx6gp9ci5d]

Самый четкий спикер на тему js) красавчик, удачи тебе

[@user-mo9gp7hd7n]

Как всегда все очень доступно, по делу и постепенно. Спасибо!

[@nyashmyash4]

Супер, спасибо за видео! Не работала со styled components до этого, но на работе он используется Для быстрого и глубокого понимания темы видео очень зашло)

[@testovtest3881]

отличная подача, в последнее время только твой канал и смотрю, спасибо за видео

[@AzazelloCS]

Было бы круто теперь все эти курсы сделать с применением Typescript

[@UlbiTV]

В планах есть, вопрос времени!)

[@SemenAlexndrovich]

А еще лучше atomic react gesign + styled components + TS + Storybook.js =)

[@user-tw7ox8dd2b]

@@UlbiTV Можно с этим сдлеать какой то комерчиский проект ) Будет здорово !

[@BiGSplush]

Класс, как раз надо было быстро разобраться, ты очень помог, спасибо!

[@garikmelqonyan6011]

Well done, Timur! Your response was concise yet highly informative and explanatory. Thank you.

[@bugaga8144]

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

[@zeleny777leon777]

Ты молодец! Мне твоё видео помогло понять концепцию этой технологии.

[@UlbiTV]

Спасибо друг) на канале много интересного, рекомендую)

[@mikhailstepanishchev283]

Супер,спс ! Styled Components & React

[@vladyslavfx3892]

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

[@typlomi]

Спасибо большое за урок) все понятно и без лишнего)

[@user-vs7ec5ue6g]

Спасибо огромное)) инструмент определённо интересный, появилось желание его использовать))

[@LogopedLTD]

Очень спасибо за контент. Ещё бы для продвинутых видео было бы интересно react, mui, styled-components

[@MT-qm1ll]

Шикарно. Спасибо большое за труд

[@UlbiTV]

благодарю!)

[@vitaliibondarchuk7030]

крутий відосик для початківців! Лайк за старання! :)

[@SemenAlexndrovich]

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

[@UlbiTV]

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

[@Jdjdjjjxhzh]

Как всегда все круто, спасибо за контент

[@69hp_pubg]

Да что ты творишь ? Просто красаучик

[@UlbiTV]

Спасибо дружище!)

[@user-ht5qv3wy4z]

Огонь! Спасибо, было полезно!

[@deny_awesome]

Спасибо за Styled Components 🤟🏻 Впервые увидел какая прикольная штука на самом деле и поменял своё мнение. Ваши видосы 🔥 Так держать!!!

[@669pain]

Чем прикольная эта штука? Тем что превращает компонент в одну большую не читаемую кучу всего на свете?

[@deny_awesome]

@@669pain тоже так думал сначала. Когда какое-то время пишешь стилизацию на них, потом всё остальное кажется, так себя. Можно рассуждать до бесконечности, что лучше или хуже. Короче, дело вкуса.

[@beznamea9549]

Миллион лайков) Очень годно, спасибо!

[@UlbiTV]

Стараюсь) спасибо!

[@dispeltr1183]

Коротко и ясно, спасибо товарищ!

[@UlbiTV]

Спасибо друг, рад, что все понятно!

[@mykhailostepanishchev6472]

обожаю твои видосы,спасибо,оч круто ! Styled Components & React

[@UlbiTV]

Круто!) спасибо большое!) раз обожаете, с вас комментарии :)

[@mykhailostepanishchev6472]

@@UlbiTV конешн)

[@alexandrelagin5490]

Отличное видео! Удобная штука, особенно если без css-фреймворка пилить проект.

[@UlbiTV]

Спасибо!)

[@user-tq5kl3gx6n]

Красавчик парень. Подсобите лайками и просмотрами, го в топ!

[@sergeysamius1128]

Спасибо за информацию, отличное видео!

[@lightinthedark5708]

спасибо, что без воды)

[@lova4475]

Супер! Спасибо!

[@user-cv9xy4uu2f]

Огромное тебе спасибо за видео, помог мне разобраться со styled components (писал код на typescript), когда зп повысят отправлю тебе донат !

[@mediontamginskii5889]

Четкий ментор!!! Не пожалел что подписался!!!

[@alltradesRU]

Шикарные ролики, огромное спасибо!!!

[@anastasiafrolova6853]

Спасибо за видео. Все очень понятно

[@RenatGrishin]

Огромное спасибо за видео. По началу я не понимал почему нужен СтаилКомпонент, казалось жутко неудобная штука, все оборачивать в дополнительные компоненты. Но когда ты начал использовать его как Бутстрап стало понятно как им правильно пользоваться. Крутая штука 👍👍👍👍👍 Единственная проблема для меня, это неудобно писать CSS в без подсказок и быстрого набора

[@user-dt1fk6bh2i]

Расширение vscode-styled-components поможет

[@nemirovandrei]

Пушка, спасибо большое

[@UlbiTV]

Рад слышать:)

[@alexpro5670]

Всё по делу! Styled Components, React, ThemeProvider

[@UlbiTV]

Спасибо!)

[@zizzxiii2714]

Круто 👍🔥

[@denys4965]

Топовый урок! Спасибо.

[@user-hd7mi3tj5r]

Супер контент! Все четко и по делу!

[@lazys7151]

Плюсик к резюме Круто, чувак, спасибо!

[@devorer77]

отличное видео! спасибо. уже есть почти весь набор джентельмена-разработчика. осталось только жест с энзайм запилить :)

[@UlbiTV]

Спасибо Артем) И до тестов когда нибудь доберемся))

[@hachipoli822]

react + styled components просто взрывная смесь

[@ruslanden1975]

Спасибо за курс! Не дурно

[@Max-kr4ie]

Спасибо хорошая работа, быстро и понятно.

[@UlbiTV]

Спасибо!)

[@user-uu4gp9et2s]

Спасибо за твою работу. И за мою будущую)

[@UlbiTV]

Если я внесу хоть какой то минимальный вклад в твою будущую работу, то всё не зря)

[@alexandrx1237]

Отлично!) Жги, бро) для webStorm, кстати, есть плагины для автокомплита и stayleLinter для styledComponents

[@UlbiTV]

Спасибо!) Как раз искал такие плагины!

[@user-be7dk7so6x]

Отличная подача - супер было бы с TypeScript, как и писали другие.

[@rukioruk6949]

Интересный и довольно удобный для компонентного подхода способ стилизации. Ещё круто то, что к любым CSS-свойствам может быть доступ из JS.

[@jobsearchfordancer4372]

Спасибо, отличное видео.

[@evgenya_pan]

Спасибо большое, очень полезная информация

[@johndoe4016qweasd]

Спасибо! Лучший!)

[@user-im2xu8sf3s]

Спасибо! Очень полезное видео!

[@dimalukashenko4865]

отличный урок, так держать

[@user-qt8xs7zv6m]

Видео - супер! Спасибо

[@yurychebunin367]

Очень здорово! Спасибо.

[@user-eu8kf1xb9h]

Дай бог тебе здоровья.

[@jsInspector]

Супер, жду еще.

[@UlbiTV]

Спасибо!

[@blog_travelling]

Крутой контент, спасибо!

[@UlbiTV]

Спасибо друг!)

[@669pain]

Спасибо за видео! Все как всегда доходчиво и без лишней воды. Выскажу свое мнение по поводу этого подхода - это яркий пример как на ровном месте усложнить себе (и не только) жизнь. Зачем выносить стили из ксс в жс? Почему нельзя подключить один стилевой файл в компонент и описать все стили в нем? Мало того что это невероятно убивает читаемость кода, добавляет кучу не нужных строк и параметров, так если туда еще добавить TS то поддержка и читаемость этого кода упадет до нуля. Чем это стало лучше БЭМ? Повесь один класс на блок, поменяй его свойства с помощью модификатора который передал в пропсе и все. Какие-то бесконечные обертки для компонентов чтобы добавить или убрать какие-то стили, проще подключить в корне один глобальный ксс и в нем писать все глобальные стили. Лайк за видео поставил

[@kostyakozlov5289]

полностью согласен, я вообще запутался в этих styled функциях в mui

[@user-dt1fk6bh2i]

Лучше тем, что у тебя каждый отдельный компонент получается изолированным со своими стилями, которые ни от чего не зависят кроме как от состояния этого компонента. Если делать сложные проекты с кучей различных элементов - то подход "изолированных" стилей сильно приятней БЭМ'а. Но и в таком случае мне гораздо ближе на Styled Components, а css modules

[@adam-front]

@@user-dt1fk6bh2i а css модули??

[@user-dt1fk6bh2i]

@@adam-front что "CSS модули"?) Я написал, что они мне нравятся больше. Но на моих проектах (интерпрайз) везде используется styled components по решению коллег

[@adam-front]

@@user-dt1fk6bh2i видемо из-за опечатки не понял вас сразу

[@dinarsharipov5022]

Главный конкурент минина!!)))

[@GRCHKA]

Красава, спасибо!!!))

[@yaroslavs7287]

лаконично и по делу, очень информативно. Успехов, дружище!

[@bondareff123]

Видос очень полезный, спасибо

[@kirilllutsenko1821]

Крутой видос, спасибо.

[@UlbiTV]

Благодарю!

[@dushnilas]

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

[@SvetaSveta-ms4hi]

Вы лучший!

[@alextotun]

Это хардкор со стилями. Кто придумал это, наверно что бы поджать фронтов. Спасибо! Супер! Удачи!

[@13RedbloodeD13]

Спасибо, примеры просто топ

[@el.kochevnik]

За видео зачет, но зачем стайлед-компоненты заворачивать в еще один компонент?