将 Wordpress 与 React.js 结合使用

什么是无头 CMS

使用Wordpress作为我们的后端

我们的 React js Starter 应用

创建我们的 PostList 组件

创建 PostView 组件

我们的 ReactJS 博客的最后步骤

React.js 的性能问题

完成我们的 Wordpress 和 React js 项目

在本文中，我们将介绍如何在构建项目时利用 WordPress API 和 React js 将 WordPress 用作无头 CMS。

如果你曾经想过 React 能否在 Wordpress 中使用，答案是肯定的。如果你之前搭建过 WordPress 网站，那么解决方案可能并不像你想象的那么简单。

什么是无头 CMS

在开始代码之前，解释一下我们将如何处理这个问题可能会有所帮助。如果您一直在寻找一种简单的方法来管理 React.js 项目的内容，您可能听说过“无头CMS”这个流行词。由于这个术语越来越流行，因此尽早定义它可能会有所帮助。

无头 CMS 是一种不提供前端解决方案的后端内容管理系统。

默认情况下，WordPress 使用主题和模板来为我们的 WordPress 网站提供前端。构建这样的网站需要与数据库交互，并创建用户可查看的结构。使用这种方法构建前端可能会有一些缺点。

首先，它可能会创建性能不佳的网站。虽然 PHP 是一种用途广泛的语言，但有更好的解决方案可以为用户构建 UI。其次，WordPress 支撑着大约三分之一的互联网。正因为如此，黑客喜欢尝试入侵 Wordpress 网站来获取敏感数据。拥有独立的前端可以完全防止用户或黑客知道这是一个 Wordpress 网站。

动图

好的，那么我如何使用 React js 来做到这一点？

Wordpress 公开了一个 REST API，允许访问网站创建的数据。我们可以利用这项技术，结合 Axios 之类的库，从 Wordpress 网站获取数据，并将其导入到 React.js 项目中。这意味着我们可以兼得两者之长：既能轻松使用 Wordpress 管理内容，又能享受使用 React.js 构建的乐趣。

使用Wordpress作为我们的后端

让我们来看看一个 Wordpress 网站，这样你就能清楚地明白我在说什么了。你可以使用任何 Wordpress 网站，即使是托管在子域名上的网站也可以。在本文中，我将以TechCrunch网站为例。

只需/wp-json/wp/v2/posts在 URL 末尾添加 ，我们就能看到所有最新帖子的 JSON 输出。只需更改posts为pages，我们就能看到 TechCrunch 网站页面的数据。

我们可以尝试不同的选项，例如posts、、等等。继续尝试，看看你能找到什么数据。这将帮助我们决定哪些数据是我们要使用的，哪些不是。pagesusers

动图

我们的 React js Starter 应用

我创建了一个 React Starter，你可以从这里下载。解决方案也在另一个分支上。你可以下载文件，运行yarn或npm install（无论你喜欢哪个），然后yarn start或npm run start。你会看到我们这个简单的页面，但会注意到它没有任何内容。让我们开始添加一些内容吧。

安装必要的软件包

打开package.json文件后，我们可以看到我已经包含了react、、react-dom和bulma来构建我们的前端。在进一步开发 React.js 应用之前，我们需要添加一些包。

我们可以添加Axios，这是一个允许我们轻松地从应用程序发出 http 请求的包。React -router可用于创建路由，这意味着我们无需刷新浏览器即可切换页面或组件。要安装这两个包，我们可以在终端中使用以下代码：

将 React Router 添加到 App.js 文件

react-router现在我们已经安装了新的包，我们需要在 app.js 文件中设置，以告诉浏览器在地址栏中输入不同的路径时应该显示什么。首先，我们需要从react-router文件顶部导入所需的部分。在导入的底部，添加以下代码：

现在我们已经导入了react-router，我们可以使用这些组件来设置路由。我们当前的 app.js 文件如下所示：

要为组件添加路由器app.js，我们需要将最外层组件包裹起来，<div>以便<Router>设置应用程序的路由。然后，我们可以<h1>用以下两个路由替换我们的标签：

让我们来分析一下：

PostList我们的第一个路由告诉 React.js在用户访问主路由 ( http://localhost:1234 )时显示一个组件。该exact属性表示它需要与此路由完全匹配，也就是说，如果我们在此之后有任何内容，它将不会转到此路由。

第二条路由将显示一个组件，PostView当用户访问通配符路由时，该组件会被调用。斜杠:slug表示斜杠后的任何字符串在我们的应用中都将指向不同的路由。在本例中，这个字符串或slug（因为我们是这样命名的）将是 TechCrunch 博客文章的 slug。我们的app.js文件现在应该如下所示：

接下来我们需要创建PostList和PostView组件并将它们导入到app.js组件中。

创建我们的 PostList 组件

在开始创建PostList组件之前，我们应该花点时间思考一下应该使用哪种类型的组件。我们将使用 axios 的componentDidMount生命周期方法发出 http 请求，然后将其存储在 state 中。我们可以在类组件中同时使用 state 和生命周期方法。既然我们已经了解了如何构建这个组件，就可以开始了。首先，我们应该为该组件创建文件：

接下来我们应该导入构建此组件所需的内容。在文件顶部添加以下导入语句PostList.js：

之后，我们可以创建一个名为 的类组件PostList，并设置博客首页的构造函数和状态。我们的状态应该包含我们将要显示的帖子列表。我们在此组件中编写的任何自定义函数都将绑定到此this构造函数中的关键字。

现在我们有地方存放帖子数据了，我们应该创建一个生命周期方法来提取这些数据并将其赋值给状态。我们可以通过在构造函数后添加以下代码来轻松实现这一点：

如果你经常开发 React 应用，我建议你在浏览器中安装React DevTools 。这样可以简化 React JS 的开发，并跟踪通过 state 和 props 传递的数据。

现在我们可以检查状态，确保它从componentDidMount生命周期方法中被正确填充。为此，请在浏览器中打开开发者工具，然后转到“React”选项卡。然后，我们可以深入查看结构，直到找到我们的PostList组件，右侧窗格会显示我们的状态和属性。

由于我们的状态中包含了所有帖子，我们可以为页面创建一个结构化的渲染方法。为了简单起见，我们可以使用一个map()函数来迭代数组中的每个项目。我们的渲染方法可以componentDidMount在以下代码之后执行。

如果我们使用npm run start或运行我们的网站yarn start，我们可以看到博客文章显示正确，但 HTML 标签却被渲染了。这不太好。为了正确渲染，我们应该创建一个与该dangerouslySetInnerHTML属性一起使用的函数。

componentDidMount让我们在方法之后、方法之前添加一个函数来执行此操作。我们还需要在构造函数中render绑定关键字。然后，我们可以使用该属性在 a 中渲染文章摘录。我们完成的组件应该如下所示：thisdangerouslySetInnerHtml<div>PostList

创建 PostView 组件

如果我们回顾我们的app.js文件，我们可以看到博客文章将使用组件呈现PostView，所以让我们继续创建它！

上面的代码将创建一个文件来存放我们的PostView组件，并在默认代码编辑器中打开它。为了简单起见，我们只需复制PostList组件的公式即可。我们可以从组件中复制粘贴代码PostList，并进行一些小的修改。

首先，我们需要确保将组件的名称从 更改PostList为PostView。接下来，我们需要componentDidMount稍微修改一下方法。我们可以添加一行代码，:slug从地址栏中的 URL 获取 ，并使用该代码将 Wordpress API 返回的帖子过滤到单个帖子。最后，我们需要修改该render方法，如果存在完整的帖子，则显示完整的帖子；如果不存在，则不显示错误。

下面的代码将用于我们完成的PostView组件。仔细查看一下，看看你是否能发现其中的区别，并弄清楚我们为什么这样处理它们。

我们的 ReactJS 博客的最后步骤

现在，我们的博客基本就绪了。为了让我们的应用能够按照我们想要的方式运行，我们只需要做一些小改动。首先，我们希望有一个 logo 或网站标题链接回主页。由于我们react-router在项目中使用了它，所以我们甚至可以在不刷新页面的情况下做到这一点。为此，我们可以打开components/header.js文件并将其修改为如下所示：

我们的 Wordpress 和 React.js 博客的最后一步是将 import 语句添加到app.js两个组件的文件中，PostList这样PostViewReact 就知道从哪里获取它们了。完成此操作后，您应该能够运行该应用程序并查看来自 TechCrunch 的最新博客文章。

React.js 的性能问题

您可能会注意到一些加载速度问题，或者在显示内容之前屏幕会空白一秒钟，这感觉有点奇怪。这是因为内容是在组件挂载后渲染的，所以会有一些延迟。此外，搜索引擎爬虫很难读取这类网站上的内容，因为内容是在页面渲染后通过 JavaScript 加载的。以下是一些常用的解决方法：

动图

Gatsby.js，一个静态站点生成器

Gatsby JS是我在 React JS 生态系统中最喜欢的构建工具之一。它允许我们使用 React、React-router 和 GraphQL 构建网站或应用，开箱即用！而且，当我们实际构建应用程序时，Gatsby JS 会创建静态文件，让我们的应用程序运行速度飞快。

由于我们应用程序的文件是静态提供的，因此速度非常快，因为内容都是预先创建的，而不是在页面渲染时创建的。这可能有点棘手，因为我们必须想办法在更新内容时触发构建。Netlify是我的首选服务，因为它非常易于使用，并且当你推送到某个 git 分支时，它会重建 Gatsby js 项目。

动图

Next.js，服务器端渲染的 React js

另一个处理这些问题的流行解决方案是Next.js，它为 React.js 应用程序提供服务器端渲染。Next.js 不再使用componentDidMount在组件挂载后获取数据的方法，而是公开了一种名为 的新方法getIntialProps，允许我们在组件渲染之前获取数据。

Next.js 提供的服务器端渲染功能也解决了爬虫读取内容困难的问题。此外，他们网站上提供的教程也非常棒。如果您使用 MERN 技术栈构建应用程序，这将是一个很好的解决方案，因为它可以处理频繁变化的数据。

完成我们的 Wordpress 和 React js 项目

如你所见，利用 Wordpress 提供的出色 UI 和 React.js 作为前端开发工具真的非常容易。你可以在个人项目、企业解决方案或自由职业中充分利用这些工具。这可谓是少有的两全其美的机会之一！