注册
WordPress开发

WordPress React开发项目初学者指南

WBOLT_COM
3.1k+
0

WordPress React开发项目初学者指南

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

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

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

React简介

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

React官网

它由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：

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.js
│ ├── logo.svg
│ └── registerServiceWorker.js

在src目录中，您将找到您将要处理的所有JavaScript文件。现在，您可以访问localhost:3000来加载index.html文件。

public/index.html文件不包含太多内容。但是，您可以找到以下行，这将是您项目的起点：

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

在src目录的index.js文件下，您会发现以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
ReactDOM.render(<App />, document.getElementById('root'));

这意味着它正在渲染App组件，您可以在src./App.js下找到该组件。您可以将其替换为您自己的HTML内容。我们可以使用JSX语法扩展HTML Insider  render()。

如何从React查询WP REST API

默认情况下，您可以创建一个GET请求在您网站的前端使用WP REST API。例如，您可以使用/wp-json/wp/v2/posts获取您的所有文章。坚持前面的例子，这个文章数据将位于http://localhost/wp-json/wp/v2/posts/。

要开始使用React，您可以在终端中运行以下命令：

npx create-react-app react-app

然后，运行以下命令：

cd react-app 
npm install @material-ui/core

接下来，您可以输入以下示例：

import React, { useEffect, useState } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Grid from '@material-ui/core/Grid';
    
export default function Posts() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        async function loadPosts() {
            const response = await fetch('/wp-json/wp/v2/posts');
            if(!response.ok) {
                // oups! something went wrong
                return;
            }
    
            const posts = await response.json();
            setPosts(posts);
        }
    
        loadPosts();
   }, [])
  return (
    <Grid container spacing={2}>
      {posts.map((post, index) => (
      <Grid item xs={4} key={index}>
        <Card>
           <CardContent>
                <Typography
                    color="textSecondary"
                    gutterBottom
                    dangerouslySetInnerHTML={{__html: post.title.rendered}} />
                <Typography
                    variant="body2"
                    component="p"
                    dangerouslySetInnerHTML={{__html: post.content.rendered}} />
            </CardContent>
        </Card>
      </Grid>
     ))}
    </Grid>
 );
}

上面的例子使用了React Hooks–useEffect和useState. 前者声明文章数组并调用更新它，而后者获取代码。

如何使用React创建自定义文章类型

您还可以使用React创建WordPress自定义文章类型。但是，您需要提前安装一些工具。这将有助于使流程尽可能无缝和简单。

首先，您需要添加WordPres插件Custom Post Type UI。

Custom Post Type UI

这个插件简化了在WordPress中创建自定义文章类型的过程。

我们还建议安装Advanced Custom Fields (ACF)。

Advanced Custom Fields (ACF)

这也是一个免费工具。该插件可用于创建自定义字段并将其添加到您的自定义文章类型。我们还建议将ACF安装到REST API以使您的自定义字段可用于您的文章类型。

要开始，请从您的管理区域导航到CPT UI > Add/Edit Post Types。在我们的示例中，我们将使用名称“Books”。我们还将选择自动填充其余字段的选项。

CPT UI添加编辑文章类型

在Show in REST API部分下，将其设置为True并输入“Books”作为REST API基础slug。在Supports下，选中Author 和Custom fields复选框。完成后单击保存文章类型。

接下来，我们可以为自定义文章类型创建自定义字段。导航到Custom Fields > Add New，然后输入适当的标题，例如“Book Info”。您可以单击添加字段， 然后填写字段标签、名称和类型。

ACF添加字段

在Location下，您可以将文章类型设置为与图书自定义文章类型相同。完成后，选择发布以激活自定义字段。

接下来，转到我的图书 > 添加新书 并输入其标题、摘要和特色图片。您可以重复此过程以创建任意数量的内容。

现在，从您的终端输入以下命令，运行每个命令，然后继续执行下一个命令：

npx create-react-app frontend
cd frontend
npm i axios
npm start

接下来，在src目录，您可以创建一个名为components的文件夹，然后创建一个名为books.js的文件。完成后，输入以下内容：

import React, { Component } from 'react';
import axios from 'axios';
export class Books extends Component {
   state = {
       books: [],
       isLoaded: false
   }
 componentDidMount () {
   axios.get('http://localhost:3000/wp-json/wp/v2/books')
       .then(res => this.setState({
           books: res.data,
           isLoaded: true
       }))
       .catch(err => console.log(err))
   }
   render() {
      console.log(this.state);
       return (
           <div>
             
           </div>
       )
   }
}
export default Books;

在App.js文件中，输入以下内容：

import React from 'react';
import './App.css';
import Books from './components/Books';
function App() {
 return (
   <div className="App">
    <Books>
   </div>
 );
}
export default App;

现在，在您的终端中，您可以运行npm start命令。这将启动React应用程序。当您在浏览器中打开“Book”数据控制台时，您可以查看它。您可以通过映射每本书来显示每个标题。

在Book.js中，输入以下内容：

render() {
      const {books, isLoaded} = this.state;
       return (
           <div>
              {books.map(book => <h4>{book.title.rendered}</h4>)}
           </div>
       )
   }

请注意，您还可以将书籍集合分离为单个书籍组件。您可以通过在src/components其中创建一个文件来做到这一点. 您还可以添加自定义CSS来设置自定义文章类型 (app.css) 的样式。

如何创建React WordPress主题（2 种方法）

也许您想知道如何使用React创建WordPress主题。有几个选项，让我们看一下两种流行的方法：

1. 使用WP脚本创建一个React WordPress主题

在典型的React应用程序中，您需要在文件顶部导入React。然而，从WordPress 5.0开始，CMS附带React和ReactDOM库并将它们导出到wp.element，一个全局窗口对象。

如果您以前使用过React，那么您可能已经使用过Create React App来运行您的开发服务器。但是，对于WordPress，这不是必需的。

WordPress团队基于react-scripts使用Create React App创建了一个wp-scripts包。WP Scripts默认包含命令。

要在主题中加载React，请导航到主题的functions.php文件，然后添加以下代码片段：

// Enqueue Theme JS w React Dependency
add_action( 'wp_enqueue_scripts', 'my_enqueue_theme_js' );
function my_enqueue_theme_js() {
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time(), // Change this to null for production
    true
  );
}

这将添加wp-element作为JavaScript文件的依赖项。接下来，我们需要设置一个package.json文件。从WordPress主题的根目录运行以下命令：

npm init

完成后，运行以下命令：

npm install @wordpress/scripts --save-dev

WP脚本将被下载到您的node_modules中，因此它们可以在您的命令行中使用。要将WP脚本映射到NPM脚本，您可以浏览到您的package.json文件，加载“脚本”设置，并将它们替换为以下示例：

{
  "name": "myreacttheme",
  "version": "1.0.0",
  "description": "My WordPress theme with React",
  "main": "src/index.js",
  "dependencies": {},
  "devDependencies": {
    "@wordpress/scripts": "^5.1.0"
  },
  "scripts": {
    "build": "wp-scripts build",
    "check-engines": "wp-scripts check-engines",
    "check-licenses": "wp-scripts check-licenses",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "lint:pkg-json": "wp-scripts lint-pkg-json",
    "start": "wp-scripts start",
    "test:e2e": "wp-scripts test-e2e",
    "test:unit": "wp-scripts test-unit-js"
  },
  "author": "",
  "license": "1 GNU V2+, MIT"
}

接下来，您可以运行以下命令：

npm start

这将查找从src/index.js导入的文件，并在文件更改时将 它们构建到build/index.js 。

2. 使用Create-React-WPTheme创建一个React WordPress主题

另一种选择是使用devloco的create-react-wptheme。这个包类似于create-react-app。但是，它使用WordPress而不是webpack作为开发服务器。您还可以访问所有核心函数、钩子、动作、过滤器等。

要进行设置，您可以在本地WordPress安装中启动终端（或git bash），然后键入以下命令：

npx create-react-wptheme barebones

“准系统”是主题的名称。您可以将其更改为您想要调用主题的任何内容。

您将看到一条消息，通知您安装在其中创建了一个根文件夹和一个“react-src”目录。这个目录很重要，因为它将包含您的未编译代码。

接下来，我们需要添加styles.css 、index.php和 其他必要的文件来验证它。在终端中，输入以下命令：

cd barebones/react-src
npm run wpstart

现在，当您导航到wp-admin > Themes时，您应该会看到您的新主题。单击激活按钮，然后返回终端并运行以下命令：

npm run wpstart

这应该会自动打开一个新的浏览器选项卡。请注意，不应编辑位于根文件夹中的文件（react-src 之外的任何内容）。它们包含WordPress和React所需代码的编译版本。

要创建新主题，您可以使用以下内容：

npx create-react-wptheme my_react_theme

您可以根据需要更改“my_react_theme”。接下来，您可以输入以下命令：

cd my_react_theme/react-src
npm run start

请记住将其替换为您在上一步中使用的相同名称。这将设置要在管理区域中查看的主题。

完成主题开发后，您需要使用build命令将其移至生产环境。为此，请打开命令提示符，导航到主题的react-src文件夹，然后运行以下命令：

npm run build

这将优化位于文件夹中的文件。然后，您可以将其部署在您的服务器上。

如何将React添加到自定义页面模板

如果您想知道如何使用React创建WordPress子主题，则该过程相对相似。您可以将React添加到自定义页面模板。

让我们从一个标准的主题结构开始：

/build
/src
/-- index.js
functions.php
package.json
page-react.php
style.css

接下来，您将以下代码添加到主题的functions.php文件中：

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
  $parent_style = 'twentytwenty-style'; 
    
  wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    
  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    [ $parent_style ],
    time() //For production use wp_get_theme()->get('Version')
  );
  wp_enqueue_script(
    'my-theme-frontend',
    get_stylesheet_directory_uri() . '/build/index.js',
    ['wp-element'],
    time() //For production use wp_get_theme()->get('Version')        
  );
  
}

您还需要将代码添加到您的style.css文件中。在其中，复制并粘贴以下内容：

/*
 Theme Name:   Twenty Twenty Child
 Description:  Twenty Twenty Child Theme
 Author:       Your Name
 Author URI:   https://yourwebsite.com
 Template:     twentytwenty
 Version:      0.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentychild
*/

接下来，您可以使用此示例创建一个基本的自定义页面模板page-react.php：

<? php
/**
 * Template Name: React Template
 */
get_header();
?>
<main id="site-content" role="main">
  <article class="post-2 page type-page status-publish hentry">
    <?php get_template_part( 'template-parts/entry-header' ); ?>
    <div class="post-inner thin">
      <div class="entry-content">        
        <div id="react-app"></div><!-- #react-app -->
      </div><!-- .entry-content -->
    </div><!-- .post-inner -->
  </article><!-- .post -->
</main><!-- #site-content -->
<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>
<?php get_footer(); ?>

您现在可以在WordPress中创建一个新页面，然后选择React Template作为页面模板。

如何在你的应用中使用React

如果您想在现有应用程序中使用React，您可以将其内容交付网络 (CDN)直接添加到您的HTML文件中。要开始，请导航到要添加React的HTML页面以开始。

插入一个空格<div>标签。这将创建一个容器，您可以在其中渲染组件。对于此示例，假设我们正在尝试创建一个按钮。

接下来在页面的闭合标签</body>前插入三个<script>。前两个将用于加载 React，第三个将用于加载您的组件代码。

现在，在与您的HTML页面相同的文件夹中，创建一个新文件并将其命名为button.js（或任何与您要添加的元素相关的名称）。在该文件中，复制并粘贴以下代码：

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You pressed this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Press Me'
    );
  }
}

这将构建一个按钮组件，一旦单击它就会显示一条消息。要在 HTML 页面中使用按钮，您可以将以下代码片段添加到button.js文件的底部：

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

这回调到您添加到HTML页面的容器<div>。然后它渲染React按钮组件。

你也可以使用React从头开始​​创建一个空白的React应用程序。最好的方法是使用我们之前讨论过的Create React App解决方案。它对单页应用程序很有帮助。

首先，您可以在终端中运行以下命令：

npx create-react-app my-app

请注意，您可以将“my-app”更改为您想要命名的任何名称。要运行它，您可以通过运行cd my-app命令，然后执行npm start.

然后应用程序将在开发模式下运行。您可以在浏览器中的http://localhost:3000查看它。

小结

即使您是初学者，开发WordPress React项目也可以是一个简单、直接的过程。但是，重要的是要了解JavaScript框架如何与CMS及其REST API一起工作才能成功。

幸运的是，只要对JavaScript、HTML和CSS有基本的了解，您就可以立即学习React。正如我们在这篇文章中所讨论的，您可以使用它来创建单页应用程序和主题以及自定义页面模板。

我们希望本指南能帮助您更好地了解React及其在Web开发方面的功能。

React React应用 React项目
评论收藏微海报
分享
分享到

相关的

评论留言

马上学习

文章目录

  • 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
  • 小结