TL;DR Используя ReactiveElements, вы можете легко создавать веб-компоненты из компонентов React и пользоваться пользовательскими элементами в HTML.
В порядке. На дворе 2018 год. Веб-компоненты грядут. Итак, нужно ли нам изучать другой набор технологий, таких как Custom Elements, Shadow DOM и HTML-шаблоны? Должны ли мы попрощаться с React/Angular/Vue? Нет, вам не нужно. Веб-компоненты могут быть скорее друзьями этих существующих фреймворков.
Для пользователей React мы уже можем попробовать ReactiveElements благодаря PixelCommander. Он волшебным образом преобразует React.Component в пользовательские элементы.
Например, этот код показывает, как это работает.
<script> document.registerReact('my-react-counter', MyCounter); </script> <my-react-counter></my-react-counter>
Здесь «registerReact» — это вспомогательный метод от ReactiveElements. Он регистрирует данный React.Component как пользовательский элемент. Результат рендеринга:
Вуаля! Теперь HTML можно кодировать с помощью пользовательских элементов независимо от того, как компонент был реализован.
Вы можете попробовать это, зайдя в мой репозиторий и выполнив эти команды.
git clone [email protected]:fpt/my-reactiveelements-demo.git cd my-reactiveelements-demo npm install npm start
Развлекайся!