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图像标签看起来像这样：

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

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

const name = 'John Doe’;
const element = 
Hello, {name}
;
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 ( 
        
 
            
This is a function component view