- A+
[
](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,您可以获得:
React 为您带来了最大的生态系统来构建丰富的 JavaScript 应用程序,这些应用程序允许简单的数据模型、良好的性能并且易于测试。
例如,如果我们想编写一个新的革命性电子邮件应用程序,我们可以使用 React 编写电子邮件客户端的界面,但其他一切都使用 WordPress。因此,当您开发应用程序时,您可能希望:
-
选择安装主题
-
为您的应用创建登录页面
-
添加表格收集邮箱地址
-
创建博客并在 Twitter 上发布您的帖子以宣传您的应用
-
为搜索引擎优化您的网站
以后可能有用
-
提供付费会员
-
创建论坛或FAQ
-
创建单独的登录页面
-
这一切都可以通过 WordPress 轻松完成,无需编写任何代码。
使用 ReactPress 将 React 应用程序嵌入 WordPress
虽然还有其他方法可以将 React 与 WordPress 集成,但ReactPress插件是将 React 应用程序嵌入到 WordPress 页面中最简单的方法,它允许您使用create-react-app而无需任何自定义构建配置。
ReactPress 不仅可以为您自动化 React 集成,而且还可以通过以您的 WordPress 站点为主题运行本地 React 开发服务器来确保无缝的开发体验。
为什么不只使用带有 SSR 的无头 WordPress
我知道带有Next.js、Gatsby或Frontity的无头 WordPress 现在风靡一时,但是使用这些解决方案,您为您的应用程序增加了一层复杂性,更重要的是,您失去了 WordPress 生态系统(主题和插件)的很多好处。
从开发到部署的步骤是:
-
设置你的本地开发环境。
-
在您的本地 WordPress 安装上安装 ReactPress
-
从你的 WP 安装创建一个新的 React 应用
-
开发你的 React 应用
-
构建应用程序
-
在实时 WordPress 网站上安装 ReactPress
-
在那里创建相同的 React 应用程序
-
将您的 React 应用程序的构建上传到您的实时站点以进行部署。
https://youtu.be/pVi07A_OZYA
该视频显示了 TwentyTwenty 主题的过程。
重复步骤 3、4 和 7,直到您的应用程序完成。
设置本地开发环境。
要开发 React 应用程序,您的 WordPress 安装需要访问:
-
PHP函数
shell_exec和exec, -
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 安装主题中运行。
[](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 应用程序。
[](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 应用程序。如果您有下一个大应用创意,您就可以开始了。
如果您有任何问题,请在评论中告诉我。
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-
