WordPress React开发项目初学者指南

WordPress是一个功能强大的内容管理系统 (CMS)，可让您构建从简单网站到复杂复杂的电子商务商店的所有内容。要将平台的PHP代码与JavaScript集成，您可以利用WP REST API和WordPress React。

React由Facebook开发，是一个用户界面 (UI)库，它使用一种简单的、基于组件的方法来构建易于理解的可扩展、跨平台的应用程序。但是，重要的是要学习如何正确使用它以充分利用其特性和功能。

在本指南中，我们将解释如何在WordPress中使用React。我们将讨论什么是框架，概述它的好处，并向您展示如何使用它。

• React特性和功能
  • JSX
  • 虚拟DOM
  • 组件
  • 状态
• 为什么要使用React？
• WP REST API概述
• React——开始之前
• 如何从React查询WP REST API
• 如何使用React创建自定义文章类型
• 如何创建React WordPress主题（2 种方法）
  • 1. 使用WP脚本创建一个React WordPress主题
  • 2. 使用Create-React-WPTheme创建一个React WordPress主题
• 如何将React添加到自定义页面模板
• 如何在你的应用中使用React

React简介

在开始之前，我们首先要问一个问题，“什么是React？” . 也称为 ReactJS，它是可用于Web开发的最流行的JavaScript库之一。

它由Facebook创建和维护，包含大量可用于构建UI组件的JavaScript代码片段。

与流行的看法相反，ReactJS不是一个JavaScript框架，因为它只呈现应用程序视图层的组件。因此，如果您正在寻找更复杂的功能，可以将其与Vue.js等实际框架配对。

同样重要的是要注意有ReactJS和React Native。后者是基于React库构建的开源JavaScript框架。您可以使用它为iOS和Android创建跨平台应用程序和特定于平台的组件。

React特性和功能

要了解React的好处，了解它的工作原理会很有帮助。以下是它的一些最重要的特性和功能：

JSX

React中使用的主要JavaScript语法扩展是JSX。您可以使用它在JavaScript对象中嵌入HTML代码并简化复杂的代码结构。

JSX还通过使第三方难以通过未明确写入应用程序的用户输入注入额外代码来帮助防止跨站点脚本 (XSS) 攻击。

JSX标记包括名称、子项和属性。一个典型的HTML图像标签看起来像这样：

< img class = "" src= "" alt= "" >

但是，一个JSX标记应该如下所示：

< img className= "" src= "" alt= "" / >

此外，数值写在大括号内。与JavaScript类似，引号代表字符串：

const name = 'John Doe’;
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

您可以将任何有效的JavaScript表达式放在大括号内。例如，它可以是“user.firstName”或“formatName(user)”。

虚拟DOM

文档对象模型 (DOM)以数据树结构呈现网页，React将其存储在其内存中。React可以实现对树的某些部分的更新，而不是完全重新渲染它。

Virtual DOM提供单向数据绑定。这使得操作和更新它比原始DOM更快。

它使用称为差异的过程。这是React生成一个新的Virtual DOM树，将其与旧的比较，然后找到将更改应用到真实 DOM 的最有效方法的时候。这需要更少的时间和更少的资源，这对于涉及大量用户交互的大型项目是有益的。

DOM还支持声明式API。这意味着您可以告诉React您希望UI处于哪种状态，以确保DOM将匹配该状态。

组件

正如我们所提到的，React组件是构成UI的独立、可重用的代码片段。这些组件的工作方式类似于JavaScript函数。他们接受道具，这是任意输入。当一个函数组件返回一个元素时，它会影响UI的外观。

Props是只读的。这是一个例子：

import React, { useState } from 'react' 
import ReactDOM from 'react-dom' 
 
const ParentComponent = () => { 
    const [stateVariable, setStateVariable] = useState('this is the starting value for the variable'); 
 
    return ( 
        <div> 
            <h1>This is a function component view</h1>
            <ChildComponent exampleProp={stateVariable} />
        </div> 
    ) 
} 
 
const ChildComponent = (props) => {
    return (
        <div>
            <h2>{props.exampleProp}</h2>
        </div>
    )
}
 
 
ReactDOM.render( <ParentComponent />, document.getElementById('app') );

有两种主要类型——类组件和函数组件。类组件使用生命周期WordPress钩子和API调用：

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { };
  }
  render() {
    return (
      <div>
        <h1>This is a view created by a class component</h1>
      </div>
    );
  }
}

同时，一个功能组件看起来像下面的例子：

const ExampleComponent = (props) => {
    const [stateVariable, setStateVariable] = useState('');
    return (
        <div>
            <h1>This is a function component view</h1>
        </div>
    )
}

功能组件用于在没有数据请求或状态管理的情况下呈现视图。

状态

State指的是React组件的内置对象。这是您存储元素属性值的地方。如果状态改变，组件会重新渲染。

状态管理是管理这些应用程序状态并将数据存储在状态管理库中的过程。你可以使用一些状态管理库，包括Redux和Recoil，后者对初学者更友好。

为什么要使用React？

使用React进行WordPress开发有很多好处。对于初学者来说，它对初学者很友好，许多网络托管服务提供商都支持它的使用。

由于它依赖于纯JavaScript和组件，因此您只需学习几天即可使用它来创建基于Web的应用程序。还有很多网站可以学习如何免费在线编码。对JavaScript基础知识的扎实理解可以简化该过程。

React的另一个好处是它允许您在其他应用程序中重用组件。它是开源的，因此您可以预先构建您的组件并将它们嵌套在其他组件之间，而不会使您的代码臃肿。

由于JSX集成，React组件的编写也相对简单，我们稍后会讨论。您可以合并HTML排版、标签并利用多种功能呈现来进行动态应用程序开发。

借助React，您还可以使用官方命令行界面 (CLI) – Create React App – 来加快单页应用程序的开发。它带有预配置的工具，可以帮助您简化设置和学习过程。

最后，React也是SEO友好的。虚拟DOM实现有助于提高页面速度、提高性能和服务器端渲染，使机器人更容易抓取您的网站。

WP REST API概述

WordPress REST应用程序接口 (API)使开发人员能够将JavaScript框架（例如React）与WordPress集成。您可以从站点的前端访问WP REST API，添加自定义文章类型，并构建由该API支持的React应用程序。

WP REST API是一组用于构建软件应用程序的协议。它们定义了程序之间如何共享信息和数据以及它们的组件如何交互。REST是Representational State Transfer的缩写，指的是程序的风格定义架构约束。

应用程序读取的结构化数据格式称为JavaScript Object Notation (JSON)。它有助于简化WordPress与其他应用程序和程序之间的通信。

WP REST API产生了一个解耦环境，允许用户将WordPress视为无头CMS。这意味着可以使用多种前端框架来钩住WordPress的后端。这对于不太热衷于PHP的开发人员来说是有利的。

React——开始之前

JavaScript、CSS和HTML的基本知识将有助于学习React。此外，如果您熟悉ECMAScript 6（也称为 ES6）、函数式编程和面向对象编程，学习过程会更加高效。

在程序方面，您还需要在计算机上安装一些依赖项。这包括NodeJS和npm以及一个文本编辑器。或者，您可能还想使用Git进行版本控制。

为WordPress开发React项目最流行的方法是使用Create React App：

CRA提供了一个简单的环境来学习React并使用它来构建单页应用程序。请注意，为了使用它，您首先需要在您的设备上安装Node和npm。

要创建一个新项目，您可以在终端中运行以下命令：

npx create-react-app wp-react-demo

如果您还没有这样做，它将确认您要在创建演示之前安装Create React App。这使样板模板。你也可以用你自己的名字替换“wp-react-demo”。

接下来，运行以下命令：

cd wp-react-demo
npm start

目录结构将如下所示：

├── README.md

├── package.json

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

├── src

│ ├── App.css

│ ├── App.js

│ ├── App.test.js

│ ├── index.css

│ ├── index