Этот курс, посвященный styled-components, является следующим шагом для разработчиков React, которые хотят повысить свою ценность в качестве frontend разработчика, отказавшись от нестабильных имен и структур классов CSS, беспорядочного импорта CSS и конфликтов имен CSS-классов со своими приложениями React, и вместо этого хотят принять лучший способ стилизации приложений React с помощью библиотеки CSS-in-JS Styled Components!
Фреймворк styled-components позволяет вам писать настоящий CSS в вашем JavaScript. Это означает, что вы можете использовать все функции CSS, которые вы используете, и любить styled-components, включая (но далеко не ограничиваясь ими) медиазапросы, все псевдоселекторы, вложения и т. д.
React взяла традиционный подход view / viewmodel к веб-разработке и объединила их в одно, сохраняя при этом модульность кода и единую ответственность. Styled Components можно рассматривать как расширение этого, добавляя стилизацию и в файл JS. Все они имеют отношения один к одному, поэтому имеет смысл объединять их, если они сохраняются модульными. Этот курс по styled-components поможет вам понять всю мощь этого подхода и покажет, как создавать такие компоненты.
Посмотреть больше
Этот материал находится в платной подписке. Оформи премиум подписку и смотри или слушай
React styled-components v5 (2020 edition),
а также все другие курсы, прямо сейчас!
Installing styled components + relevant plugins and tips
Урок 4.00:07:29
Creating our first React styled-component
Урок 5.00:03:21
Adding global styles using createGlobalStyle + adding Google fonts
Урок 6.00:03:06
Conditional styles based on props
Урок 7.00:03:13
How styled components works "under the hood"
Урок 8.00:03:11
Bulk styles using the styled-components "css" helper
Урок 9.00:02:35
Installing react-router-dom and adding our home and login routes
Урок 10.00:06:28
Creating the page layout and header components
Урок 11.00:09:44
Styling normal React components + extending existing styled component styles
Урок 12.00:01:20
Styling links based on routes (with useLocation hook from react-router-dom)
Урок 13.00:05:07
Media queries using styled components
Урок 14.00:05:56
useState React hook with menu icon + event handlers with styled-components
Урок 15.00:06:48
Creating the Input styled component
Урок 16.00:05:07
Creating a PasswordInput styled component with the attrs helper
Урок 17.00:04:28
Implementing the show / hide password toggle
Урок 18.00:08:25
Adding the buttons and loading / submit state to the form
Урок 19.00:04:26
Animation with styled components using the keyframes helper (loading spinner)
Урок 20.00:03:01
Themes and variables basics
Урок 21.00:04:41
Creating the theme toggle styled component
Урок 22.00:05:06
Finishing the toggle theme with useContext and ThemeContext
Урок 23.00:03:19
Updating GlobalStyles and menus to use theme colors
Урок 24.00:03:51
Referencing a styled component within another styled component
Урок 25.00:01:57
Interpolating functions to clean up style logic
Урок 26.00:03:15
Using PropTypes with styled components
Комментарии
Команда внимательно читает ваши комментарии и оперативно на них реагирует. Вы можете спокойно оставлять запросы на обновления или задавать любые вопросы о курсе здесь.
В этой серии уроков мы буде говорить о Styled Components. Мы поговорим о том как использовать Styled Components и о лучших способах их организации в проекте. Также мы подумаем о том, когда нужно использовать Styled Components, а когда мы можем обойтись простым css.
Изучите React JS для создания одностраничных приложений (SPA), используя современные методы, такие как Context, Reducer, Suspense и другие. Изучите самую популярную в мире библиотеку для создания пользовательских интерфейсов!