Список тегов для более удобного поиска постов

👉 Основные понятия

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

👉 Управление состоянием

#управлениесостоянием
#redux
#mobx
#recoil

👉 Работа с ошибками

#обработкаошибок
#предохранители
#отладка
#проверкатипов
#typescript
#строгийрежим

👉 Оптимизация

#оптимизация
#profiler
#ленивыекомпоненты
#purecomponent

👉 Тестирование

#тестирование
#jest
#testinglibrary

👉 Серверный рендеринг

#серверныйрендеринг

👉 Стилизация

#стили
#styledcomponents
#jss
#radium
#shadowdom

👉 Распространенные задачи

#валидацияформ
#роутинг
#обменданными
#rtkquery

👉 Прочее

#документация - материалы из официальной документации
#ссылки - полезные ссылки
#началоработы - базовые знания, необходимые для начала работы
#паттерны - хорошие практики работы с React
#примерыкода - реальные примеры кода для изучения
#важно - моменты, на которые нужно обратить внимание
#ошибки - частые ошибки новичков в React
#вопросы
#подкапотом - невидимая часть React
#подключение - подключение React, а также дополнительных пакетов
#инструменты - полезные инструменты для разработки
#доступность
#проект - организация файлов и другие вопросы уровня целого проекта
#api
#безопасность
#отложено - аспекты уже пройденных тем, временно отложенные

​React Shadow

Еще один способ стилизовать приложение React - использовать теневой DOM. Shadow DOM - это изолированное DOM-дерево внутри главного DOM-дерева документа. В нем не действуют стили документа, то есть не возникает никаких конфликтов.

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

https://codesandbox.io/s/react-shadow-react-junior-4pko0?file=/src/App.js

Импортируем из модуля объект root. Чтобы создать Shadow Host, используем компонент root.div. Это автоматически создаст обычный div-элемент с теневым dom. Все, что вы поместите внутрь root.div будет находиться уже в теневом dom.

__Примечание: Вместо root.div можно использовать root.article, root.p, root.h1, и другие элементы, к которым по спецификации можно прикрепить теневой dom.__

Чтобы стилизовать то, что находится "в тени", нужно передать туда стили - как обычный тег style. Важно, что это должна быть именно строка стилей (не объект), поэтому если вы импортируете стили из другого файла, убедитесь это именно строка.

Стили, расположенные внутри shadow dom действуют только на этот shadow dom. При этом внешние стили документа сюда не проникают.

#стили #shadowdom #примерыкода

React Shadow

Немного более пристальный взгляд на react-shadow: https://codesandbox.io/s/react-shadow-2-react-junior-fd58m?file=/src/App.js

Все фичи React работают, состояние внутри теневого dom меняется, на хост можно установить `ref`и через него добраться до shadow root.

#стили #shadowdom #примерыкода