ReactPress–为WordPress创建React应用程序

描述

ReactPress使您能够轻松创建、构建React应用程序并将其部署到现有的WordPress站点中。使用您的React知识为WordPress客户创建单页应用程序。

只需几秒钟就可以开始,用即时反馈和你的WordPress主题开发你的React应用程序。

将WordPress的灵活性与React的UI功能结合起来,并无缝地将create-React-app集成到WordPres项目中,以用于下一个SaaS。

ReactPress做三件事:

  • 它将您的本地开发服务器集成到WordPress主题中,您可以即时获得反馈,了解React应用程序在WordPres网站上下文中的外观。
  • 它以一种可以从WordPress站点使用的方式构建您的React应用程序。
  • 它可以在构建后轻松地将应用程序上传到实时服务器。

特征

  • 应用程序开发期间快速刷新
  • 开发期间的WordPress集成
  • 轻松部署到现场
  • 客户端路由
  • 零配置
  • TypeScript支持

链接

系统要求

要开发React应用程序,WordPress实例需要访问:

  • 访问PHP函数文件集内容。一些托管提供商停用焚化炉在哪个文件获取内容取决于。访问文件获取内容是您的开发和实时系统所必需的!
  • POSIX兼容系统,Windows支持是实验性的。(或者,Windows用户可以使用WSL2)

屏幕截图

  • 空的管理员视图。

  • 创建了新的React应用程序。

  • 本地React-dev服务器正在端口3000上运行。每次更改都会立即重新加载。

  • React应用程序部署在公共服务器上。

安装

  1. 像其他插件一样,通过插件/新增。您可以通过管理员下载插件或将其上传到插件目录。

  2. 通过WordPress中的“插件”菜单激活插件

评论

2024年9月20日
能够让我的安装与我之前开发的应用程序协同工作;然而,警告包括需要将文件夹小写,在主应用程序文件夹中有一个构建副本,以及无法直接链接页面(“无法添加页面”,但在重新加载和在主机的文件资源管理器中进行一些调整后,它会以某种方式工作)。嵌入并不完美,但功能强大:透明的输入字段不是这样,我的文本格式在打字中混乱不堪,如果接收端有任何安全性,任何重定向都会破坏站点(例如,如果重定向到github);不过,必要时肯定会推荐,正如广告所示。不确定在托管自己之外如何进行现场开发;我的主机有一个集成的文件浏览器,我可以上传和调整文件,但我离题了。
2024年3月17日
这是一个非常有用的插件,它只做一件事,但它做得很好。谢谢你的工作!
2023年4月6日 1个回复
我发现这个插件的时候,它才刚刚推出几个月——一开始要让它正常工作是有挑战的,但后来发现我对如何设置它的理解有问题——现在它是我网站不可或缺的一部分。
2023年3月8日 1个回复
完全按照预期工作,有助于将旧网站与新技术结合起来。如果未来的所有兼容性问题(wordpress<->react)都能通过该插件解决,那么它将为此付出代价。
阅读所有18条评论

贡献者和开发者

“ReactPress–Create React App for WordPress”是一款开源软件。以下人员对此插件做出了贡献。

贡献者

变更日志

3.2.2

  • 即使ReactPress应用程序位于私有页面上,也要更新React-dev环境。感谢@BlairCooper
  • 改进与非标准WordPress配置(如Bedrock)的兼容性。感谢@dylanlawrence
  • 提高安全性

3.2.1

  • 使用vite时删除额外的脚本标记–感谢@dylanlawrence
  • 使用ABSPATH作为文档根

3.2.0

  • 使用Vite支持React应用程序(其他类型的前端框架即将推出)
  • (非常)基本支持一个页面上的多个应用程序。

3.1.0

  • 确保显示所有状态的页面(私有、草稿)。
  • 在index.html更新期间出现问题时改进用户反馈。
  • 如果页面下载不起作用,不要将空内容写入index.html。
  • 尽可能晚地将css添加到ReactPress页面,以减少!重要的在应用程序的css中。
  • 将有关帖子的信息添加到反应压力变量
  • 自动更新应用程序列表,无需重新加载页面

3.0.1

  • 允许子页面为ReactPress页面,其中嵌入了React应用程序。
  • 添加对已将php.ini公司设置允许url_fopen远离的.
  • 卸载插件时不要删除选项。

2.1.3

  • 使用模板的相对文件名,以允许不同的文件夹配置。多亏了https://github.com/BlairCooper。
  • 提高系统要求

2.1.2

  • 不要在前端显示加密的用户密码。
  • 提高Windows兼容性

2.1.0

  • 添加完全空的画布模板。此模板没有从WordPress获得任何样式和脚本。如果你想嵌入一个完全独立的React应用程序,那很好。
  • 将nonce和base-rest_url添加到全局ReactPress变量。
  • 修复全局ReactPress变量的加载。
  • 提高Windows兼容性
  • 安全修复:不显示加密的用户密码

2.0.1

  • 提高Windows兼容性

2.0.0

  • 将应用程序添加到现有页面
  • 使客户端路由成为可选的,从而允许React应用程序的子页面
  • 改进文档
  • 在多个页面中使用React应用程序
  • 修改管理页面,使其更干净,并使其成为React应用程序本身
  • 添加PHP命名空间
  • 在管理区域中使用create-react-app进行dogfooding
  • 添加后状态标签,向用户发送ReactPress创建页面的信号
  • 用WordPress 6.0.2测试

1.3.2

  • 将file_get_contents替换为wp_remote_get。

  • 根据reactpress页面的slug为react-router创建自定义路由。

  • 如果应用程序的文件夹被删除,它将显示为类型:孤儿

1.3.0

  • 将apps目录移动到wp-content/reactpress/apps,以便在更新插件时不会弄乱创建的应用程序。

  • 删除管理员创建新反应应用程序的可能性。从现在起,只有命令行工作流。

1.2.1

  • 修正:模板与Elementor和其他插件不兼容。感谢Sally CJ的精彩回答https://stackoverflow.com/questions/67696139/error-in-wordpress-with-plugin-reactpress/68455647#答案-67751220

  • 修复:如果文档根目录和插件应用程序目录位于同一台机器/服务器/位置,则会出现问题

1.2.0

  • 使用ReactPress对添加过程进行改造。不再启动react应用程序,只更新索引.html来自WordPress管理员。可以使用npm或yarn手动添加应用程序。

  • 如果我们无法通过编程找到插件目录,请添加回退。

1.1.0

  • 用WordPress 5.7测试

  • 将当前用户对象插入Javascript中的全局窗口对象,以便在不调用API的情况下访问它。

  • add.env with CHOKIDAR_USEPOLLING=true以确保观察程序与VM协同工作

  • 使用npm代替纱线。

1.0.0

  • 检查是否允许外壳执行(_E)执行官

  • npm-v>=6.0.0可以从WordPress访问

  • 了解我们是否在Windows环境中

  • 将应用程序部署到生产

  • 添加TypeScript/模板支持

  • 删除应用程序

  • 生成应用程序

  • 在React应用程序中扩展index.html,使其看起来像WordPress网站

  • 创建新的React应用程序

  • 在指定页面中添加React应用程序