Подсветка синтаксиса

Когда вы пишете CSS внутри шаблонных строк, то ваш редактор кода, возможно, не сможет обеспечить адекватную подсветку синтаксиса. Чтобы ему помочь, нужно установить дополнительные плагины: https://styled-components.com/docs/tooling#syntax-highlighting

В документации описана текущая ситуация для разных редакторов (Atom, Sublime, VS Code, VIM и т. д.) с указанием нужных плагинов.

#стили #styledcomponents #документация #инструменты

​Styled Theming

Еще один способ создавать темы для стилизованных компонентов - использовать пакет styled-theming.

Тут немного другой подход. Мы также создаем объект темы с помощью функции theme, но внутри компонента уже не нужно вытаскивать эту тему из пропа, достаточно просто указать ссылку на саму тему. Это здорово упрощает код, особенно, если вы активно используете темы.

Если интересно, можно почитать статью: https://jamie.build/styled-theming.html

#стили #styledcomponents #документация #примерыкода #ссылки

​Линтинг стилизованных компонентов

Чтобы использовать stylelint для стилизованных компонентов, нужно доустановить пару пакетов:

👉 stylelint-processor-styled-components, чтобы извлекать стили из компонентов. Процессор игнорирует все файлы, которые не содержат стилизованных компонентов.
👉 stylelint-config-styled-components, чтобы отключить правила, которые конфликтуют с библиотекой.

Процессор и расширение нужно поключить в соответствующие секции файла .stylelintrc.

Важно: Функция —fix не поддерживается.

#стили #styledcomponents #документация #инструменты #линтинг

Линтинг в процессе сборки

Чтобы добавить линтинг стилизованных компонентов в процесс сборки кода (а не просто запускать через командную строку), можно использовать специальный лоадер для webpack: stylelint-custom-processor-loader.

#стили #styledcomponents #документация #инструменты #линтинг

JSS

Будем считать, что со styled-components мы в целом закончили. Дальше по плану React JSS.

Очевидно, что существует некий JSS, у которого есть версия для использования с React. Что это за зверь такой?

Очевидно, это что-то вроде CSS + JS.

Важно: указанный репозиторий неправильный, правильный инструмент в следующем посте

Readme в репозитории jss утверждает, что это простой кросс-браузерный способ использовать javascript, чтобы генерировать стили. И он не просто навешивает инлайн-стили, а позволяет создавать правила уровня документа.

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

Также JSS хорошо подходит для разного рода плагинов и прочих модульных штук, которые все равно динамически загружают свои файлы. А с помощью JSS можно избавиться от загрузки файлов стилей.

Синтаксис у JSS объектный (JSON), то есть мы, очевидно, не сможем писать CSS как он есть, как это было в styled-components.

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

Подчеркивается, что вставлять стили в документ лучше, чем навешивать их на отдельные элементы, потому что это требует всего лишь одной перерисовки страницы.

Что ж, практически убедили :)

#стили #jss #документация

JSS (попытка #2)

Очевидно, произошло недопонимание, и репозиторий jss из прошлого поста совсем не тот, который нам нужен.

А нужен нам вот этот сайт: https://cssinjs.org/

И настоящий JSS, кажется, имеет намного больше амбиций, чем тот предыдущий.

Он позволяет использовать JavaScript для описания стилей в декларативном и переиспользуемом стиле, без конфликтов. Может компилироваться в браузере, на сервере или в процессе сборки на Node.

#стили #jss #документация

JSS: первый взгляд

Инструмент состоит из собственно ядра, каких-то плагинов, интеграций для фреймворков и прочих модулей. То есть мы, вероятно, сможем выделить только нужные нам части.

Основной пакет: jss
Пакет для React: react-jss
Есть даже пакет для любителей styled-components: styled-jss, с таким же api, как у styled-components, но поддержкой фич JSS (о которых мы скоро узнаем).

Для оформления стилей используется объектная нотация. Есть онлайн-компилятор, чтобы сразу понимать, во что превращается ваш код: https://cssinjs.org/repl/

Есть также песочницы:

- jss
- react-jss

В стандартной версии мы пишем объект со стилями, с помощью специального метода превращаем его, очевидно, в CSS-код, получаем сгенерированные имена классов и помещаем их в нужные места (на нужные элементы).

В React-версии примерно то же, плюс совмещаем все это с ThemeProvider для использования тем.

#стили #jss #документация

Фичи JSS

Список фич, которые предлагает JSS в чем-то похож на уже изученные инструменты (css модули и styled-components) - это логично, учитывая что фундаментальный подход у них общий.

👉 генерация "настоящего" CSS и поддержка всех нативных возможностей CSS
👉 отсутствие коллизий имен (генерация уникальных классов)
👉 возможность переиспользовать код
👉 возможность создавать динамические стили
👉 возможность удалять стили со страницы, если они больше не нужны
👉 в React версии - выделение критических стилей (загружаются стили только для тех компонентов, которые в данный момент используются)

Из новенького:

👉 архитектура, основанная на плагинах, можно прикрутить что-то свое, если хочется, или подобрать готовые плагины
👉 "выразительный" синтаксис
👉 полная изоляция от глобальных стилей (используется плагин), полезно для создания виджетов

#стили #jss #документация

Недооцененные хуки React, которые вы упускаете

Статья (англ.): https://blog.logrocket.com/underrated-react-hooks-youre-missing-out-on/

В статье разобраны три встроенных хука, про которые мы уже читали в документации:

👉 useImperativeHandle
👉 useLayoutEffect
👉 useDebugValue

Помимо описания есть примеры использования, что очень приятно.

Вкратце:

useImperativeHandle позволяет вместо обычного рефа вернуть родительскому компоненту настроенный объект с нужными методами. Его удобно использовать, например, для управления модальным окном. При этом состояние хранится внутри компонента модалки, но родитель получает удобный способ его изменять. Используется в сочетании с функцией forwardRef.

useLayoutEffect вызывается после применения обновлений, но ДО того, как браузер их отрисует (синхронно, в отличие от useEffect). То есть он блокирует отрисовку и может использоваться для внесения изменений непосредственно в DOM компонента, чтобы пользователь не увидел изменений. Автор статьи использует его для управления скроллом при изменении контента страницы при роутинге.

useDebugValue улучшает опыт разработчика при логировании кастомных хуков. По умолчанию, если в кастомном хуке используются встроенные хуки типа useState, в React DevTools они не подписаны - просто какой-то State. Нужно помнить порядок использования, чтобы понять, какой стейт к чему относится. useDebugValue позволяет вывести что-нибудь полезное в панель отладки, основываясь на текущих значениях состояний.

#ссылки #хуки

10 вопросов по React начального уровня с интервью

Статья (англ.): https://javascript.plainenglish.io/10-entry-level-react-interview-questions-5a8ea74e2130

Проверим себя.

1. Что такое Virtual DOM и как он работает?

👉 Ответ

Виртуальный DOM - это виртуальное представление реального DOM, которое проще обновлять. Снэпшоты старого и обновленного состояние сравниваются и находится самый быстрый способ внести изменения в настоящий DOM.

2. Назовите самые важные методы жизненного цикла (классовых компонентов) и зачем их использовать. А также альтернативные хуки (React Hooks)

👉 Ответ

При монтировании компонента работают:
- constructor,
- static getDerivedStateFromProps (useEffect с массивом зависимостей),
- render,
- componentDidMount (useEffect)

При перерендере:
- static getDerivedStateFromProps (useEffect с массивом зависимостей)
- shouldComponentUpdate (useMemo)
- render
- getSnapshotBeforeUpdate (кастомные хуки для сохранения предыдущего состояния)
- componentDidUpdate (useEffect)

При размонтировании:
- componentWillUnmount (useEffect с возвращением функции для сброса эффекта)

3. Зачем мы используем стрелочные функции в React?

👉 Ответ

Чтобы не создавать новый контекст выполнения (this), а выполнять все действия в контексте компонента. Если не использовать стрелочные функции, придется привязывать все методы к экземпляру компонента (в конструкторе).

4. Что такое ключи (keys) и зачем они нужны?

👉 Ответ

Ключи нужны для оптимизации рендера массивов значений. Они позволяют привязать каждый элемент к соответствующему значению в массиве и не обновлять его без необходимости.

5. В чем преимущества React перед настоящими "фреймворками" типа Angular?

Вопрос очень спорный, но пусть будет.

👉 Ответ

React легкий, использует JSX (проще освоиться) и виртуальный DOM (быстрее работает). Поток данных идет в одном направлении сверху вниз (проще отлаживать). Супер развитая экосистема, куча инструментов для любых задач.

Остальные вопросы уже по JavaScript, можно посмотреть в статье, чтобы освежить знания.

#компоненты #жизненныйциклкомпонента #хуки #виртуальныйdom #обработкасобытий #ключи #ссылки

​Начало работы с JSS

Продолжаем читать документацию JSS.

NPM-пакет так и называется jss
Для React-приложения нам потребуется react-jss, но это чуть позже. Сначала посмотрим, как работает оригинальная библиотека:

https://codesandbox.io/s/jss-start-react-junior-ki448

Все предельно просто:

1) подключаем библиотеку
2) определяем стили в виде объекта
3) компилируем этот объект в нормальный CSS методом createStyleSheet
4) вставляем этот CSS в документ методом attach (по умолчанию вставляется в head)
5) используем сгенерированные классы из свойства sheet.classes

#документация #стили #jss #примерыкода

​JSS плагины

Сразу же видны некоторые неудобства. Например, хотелось бы писать имена css-свойств в camelCase, но из коробки jss такое не позволяет.

Для этого есть разные плагины. Например, jss-plugin-camel-case.

Подключить плагин можно с помощью метода jss.use() - теперь можно писать свойства так, как удобно.

https://codesandbox.io/s/jss-plugins-react-junior-qp23m

Есть и другие полезные плагины (официальные). Например, jss-plugin-default-unit позволяет не указывать единицы измерения, а jss-plugin-vendor-prefixes добавляет вендорные префиксы к свойствам.

Важно: порядок перечисления плагинов в методе jss.use() имеет значение.

Список официальных плагинов (в правильном порядке): https://cssinjs.org/plugins?v=v10.9.0

Пресет по умолчанию

Можно не подключать плагины по одному, а сразу установить набор плагинов (пресет): jss-preset-default. Он включает больше десятка разных (официальных) плагинов (посмотреть можно здесь https://github.com/cssinjs/jss/blob/master/packages/jss-preset-default/package.json#L37-L48).

Для его установки используется метод jss.setup().

https://codesandbox.io/s/jss-preset-react-junior-fu5rg?file=/src/index.js

#документация #стили #jss #примерыкода

Официальные плагины JSS

👉 jss-plugin-rule-value-function (входит в jss-preset-default)

Использование функций в качестве значений, для указания динамических стилей.

👉 jss-plugin-rule-value-observable (входит в jss-preset-default)

Использование TC39 Observables https://github.com/tc39/proposal-observable для динамических анимаций.

👉 jss-plugin-template (входит в jss-preset-default)

Использование шаблонных строк.

👉 jss-plugin-cache

Кеширование правил по ссылке для лучшей производительности.

👉 jss-plugin-global (входит в jss-preset-default)

Глобальные стили.

👉 jss-plugin-extend (входит в jss-preset-default)

Расширение наборов правил (наследование в некотором роде).

👉 jss-plugin-nested (входит в jss-preset-default)

Вложенные селектор и псевдоселекторы.

👉 jss-plugin-compose (входит в jss-preset-default)

Добавление к сгенерированному классу дополнительных классов, например, дла использования с CSS-фреймворками.

👉 jss-plugin-camel-case (входит в jss-preset-default)

Возможность указывать имена свойств в camelCase.

👉 jss-plugin-default-unit (входит в jss-preset-default)

Возможность не указывать единицы измерения для числовых значений.

👉 jss-plugin-expand (входит в jss-preset-default)

Разделение составных свойств на простые (border-color, border-width, border-style).

👉 jss-plugin-vendor-prefixer (входит в jss-preset-default)

Добавление вендорных префиксов.

👉 jss-plugin-props-sort (входит в jss-preset-default)

Сортировка свойств по алфавиту.

👉 jss-plugin-isolate

Изоляция правил через автоматический сброс свойств.

Большинство плагинов принимает разные опции для настройки (подробнее - в документации).

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

#документация #стили #jss

Манипуляции с созданными стилями

Получив таблицу стилей из метода createStyleSheet, мы можем ее изменять, например, добавлять, заменять или удалять правила.

👉 sheet.addRule(selector, style, options)
👉 sheet.addRules(styles)
👉 sheet.replaceRule(selector, style, options)
👉 sheet.deleteRule(name)

Подробнее об этих методах и их параметрах - в документации: https://cssinjs.org/jss-api?v=v10.9.0#add-a-rule-to-an-existing-style-sheet

#документация #стили #jss

​Функциональные значения в JSS

Один из официальных плагинов (jss-plugin-rule-value-function) позволяет использовать функции в качестве значений свойств, чтобы получить динамически изменяющиеся стили.

Но если просто указать функцию, ничего не произойдет. Чтобы она выполнилась, нужно вызвать метод sheet.update(data), в котором можно передать объект с данными. Этот объект попадет в функцию в качестве параметра, и из него можно брать данные для вычисления значения свойства.

Это в какой-то мере поддержка тем оформления.

Чтобы обновлять стили уже после того, как они добавлены в DOM (sheet.attach()), нужно связать созданный объект стилей и настоящую таблицу в DOM. Для этого при создании (jss.createStyleSheet(styles, options)) нужно передать во втором параметре настройку link: true.

https://codesandbox.io/s/jss-functional-values-react-junior-dqq0b?file=/src/index.js

#документация #стили #jss #примерыкода

Синтаксис JSS

И перед тем, как мы перейдем непосредственно к React JSS, краткий обзор синтаксиса. Посмотрим, как оформляются медиа-запросы, анимации и прочие интересные моменты.

Медиа-запросы

Указываются как отдельное свойство объекта:

const styles = {
  button: {
    width: 100
  },
  '@media (min-width: 1024px)': {
    button: {
      width: 200
    }
  }
}

Интерполяция

Так как стили указываются в виде обычных JS-объектов, то можно пользоваться всеми их возможностями, например, динамическими именами свойств:

const minWidth = 1024

const styles = {
  button: {
    width: 100
  },
  [`@media (min-width: ${minWidth}px)`]: {
    button: {
      width: 200
    }
  }
}

#документация #стили #jss #примерыкода

Синтаксис JSS. Keyframes

Анимации также задаются в отдельном свойстве объекта стилей.

const styles = {
  '@keyframes slideRight': {
    from: {opacity: 0},
    to: {opacity: 1}
  }
}

Важно помнить, что имя анимации в сгенерированной таблице стилей будет изменено, поэтому для ссылки на него нужно использовать специальную форму записи - со значком $.

const styles = {
  // ...
  container: {
    animationName: '$slideRight'
  }
}

#документация #стили #jss #примерыкода

Синтаксис JSS. Фоллбэки

Если какие-то значения имеют плохую поддержку в браузерах, и вы используете их в качестве прогрессивного улучшения, следует указывать запасные варианты - фоллбэки.

В JSS это делается вот так:

const styles = {
  container: {
    background: 'linear-gradient(to right, red 0%, green 100%)',
    fallbacks: {
      background: 'red'
    }
  }
}

Сгенерированный код:

.container-0 {
  background: red;
  background: linear-gradient(to right, red 0%, green 100%);
}

Если нужно несколько фоллбэков, их можно указать в массиве:

const styles = {
  container: {
    display: 'flex',
    fallbacks: [{display: 'box'}, {display: 'flex-box'}]
  }
}

#документация #стили #jss #примерыкода

Синтаксис JSS. Font Face

По аналогии с медиа-запросами, правило @font-face указывается в отдельном свойстве объекта стилей:

const styles = {
  '@font-face': {
    fontFamily: 'MyWebFont',
    src: 'url(webfont.eot)'
  }
}

Или в виде массива, если шрифтов несколько:

const styles = {
  '@font-face': [
    {
      fontFamily: 'MyWebFont',
      src: 'url(webfont.eot)'
    },
    {
      fontFamily: 'MySecondFont',
      src: 'url(webfont2.eot)'
    }
  ]
}

Вообще все @-правила указываются подобным образом:

const styles = {
  '@charset': '"utf-8"',
  '@import': 'url(http://mysite.com/custom.css)',
  '@namespace': 'url(http://mysite.com/xhtml)'
}

#документация #стили #jss #примерыкода

Синтаксис JSS. Сложные значения

Если нужно задать какому-то свойству несколько значений, например, несколько фоновых изображений, в обычном CSS мы обычно разделяем их запятой.

Если мы используем короткий вариант свойства, например, margin вместо margin-top + margin-left + margin-right + margin-bottom, то отдельные значения мы разделяем пробелом.

JSS предлагает подобные конструкции оформлять в виде массивов:

const styles = {
  button: {
    margin: [5, 10]
  }
}

Или даже в виде массивов массивов, если у вас несколько составных значений:

const styles = {
  button: {
    background: [
      ['url(image1.png)', 'no-repeat', 'top'],
      ['url(image1.png)', 'no-repeat', 'right']
    ]
  }
}

Кроме того, помним, что короткое свойство можно разбить на составляющие:

const styles = {
  button: {
    background: {
      color: 'white',
      image: 'url("/some/url/image.png")',
      repeat: 'no-repeat',
      position: 'contain'
    }
  }
}

Быстро потестировать JSS-синтаксис можно здесь: https://cssinjs.org/repl/

#документация #стили #jss #примерыкода