В эпоху быстрого и производительного веб-приложения, работающего в реальном времени, нельзя упускать из виду сверхспособности 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 в нижний колонтитул, что позволяет избежать вышеупомянутой ошибки.
Как только вы закончите с этим, вы сможете увидеть, как ваше реагирующее приложение находится в настраиваемом блоке.