Как интегрировать приложение React в drupal 8 с помощью настраиваемого модуля drupal?

Таким образом, на самом деле нет хороших способов вызова приложения React из обычного уровня контроллера Drupal или из шаблонов веточек Drupal 8.

Обычно люди подключают приложение React к D8 двумя способами.

Вариант 1 - Сайты с постепенной развязкой - здесь Drupal по-прежнему использует движок TWIG для генерации подавляющего большинства просмотров сайта и может использовать React для некоторой небольшой части сайта, взаимодействуя с Drupal через веб-сервис на основе Drupal. Ознакомьтесь с этим проектом для получения дополнительной информации - https://www.drupal.org/project/pdb. Это хороший вариант, если вы просто хотите добавить небольшой виджет на основе React, но хотите, чтобы большая часть вашего сайта использовалась стандартным TWIG.

Вариант 2 - Полное разделение сайтов - здесь вы визуализируете 100% уровня представления ваших приложений с помощью React и просто используете Drupal как CMS, которая предоставляет веб-сервис. Есть несколько вариантов для части веб-сервиса, включая https://www.drupal.org/project/graphql и https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview. Таким образом, примером этого может быть обслуживание приложения create-response-app на статическом сервере и связь с D8 через веб-службу.

Вот некоторая дополнительная информация, которая может помочь вам принять решение. https://dri.es/how-to-decouple-drupal-in-2018

Удачи!

Длинный пост с некоторыми предположениями (но он работает): Я стремился достичь того же (Drupal 8 и блок React decoupled), и я искал и искал, я обнаружил, что возвращаюсь на эту страницу более одного раза, поэтому я оставлю мелочь, которую я обнаружил здесь. Мои предположения:

• вы создали настраиваемый блок с собственным шаблоном веточки.
• вы определили свои библиотеки в файле библиотек (мы рассмотрим это)
• у вас есть создал ваше приложение для реагирования в корневой папке вашего модуля с npx create-react-app my-app.

create-react-app my-app создает приложение для реагирования внутри папки my-app, my-app содержит весь код реагирования и конфигурации. Чтобы наше приложение (настраиваемая js-библиотека для реагирования) хорошо работало с drupal, нам нужно будет что-то переопределить, например сценарии для переименования наших файлов (команда сборки), на то, что drupal может идентифицировать (распознавать) и загружать. Запустите yarn add react-app-rewired --dev, чтобы загрузить реагировать приложение перепрограммировать, что позволит нам переопределить конфигурации реактивного приложения по умолчанию без необходимости извлекать наше приложение. В корне папки вашего приложения-реакции создайте файл с именем config-overrides.js, который должен содержать приведенный ниже код.

module.exports = function override(config, env) {

  config.optimization.runtimeChunk = false;
  config.optimization.splitChunks = {
    cacheGroups: {
      default: false
    }
  };

  return config;
};

и отредактируйте скрипты в package.json, чтобы

"build": "react-app-rewired build && yarn run build:dist",
"build:dist": "cd build && copy static\\js\\*.js main.js && copy static\\css\\*.css main.css",

NB: я отредактировал команду сборки и добавил скрипт build: dist (однако, если не в Windows, пожалуйста замените copy на cp и \\ на / в build: dist). Это гарантирует, что каждый раз, когда вы запускаете скрипт сборки, ваши файлы сборки будут переименованы в main.js и main.css без имени файла..js / css, на которое мы затем сможем ссылаться в нашем файле library.yml.

мое имя модуля.libraries.yml выглядит так (filename = modern_js_drupal.libraries.yml)

react_local:
  version: 1.x
  js:
    my-app/build/main.js: {}
  css:
     layout:
       my-app/build/main.css: {}

и мой block.html.twig

<div class = "row">
  <div id = "root">
    <h4>React App</h4>
</div>

{{ attach_library('modern_js_drupal/react_local') }}

Причина, по которой я назвал свой div «корнем», а не чем-то еще, если потому, что приложение React использует тот же идентификатор при рендеринге вашего приложения. Посмотрите на response_js / public / index.html и response_js / src / index.js. index.html предоставляет div для подключения нашего приложения, а index.js отображает приложение в предоставленном div (ReactDOM.render(<App />, document.getElementById('root'));). Преимущество этого во время разработки заключается в том, что вы можете создать свое приложение и мгновенно просмотреть изменения в своем приложении (http: // локальный: 3000 / ), и вы можете позже запустить yarn build, чтобы просмотреть самые последние изменения на вашем сайте drupal 8.