Компонентная нирвана: краткое руководство по стилизованным компонентам [с загрузкой видео]

внешний интерфейс JavaScript React.js CSS внешний фреймворк ECMAScript 6 React Native

Цели курса

Вам потребуется 23 минуты, чтобы изучить современный способ написания стилей компонентов: styled-components.

Введение в курс

Благодаря творческому применению литералов шаблонов ES6 к кодированию CSS, styled-components стали феноменальным решением CSS-IN-JS в сообществе разработчиков интерфейсов, что позволяет нам не беспокоиться о взаимосвязи между стилями и компонентами. Как писать компоненты с помощью CSS в случае ассоциации, так что стилизованные компоненты действительно становятся базовой единицей разработки.

Итак, как использовать стилизованные компоненты в проектах React/React Native? Как доработать существующий проект? Как улучшить повторное использование кода и его адаптивность к изменениям?8 тактов, 23 минуты, этот видеоурок откроет вам двери styled-components и позволит вам ознакомиться с основными функциями styled-components.Исходный код для демонстрации видео будет размещен на Github для отладки.

Для людей

  1. [Должен] иметь базовые знания о интерфейсе и понимать ES6;
  2. [Должен] иметь базовые знания React, опыт разработки лучше;
  3. [Необязательно] Рассчитывайте идти в ногу с развитием сообщества и изучать новейшие технологии разработки.Если это удовлетворено, первые два пункта можно игнорировать;
  4. [Необязательно] Базовые знания React Native, опыт разработки лучше;

Каталог контента

8. Использование стилизованных компонентов в React Native

styled-components также обеспечивает отличную поддержку React Native, где она точно такая же? Где вам нужно ваше внимание? Это видео поможет вам. Ссылка на видео:pan.baidu.com/s/1bo7opeZ

7. Реализуйте анимацию интерфейса с помощью ключевых кадров

Правильная анимация может заставить пользователей влюбиться в ваше приложение, а вспомогательная функция ключевых кадров, предоставляемая styled-components, позволяет нам легко переносить анимацию из CSS в компоненты. Ссылка на видео:pan.baidu.com/s/1hspJ0rE

6. Реализуйте функцию темы с ThemeProvider

Централизованное управление шрифтами, цветами и размерами, обычно используемое в приложениях, может значительно улучшить способность кода адаптироваться к изменениям.Эту функцию или дизайн часто можно назвать «функцией» «темы» (также называемой оболочкой). Пример демонстрирует стилизованный механизм -Theming для компонентов. Ссылка на видео:pan.baidu.com/s/1kVwyV0F

5. Установите глобальные стили с помощью injectGlobal

Как установить стиль тела после компонентизации? Поскольку body в любом случае не может быть записано как компонент, к счастью, styled-components предоставляет нам вспомогательную функцию injectGlobal для установки глобального стиля страницы. Ссылка на видео:pan.baidu.com/s/1hrLXqvy

4. Используйте расширение для создания вариантов компонентов для реализации наследования стилей.

Написание стилей в JS теряет возможность наследования? Используя механизм расширения, предоставляемый styled-components, давайте вернем эту возможность, одиночное наследование? Множественное наследование? как вам нужно. Ссылка на видео:pan.baidu.com/s/1i4WKzqt

3. Инкапсулируйте атрибуты компонентов с помощью attrs, чтобы улучшить повторное использование кода.

Цветы каждый год похожи, а люди каждый год разные.В написании кода тоже будут такие проблемы.Использование механизма attrs позволяет не только инкапсулировать стили в компоненты, но и инкапсулировать атрибуты, что значительно улучшает повторное использование кода. Ссылка на видео:pan.baidu.com/s/1pK97HMz

2. Используйте реквизиты для настройки стилей компонентов, чтобы по-настоящему использовать возможности JS

При использовании styled-components для написания компонентов вы можете передавать функции или выражения в строке шаблона, чтобы вы могли настроить стиль компонента в соответствии с реквизитами, переданными компоненту, чтобы вы могли по-настоящему испытать удовольствие от CSS. -IN-JS и мощность. Ссылка на видео:pan.baidu.com/s/1o81c23S

1. Пишите простые компоненты React с помощью styled-components

Пример демонстрирует основные шаги и синтаксис использования styled-components для написания компонентов React, удаляет ассоциации стилей, которые могут быть достигнуты только на основе имен классов, и использует чистый CSS для написания компонентов React. Ссылка на видео:pan.baidu.com/s/1mhGzy56

Исходная ссылка

Репозиторий кода:wangshijun/course-styled-components-fundamentals

Как запустить (рекомендуется установить и использоватьyarn)

git clone https://github.com/wangshijun/course-styled-components-fundamentals.git
cd course-styled-components-fundamentals
yarn
yarn start

# react-native 代码的运行直接参照 react-native 官网文档即可

Чтобы запустить код для каждого урока, просто загрузите соответствующую версию под репозиторием.

  1. Написание простых компонентов React с помощью styled-components
  2. Используйте реквизиты для настройки стилей компонентов и по-настоящему раскройте мощь JS.
  3. Используйте attrs для инкапсуляции атрибутов компонентов, чтобы улучшить повторное использование кода.
  4. Используйте расширение для создания вариантов компонентов для реализации наследования стилей.
  5. Установите глобальные стили с помощью injectGlobal
  6. Реализуйте функции темы с помощью ThemeProvider
  7. Анимация интерфейса с ключевыми кадрами
  8. Использование стилизованных компонентов в React Native

Рабочая среда

  • Node.js v8.6.0
  • React v16
  • React Native v0.49.0
  • VSCode v1.17.1 + Vim
  • Chrome v61

использованная литература

styled-components docs

скачать видео

Подпишитесь на общедоступную учетную запись WeChat «Front-end Weekly»: fullstackacademy и ответьте на компоненты в стиле курса, чтобы получить адрес загрузки видеоурока в высоком разрешении.

Наконец, некоторые из ваших одноклассников могут спросить, почему я хожу на этот открытый урок? Какой следующий план? пожалуйста прочтиДавно не виделись, мне всегда кажется, что я тебе что-то должен

Категории