Тёмный

Ты пишешь стили неправильно! | React стили 

WEB РАЗРАБОТКА
Подписаться 3,3 тыс.
Просмотров 774
50% 1

В етом ролике мы рассмотрим ситуацию что нужно делать когда вы Front-end разработчик и вам поручили выбрать каким образом будут писаться в новом React приложение.
Видео является юмористическим. И трактовать мысли с видео может только сам автор
Подписывайтесь на мой телеграм канал - t.me/ineyeblog
Styled - components - styled-components.com/
Как подключить линтер к styled--components - styled-components.com/docs/to...
Расширение vscode - marketplace.visualstudio.com/...
0:00 - Вступление
0:59 - Как правильно писать стили css для React приложения
2:25 - Установка styled-components
2:40 - Синтаксис styled-components
4:28 - Прокидываем props в styled-components
5:30 - Медиа запросы styled-components
6:30 - Расширение vscode для styled-components
7:18 - Зачем нужны линтеры в css
7:50 - Демонстрация работы линтера stylelint
8:52 - Установка stylelint для styled-components

Опубликовано:

 

14 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 13   
@ksenisgrekova9871
@ksenisgrekova9871 Год назад
Спасибо большое, очень нравится твой контент ✌️
@renaimarsh8943
@renaimarsh8943 Год назад
StyledComponents оказалось лучшим решением, но только при использовании typescript'а благодря этому мы можем создавать интерфейс условно для контейнера { styles?: DefaultTheme } и передавая этот пропс с компонента иметь контроль над экспортируемыми стилями этого компонента и импортируемыми в частных случаях спасибо за ролик, здесь есть полезная инфа, но в на чистом js плюсы StyledComponents не так уж значительны в сравнении с SCSS было бы круто, если бы ты приводил в ролике пример на typescript и создание компонентов с внешней кастомизацией из файла с самим компонентом ВНЕШНИЙ КОМПОНЕНТ: export const InitScreen = () => { return ( ); }; const styles = { container: css` height: 100%; `, }; Ui КОМПОНЕНТ: type TContainer = "isCenter" | "isRowCenter" | "isRowBetween"; interface IContainer { containerType?: TContainer; styles?: DefaultTheme; } const CONTAINER_STYLES = { isCenter: css` justify-content: center; align-items: center; `, isRowCenter: css` flex-direction: row; align-items: center; `, isRowBetween: css` flex-direction: row; align-items: center; justify-content: space-between; `, }; export const Container = styled.div` display: flex; ${({ containerType = "isRowCenter", styles }: IContainer) => ` ${CONTAINER_STYLES[containerType]} ${styles} `} `;
@Illya.Landar
@Illya.Landar Год назад
А какая разница с typescript или на чистом js использовать styled-components? Тем что вместо 3 строк css пишешь isRowBetween и как бы реиспользуешь стили? 1) typescript в итоге все ровно компилиться в чистый js 2) написать 3 строчки css легче чем потом рассказывать всей команде, мы стили вот так теперь пишем.(все забудут про это так же, как забывают про миксины в scss когда проект разрастается) 3) typescript нужен как по мне вообще для другого. Так что я не вижу преимуществ использовать styled-components вместе с typescript, может ты мне объяснишь?
@renaimarsh8943
@renaimarsh8943 Год назад
​@@Illya.Landar я бы сказал, что вместо создания 3 классов под center, rowsAlign, rowsBetween мы создаем грубо говоря объект с ключами, там по объему строк разница незначительная, да и читабельность сохраняется зато получаем autocomplete при добавлении пропсов в компонент соответствующий интерфейсу и вот как бы основной плюс как раз в интерфейсах и типах, грубо говоря мой ui компонент зависит от значений из flux managment'a (в моем случае чат с голосовыми сообщениями, где много отрисовок от определенных данных) и чтоб не дублировать стили или не менять класс глобально или не создавать еще несколько классов, я назначение стилей выношу либо в константу, либо в хэлперы, где надо провести дополнительные проверки / операции с данными и в этом хэлпере сформировать стили по результатам расчета и благодаря ts я четко вижу какие значения тут я могу указать (+ они сами проставляются) и засчет этого мне не приходится в styled компоненте делать какие-то расчеты или проверки stylelint как бы дает контроль не допустить ошибку с px и pixels, но не дает возможности защиты от передачи неподходящих стилей в пропсы компонента p.s: да, можно сказать, что достаточно просто писать без ошибок и передавать правильные стили, но к сожалению это не всегда получается сделать (ну лично у меня) p.s.s: в любом случае, ts в комбинации со styled-components это очень сильно и в своих проектах это я точно использовать буду, а тебе спасибо за ролик, самое важное в styled-components ты очень доступно и классно объяснил, после чего мне было легче начать проектировать структуру проекта
@Illya.Landar
@Illya.Landar Год назад
@@renaimarsh8943 Спасибо за дискуссию. Меня ты не конечно не переубедил но задуматься заставил. Это либо супер бесполезно или ты гений.
@gregdmitriev2784
@gregdmitriev2784 Год назад
не знаю, мне SCSS очень даже, styled--components - прикольно, не знал, помог... англ.яз - блин, подтяни, чувак !)) (unknown - читается "анноун", а не "юнноун") работаешь на публике - это важно ;) P.S. для новичков : "Линтер" - это инструмент для автоматической проверки кода на наличие потенциальных ошибок и нарушений стандартов написания кода."
@Illya.Landar
@Illya.Landar Год назад
Согласен
@renaimarsh8943
@renaimarsh8943 Год назад
вот как 2 года пишу только React Native приложения и привык уже к StyleSheet, сейчас в рамках перехода с CRA на vite > next снова вернулся на React под браузер и задумался как сейчас стили актуально писать. В целом, StyledComponents намного лучше SASS/SCSS, но немного неудобно, что для комфортного написания приходится столько зависимостей ставить и вот использование обратных ковычек `` вызывает боль, т.к воспринимаю это только как template strings. Были мысли использовать Tailwind CSS, но быстрее написать на StyleSheet
@Illya.Landar
@Illya.Landar Год назад
*Как вам видео?*
@alenache1
@alenache1 Год назад
👍
@Deyson3831
@Deyson3831 Год назад
Нормально, но зря подстригся (((
@Illya.Landar
@Illya.Landar Год назад
@@Deyson3831 Отрастет
@reactnext13
@reactnext13 10 месяцев назад
говно это styled components, tailwind или css-modules наше все
Далее
Styled Components & React ПОЛНЫЙ КУРС
23:40
СКАЧАЛ РОДИТЕЛЯМ МУЗЫКУ 8
00:47
Просмотров 194 тыс.
Regular Season vs. PLAYOFFS part 2 #pavelbarber
00:14
Can Twitch Chat Beat Doom?
15:42
Просмотров 89 тыс.
7 Лет Опыта в IT | Что я Понял?
19:56
React  - Курс по React для Начинающих
51:46