如何使用 drupal 自定义模块在 drupal 8 中集成 React 应用程序？

Question

我是 React 和 drupal 8 的新手。我知道在 drupal 中创建自定义模块和 React SPA，但我无法使用 drupal8 控制器调用我的 React 应用程序。有人可以让我清楚在 drupal 8 中集成 React 应用程序的流程和正确方法吗？

Answer 1

因此，从常规 Drupal 控制器层或 Drupal 8 的 twig 模板中调用 React 应用程序并没有真正好的方法。

人们通常通过两种方式将 React 应用程序连接到 D8。

选项 1 - 逐步分离的站点 - 这是 Drupal 仍然使用 TWIG 引擎生成绝大多数站点视图的地方，并且可以在站点的一小部分使用 React，同时通过基于 Drupal 的 Drupal 进行通信网络服务。查看此项目以获取更多信息 - https://www.drupal.org/project/pdb。如果您只想添加一个基于 React 的小部件，但又想让您的网站的大部分内容使用标准 TWIG，那么这是一个不错的选择。

选项 2 - 完全分离站点 - 这是您使用 React 呈现 100% 的应用程序视图层的地方，并且只使用 Drupal 作为提供 Web 服务的 CMS。 Web 服务部分有多个选项，包括 https://www.drupal.org/project/graphql and https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview。因此，这方面的一个例子是在静态服务器上提供 create-react-app 并通过 Web 服务与 D8 通信。

以下是一些可能有助于指导您做出决定的附加信息。 https://dri.es/how-to-decouple-drupal-in-2018

祝你好运！

Answer 2

长 post 有一些假设（但它有效）：我一直在寻求实现相同的目标（Drupal 8 和 React 解耦块），我搜索了又搜索，我发现自己不止一次回到这个页面，所以我将把我发现的小东西留在这里。 我的假设：

您已经创建了一个自定义块，它有自己的树枝模板。
您已在您的库文件中定义了您的库（我们将对此进行审核）
您的模块根文件夹中有 created your react app npx create-react-app my-app。

create-react-app my-app 在 my-app 文件夹中创建一个 React 应用程序，my-app 包含所有 React 代码和配置。为了让我们的应用程序（自定义反应 js 库）与 drupal 一起玩，我们需要覆盖一些东西，比如重命名我们的文件的脚本（构建命令），到 drupal 可以识别（识别）和加载的东西。运行 yarn add react-app-rewired --dev，下载 react app rewire，让我们覆盖默认的 react-app 配置，而无需弹出我们的应用程序。在 react-app 文件夹的根目录中，创建一个名为 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",

注意：我已经编辑了构建命令并添加了 build:dist 脚本（但是如果不在 windows 上请在 build:dist 中将 copy 替换为 cp，将 \ 替换为 /）。这将确保每次你运行构建脚本时，你的构建文件将被重命名为 main.js 和 main.css 而没有文件名..js/css 我们可以在我们的 libraries.yml 文件。

我的模块名。libraries.yml 看起来像这样（文件名 = 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 命名为 'root' 而不是因为 React 应用程序在呈现您的应用程序时使用相同的 ID。查看 react_js/public/index.html 和 react_js/src/index.js。 index.html 提供 div 来挂钩我们的应用程序，index.js 在提供的 div 上呈现应用程序（ReactDOM.render(<App />, document.getElementById('root'));），在开发过程中这样做的好处是，您可以创建您的应用程序并立即在您的应用程序上查看更改 (http://localhost:3000/)，稍后您可以运行 yarn build 在您的 drupal 8 站点上查看最新的更改。

如何使用 drupal 自定义模块在 drupal 8 中集成 React 应用程序？

How to integrate a react application in drupal 8, using drupal custom module?

controller

drupal-8

single-page-application

reactjs