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

Развлекайся!