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