使用 ReactPress 插件轻松将 React 应用程序嵌入 WordPress

  • A+
所属分类:WordPress技巧

[使用 ReactPress 插件轻松将 React 应用程序嵌入 WordPress](https://res.cloudinary.com/practicaldev/image/fetch/s--h7Y4wjG4--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/k596qhhhbbgroxr4r61a.png)

为什么选择 React 和 WordPress

WordPress和React是开发 Web 应用程序的杀手级组合。

使用 WordPress,您可以获得:

  • 帮助页面、登录页面、博客和其他营销活动的简单内容管理

  • 安全且经过验证的用户管理

  • 超过 100.000 个插件

  • 随着时间的推移有很大的灵活性来改变您网站的特性

React 为您带来了最大的生态系统来构建丰富的 JavaScript 应用程序,这些应用程序允许简单的数据模型、良好的性能并且易于测试。

例如,如果我们想编写一个新的革命性电子邮件应用程序,我们可以使用 React 编写电子邮件客户端的界面,但其他一切都使用 WordPress。因此,当您开发应用程序时,您可能希望:

  • 选择安装主题

  • 为您的应用创建登录页面

  • 添加表格收集邮箱地址

  • 创建博客并在 Twitter 上发布您的帖子以宣传您的应用

  • 为搜索引擎优化您的网站

以后可能有用

  • 提供付费会员

  • 创建论坛或FAQ

  • 创建单独的登录页面

  • 这一切都可以通过 WordPress 轻松完成,无需编写任何代码。

使用 ReactPress 将 React 应用程序嵌入 WordPress

使用 ReactPress 插件轻松将 React 应用程序嵌入 WordPress

虽然还有其他方法可以将 React 与 WordPress 集成,但ReactPress插件是将 React 应用程序嵌入到 WordPress 页面中最简单的方法,它允许您使用create-react-app而无需任何自定义构建配置。

ReactPress 不仅可以为您自动化 React 集成,而且还可以通过以您的 WordPress 站点为主题运行本地 React 开发服务器来确保无缝的开发体验。

为什么不只使用带有 SSR 的无头 WordPress

我知道带有Next.js、Gatsby或Frontity的无头 WordPress 现在风靡一时,但是使用这些解决方案,您为您的应用程序增加了一层复杂性,更重要的是,您失去了 WordPress 生态系统(主题和插件)的很多好处。

从开发到部署的步骤是:

  1. 设置你的本地开发环境。

  2. 在您的本地 WordPress 安装上安装 ReactPress

  3. 从你的 WP 安装创建一个新的 React 应用

  4. 开发你的 React 应用

  5. 构建应用程序

  6. 在实时 WordPress 网站上安装 ReactPress

  7. 在那里创建相同的 React 应用程序

  8. 将您的 React 应用程序的构建上传到您的实时站点以进行部署。

https://youtu.be/pVi07A_OZYA

该视频显示了 TwentyTwenty 主题的过程。

重复步骤 3、4 和 7,直到您的应用程序完成。

设置本地开发环境。

要开发 React 应用程序,您的 WordPress 安装需要访问:

  • PHP函数shell_execexec,

  • nodejs包管理器npm版本 6 或更高

  • 和 POSIX 兼容系统

这意味着Local by Flywheel将不起作用,因为您无法控制那里的节点环境。创建符合要求的本地 WordPress 安装的最简单方法是使用Bitnami-Installers。它们提供了一个独立的安装,不会污染您的系统。

但是,您安装 WordPress 开发系统,如果它满足要求,您应该没问题。

在您的本地 WordPress 安装上安装 ReactPress

在您本地的 WordPress 中转到插件安装,搜索 ReactPress,安装并激活插件。

从本地 WP 安装创建一个新的 React 应用程序

在 WP 安装的管理员中,单击边栏中的 ReactPress。在那里你应该会看到一个创建新 React 应用程序的表单。

输入一个名称(以后需要在直播系统中使用相同的名称),输入一个pageslug,选择类型“开发一个新的应用程序(通常在本地机器上)。 " 并选择你想使用的 create-react-app-template,最后点击 "Create React App" 按钮。

片刻之后,您的应用程序应已创建并在端口:3000 上运行。如果您单击该链接,您可以看到您的本地开发应用程序在您的 WP 安装主题中运行。

[使用 ReactPress 插件轻松将 React 应用程序嵌入 WordPress](https://res.cloudinary.com/practicaldev/image/fetch/s--OfoaZQMq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ps.w.org/ reactpress/assets/screenshot-2.png%3Frev%3D2471443)

运行 React 应用程序 reactino 的 ReactPress。

开发你的 React 应用程序

现在你可以像以前一样开发你的 React 应用了。使用WordPress 的内置 REST-API获取数据或使用WPGraphQL 插件如果您更喜欢GraphQL。

构建应用程序

如果您想部署到您的实时站点,请通过 WP 管理员构建您的应用程序。不要为此使用 CRA 命令行!

在实时 WordPress 网站上安装 ReactPress

在你上传你的 React 应用程序之前,在你的实时站点上安装 ReactPress,就像你在本地安装一样。

在那里创建相同的 React 应用程序

在您的实时系统上创建与您在本地系统上创建的相同的 React 应用程序。 _重要!使用_完全相同的名称,这次选择“部署一个已经构建的应用程序(通常在服务器上)。”作为类型。

将您的 React 应用程序的构建上传到您的实时站点以进行部署。

最后,上传你的 React 应用程序的构建。将本地 React 应用程序的构建文件夹上传到实时系统上的应用程序。

ReactPress 管理员显示您的应用程序所在的位置。它将是这样的:.../htdocs/wp-content/plugins/reactpress/apps/[your-appname]

如果您在 ReactPress 中单击您的 React 应用程序的 URL slug,您应该会在您的实时系统上看到您的 React 应用程序。

[使用 ReactPress 插件轻松将 React 应用程序嵌入 WordPress](https://res.cloudinary.com/practicaldev/image/fetch/s--6n4N74dj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://ps.w.org/ reactpress/assets/screenshot-6.png%3Frev%3D2471443)

部署的 React 应用程序嵌入到具有 TwentyTwenty 主题的实时 WordPress 站点中。

从这里到哪里去?

您现在应该能够创建嵌入在 WordPress 中的 React 应用程序。如果您有下一个大应用创意,您就可以开始了。

如果您有任何问题,请在评论中告诉我。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin