WordPress 用户的 React JS：基本介绍

超过 15 年以来，WordPress 一直是最受欢迎和最完整的 CMS 解决方案，可让您构建从单页投资组合到成熟电子商务平台的任何内容。 WordPress 将 PHP 用于其所有后端基础设施，如更新、API、身份验证、数据库层和大部分前端。 然而，像其他流行的框架一样，WordPress 最近也被迫发展。

鉴于用于 Web 的 JavaScript 应用程序以及桌面和本机移动应用程序的潜力和力量不断增强，WP REST API 试图弥合 WordPress 的 PHP 核心的遗产与 JavaScript 的兴起之间的差距。 我相信这对 WordPress 来说是一个巨大的进步，原因有两个：

1. 现有的 WP 网站可以使用 React/Vue 或其他前端库来创建更好的 UI 体验。
2. 相反，Web 开发人员可以获得行业标准的无头 CMS，可以轻松地与他们选择的堆栈集成。

这对每个人来说都是双赢的局面。 在本文中，我们将集中精力为 WordPress 后端构建 React 前端。 但首先，让我们来看看 WordPress REST API。

WordPress REST API 基础

WP REST API 的开发始于几年前，最初被设计为一个独立的功能插件。 代号为“Clifford”的 WordPress v4.4 将 REST API 的实际基础设施引入了 WordPress 的核心。 实际端点出现在 WordPress v4.7 中，代号为“Vaughan”。 WP API 允许您将 WordPress 用作易于使用且稳定且对 JSON 友好的无头 CMS。

JSON

如果您要将 WordPress 与 JavaScript 堆栈集成，则 JSON 是首选格式。 JSON 类似于 XML，因为它使我们能够使用非常易读的语法有效地传输数据。

JSON 实际上是一个字符串，它包含 JavaScript 对象的基于文本的表示。 它将数据存储在一组键值对中。 WP 帖子的简单 JSON 示例如下所示 –

{
id: 1,
"title": {
"rendered": "Hello World"
  },
  "content": {
"rendered": "Welcome to WordPress. This is your first
post. Edit or delete it, then start blogging!"
  }
}

使用 WP REST API 的完整 JSON 响应通常包含有关帖子的其他信息，例如元数据。 您拥有为应用程序创建前端主题或插件所需的一切。

终点

公众可以轻松访问 WordPress 端点。 如果您运行的是最新版本的 WordPress，则只需将/wp-json/wp/v2附加到 URL 的末尾。 例如，如果您在本地主机中设置了 WordPress 实例，则可以访问127.0.0.1/wp-json/wp/v2处的基本端点。 如果您想美化输出，您可以使用 JSON 查看器扩展，使 JSON 在您的浏览器上看起来很漂亮。

屏幕上显示的数据本质上是 JSON 格式的内容和元信息。 您在这里所做的是定义一个路由并要求您的浏览器为您获取数据。

我们所说的路线是什么意思？ 路由是映射到特定方法的 URL。 WordPress 核心读取路由并理解每个“/”代表需要遵循的特定路径或参数。

例如，端点可以是'/wp-json/wp/v2/posts/1' ，您在其中请求 id 等于 1 的帖子。WordPress API 很有用，因为它们非常广泛。 这意味着能够从您的网站获取任何数据并将其转换为端点。 支持 WordPress 中的几乎所有核心​​功能，并且还将支持所有即将推出的功能。 以下是编写本教程时支持的 WordPress API 列表：

主题开发人员以及插件开发人员可以为他们的应用程序创建自定义端点。 如果您想查看所有可用的不同端点，您可以下载类似 Postman 的应用程序。 这将为您提供一个专门用于探索 API 的 GUI。 此外，您可以直接对第三方应用程序进行 API 调用，而无需依赖插件。

让我们举个例子。 上传文件并维护它的多个版本是任何现代 Web 应用程序不可或缺的要求。 在媒体文件的情况下尤其如此。 在 WordPress 中，有大量可用的插件可以为您做到这一点； 但是，您可能需要调用 WordPress 服务器才能使用它们。

使用 WP API，媒体处理逻辑可以从 WordPress 中抽象出来。 您可以直接从前端进行所有第三方 API 调用，这在关注点分离方面非常有用。 您可以使用 Cloudinary 之类的库来动态处理图像和其他媒体文件，然后将它们上传到云端。 上传后，图像的 URL 可以存储在 WP 后端。 选项是无穷无尽的，您可以以任何您认为合适的方式将各个部分组合在一起。

现在让我们看看如何将 WordPress 后端与 React 连接起来。

React 入门

React 是一个声明式前端库，用于在 Web 上构建用户界面和交互式应用程序。 使用 React，您可以组合更小的独立可重用代码段，称为组件。 让我们通过创建一个 React 项目来创建我们的第一个组件。

创建 React 项目最流行的方法是运行 create-react-app。 CRA 为学习 React 提供了一个舒适的环境，如果您是初学者，它是开始构建新的单页应用程序的最佳方式。 它设置您的开发环境，以便您可以使用最新的 JavaScript 功能，例如 ES6 和 webpack。 此外，create-react-app 提供了良好的开发人员体验并优化了您的应用程序以进行生产。

您需要在您的机器上安装 Node >= 8.x 和 npm >= 5.2。 要创建项目，请运行以下命令：


npx create-react-app wp-react-demo


上面的命令为我们的 react 应用程序创建了一个样板模板，我们将其命名为wp-react-demo 。


cd wp-react-demo
npm start


如果一切顺利，它应该能够在 http://localhost:3000/ 的开发服务器上为新创建的应用程序提供服务。

如果你想看看 create-react-app 生成的目录结构，它是这样的：

.
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.css
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ └── registerServiceWorker.js
└── yarn.lock


public 目录包含启动应用程序所需的所有资产。 src 目录包含我们将要处理的所有 JavaScript 文件，您将在那里花费大量时间。

当您访问 localhost:3000 时，会加载 index.html 文件。 如果你打开 public/index.html 文件，那里没有什么。 但是你会在中间的某个地方找到这条线：

<div id="root"></div>

这是 React 将组件树渲染到应用程序根目录的起点。

这意味着什么？ 转到 src 目录并打开index.js 。

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

React 尝试在文档中查找 id 为“root”的元素，然后注入组件进入根。 实际上，App 组件被渲染，这就是旋转 React 标志的来源。 您可以通过打开src/App.js文件来验证这一点。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
 render() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1 className="App-title">Welcome to React</h1>
       </header>
       <p className="App-intro">
         To get started, edit <code>src/App.js</code> and save to reload.
       </p>
     </div>
   );
 }
}

export default App;

这基本上就是一个组件的样子。 每个组件都呈现您 UI 的一部分。 您可以在另一个组件中组合一个组件，这就是您获得这样的组件树结构的方式：

如果您想知道为什么我们能够在 render() 中使用 HTML，这就是 JSX 的神奇之处。 JSX 是 JavaScript 的语法扩展，允许您在 JavaScript 文件中使用纯 HTML。 您可以在官方文档中阅读更多相关信息。

我将删除所有 HTML 内容，然后将其替换为

<div>
<h2> WordPress Blog </h2>
</div>

constructor (props){
   super(props);

   this.state = {
     title: {},
     date: "",
     content: {}
   };
 }

componentDidMount() {
       return fetch(`http://wordpress.com/wp-json/wp/v2/posts/`)
       .then((response) => response.json())
       .then((responseJson) => {
        // Update state here         
       })
       .catch((error) => {
         console.error(error);
       });         
 }

const { title, date, content } =  responseJson;

        this.setState({ title, date, content });

render() {
   return (
     <div>
     {this.state.title.rendered}
     </div>
   );
 }
}

<div
    className= "content"
    dangerouslySetInnerHTML={{ __html: this.state.content.rendered }}>
</div>

render() {
   return (
     <div>
       <div>
             <div className="row">
               <div className="leftcolumn">
                 <div className="card">
                   <div className= "title">
                     <h1>{this.state.title.rendered}</h1>
                     <p> {this.state.date} </p>
                   </div>
                
                   <div
                     className= "content"
                     dangerouslySetInnerHTML={{ __html: this.state.content.rendered }} />
                 </div>
               </div>
             </div>
           </div>
     </div>
   );
 }
}

import './App.css';