WP Reactivate 教程：WordPress 中的React集成实战

WP Reactivate 教程：WordPress 中的React集成实战

wp-reactivate React boilerplate for WordPress plugins 项目地址: https://gitcode.com/gh_mirrors/wp/wp-reactivate

1. 项目介绍

WP Reactivate 是一个专为WordPress设计的React脚手架，旨在简化React在WordPress插件中的集成过程。尽管自Block Editor（Gutenberg）发布以来，WordPress的JavaScript生态系统经历了快速发展，此仓库提供了一个起点，但请注意它可能不完全代表当前的最佳实践。

主要特点：

• 支持通过短代码、小工具及后台设置页面集成React应用。
• 使用Webpack进行资产打包。
• 内置RESTful API控制器基础类，便于前后端数据交互。
• 提供fetchWP实用工具，简化对WordPress REST API的访问。

2. 项目快速启动

环境要求

• 安装Node.js 8.12.0 LTS或更高版本。
• 推荐使用Yarn作为包管理器，npm也可替代。

步骤

1. 克隆项目

   git clone https://github.com/gopangolin/wp-reactivate.git
   

2. 安装依赖
   进入项目目录并执行：

   yarn # 或者使用 npm install
   

3. 开发模式运行
   启动开发服务器并实时监听变更：

   yarn build # 监听模式下的编译
   

4. 构建生产环境部署版本
   准备生产环境文件：

   yarn prod # 生产模式编译
   

3. 应用案例与最佳实践

短代码示例

在WordPress中使用短代码插入React组件，通过wp_localize_script传递属性到前端JS。

后端配置

在你的PHP文件中添加类似以下代码来注册短代码，并局部化脚本：

public function shortcode($atts) {
    // 注册脚本和样式
    wp_enqueue_script($this->plugin_slug . '-shortcode-script');
    wp_enqueue_style($this->plugin_slug . '-shortcode-style');
    
    // 创建对象并局部化给前端
    $object_name = 'wpr_object_' . uniqid();
    $object = shortcode_atts(['title' => 'Hello World'], $atts);
    wp_localize_script($this->plugin_slug, $object_name, $object);
    
    // 输出短代码结构
    return '<div class="wp-reactivate-shortcode" data-object-id="' . $object_name . '"></div>';
}

前端React部分

在React组件中接收并使用局部化的数据：

import React from 'react';

export default class Shortcode extends React.Component {
    render() {
        return (
            <div className="wrap">
                <h1>WP Reactivate 前端展示</h1>
                <p>标题: {this.props.wpObject.title}</p>
            </div>
        );
    }
}

最佳实践提示

• 注意安全性，避免将敏感信息直接暴露在客户端脚本中。
• 利用REST API进行前后端通信，确保API的安全性配置。
• 在生产环境中始终使用压缩后的JavaScript文件。

4. 典型生态项目

虽然这个教程聚焦于WP Reactivate本身，但WordPress社区中有许多其他项目和插件也在结合React构建更现代的用户体验。例如，使用Gutenberg blocks或利用WordPress REST API与其他React应用深度集成的实例，都是这一领域内的活跃探索方向。开发者可以参考这些项目，学习如何在自己的WordPress站点或产品中实现类似的集成，推动Web开发的现代化。

---

以上就是基于https://github.com/gopangolin/wp-reactivate.git项目的快速入门和基本使用教程。记得随着WordPress平台的发展，持续关注最佳实践的更新以保持项目健壮性。

wp-reactivate React boilerplate for WordPress plugins 项目地址: https://gitcode.com/gh_mirrors/wp/wp-reactivate