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

Прелесть ReactJs в том, что его можно легко интегрировать с любым другим фреймворком.

Давайте посмотрим, как интегрировать ReactJs с Drupal 8 и Drupal 7.

TL;DR

Мы надеемся, что ReactJs справится с тяжелой работой с пользовательским интерфейсом, а все остальное оставим на Drupal.

Ниже приведены шаги, которым мы будем следовать. Подробности мы узнаем позже в блоге.

№1. Создайте настраиваемый модуль, который создает настраиваемый блок

Пользовательский блок имеет кодовую базу для ReactJS.

# 2 Разработайте свое приложение для реагирования.

# 3 Когда закончите, запустите

`npm run build` or `yarn run build`

Это создаст папку сборки в корневом каталоге.

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

Этот настраиваемый блок должен иметь div с идентификатором «root».

Если вы хотите присвоить ему другой идентификатор, обновите /src/index.js до

ReactDOM.render(<App />, document.getElementById(‘YourId’));

Настройка Drupal 8:

Включите минимальные файлы в указанном порядке.

Я переименовал сгенерированные файлы в runtime.js, chunk.js и main.js.

Сгенерированные файлы имеют самогенерируемые имена, объединенные с runtime, chunk или main.

Добавьте другие сторонние библиотеки CSS, которые вы хотите включить, как показано выше.

Давайте автоматизируем:

npm install --save renamer

И добавьте следующее в «scripts» package.json

"renameRuntimeJS": "renamer --find \"/runtime.*.js$/\" --replace \"runtime.js\" \"build/static/js/*\"",
"renameChunkJS": "renamer -f \"/^(?!.*main).*chunk.js/\" -r \"chunk.js\" \"build/static/js/*\"",
"renameMainJS": "renamer -f \"/main.*.js$/\" -r \"main.js\" \"build/static/js/*\"",
"renameCSS": "renamer -f \"/.*chunk.css/\" -r \"chunk.css\" \"build/static/css/*\"",
"renameAll": "npm run renameRuntimeJS && npm run renameChunkJS && npm run renameMainJS && npm run renameCSS"

ваш package.json должен выглядеть так:

npm run renameAll

Вуаля !!!

После всего этого я включил модуль, который только что создал программно. Затем в области «Макет блока» в области «Содержимое» я разместил этот настраиваемый блок.

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

НАСТРОЙКА DRUPAL 7

Примечание: примечание

массив (‘scope’ = ›‘ footer ’)

Важно загружать файлы JS в нижний колонтитул блока, иначе они будут добавлены в начало блока. Он будет искать div с соответствующим идентификатором, и, поскольку html еще не отрисован, он не найдет его, что приведет к ошибке Uncaught Invariant Violation: Minified React error.

массив уведомлений (‘scope’ = ›‘ footer ’)

Загружает файлы JS в нижний колонтитул, что позволяет избежать вышеупомянутой ошибки.

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