Заметки про React: “Как работает React Island React Island – это подход внедрения React ко…”

Как работает React Island

React Island – это подход внедрения React компонентов и даже целых приложений в статическую HTML страницу. Этот подход можно использовать для постепенного рефакторинга статического сайта или, если вы хотите добавить небольшую интерактивную часть на сайт, оставить все остальное как есть статическим.

Как это работает:

1) Рендерите HTML любым способом
2) Добавляете корневой div в HTML для React
3) Вызываете функцию
4) Рендерите небольшое React приложение в добавленный div элемент

React Island подойдет если у вас есть сайт, который рендерится статически через шаблонизатор. Автор предлагает не переписывать все сразу на React, т.к. на это может уйти много времени, а вместо этого делать постепенный рефакторинг. Либо оставить все как есть и добавлять небольшую интерактивность частями.

Для реализации подхода надо создать React компоненты и объявить в window поле для вызова функции рендера:


const ReactIslands = {
    amazingNewFeature: function amazingNewFeature(
        element: HTMLDivElement,
        props: AmazingNewFeatureProps
    ) {
        createRoot(element).render(
            <App>
                <AmazingNewFeature {...props} />
            </App>
        );
    },
};

window.ReactIslands = ReactIslands;

Через Vite нужно собрать файл reactIslands.js и добавить код в файл шаблонизатора рендера HTML страницы:


<script
  type="module"
  src="{{ url_for('static', filename='reactIslands.js') }}"
></script>
<script>
  $(document).ready(function () {
   window.ReactIslands.amazingNewFeature(
    document.getElementById('amazing-new-feature'),
    {
          prop1: {{ value_from_server | tojson }},
          prop2: {{ value_from_server | tojson }},
      })
  })
</script>
<div id="amazing-new-feature"></div>

Как видите из примера выше, здесь используется jQuery и шаблонизатор Jinja. Начальные пропсы в React передаются с помощью шаблонизатора.

https://swizec.com/blog/the-anatomy-of-a-react-island/