在本地开发带有全栈 (WAMP) 的 React

Posted 2023-02-24

【中文标题】在本地开发带有全栈 (WAMP) 的 React

【英文标题】：Develop React w/ full-stack (WAMP) locally

【发布时间】：2018-06-25 00:30:14

【问题描述】：

有没有办法在前端使用 React 和全栈服务器（例如 WAMP）来设置本地开发环境？

完美的情况是：

使用默认的 React Create App 设置

不弹出脚本

对 php 文件进行 AJAX 调用，该文件将处理对 mysql 数据库的查询

问题：

是否可以在 localhost:3000 上运行 WAMP 并在 localhost:3002 上 React yarn start（它会自动设置不同的 IP），然后将 PHP 文件放在 src 文件夹中的某个位置，然后使用一个从 JSX 调用它们的 AJAX 技术（例如 jQuery 或原生 XMLHttpRequest）？ 或者唯一的方法是弹出脚本，然后构建文件并将其放入 WAMP 的 /www/project 文件夹中，然后使用自定义工具在 WAMP 的 localhost 地址更新所有这些内容？

---

编辑： 将 react 应用程序放入 /wamp/www 不是一种选择 - 它对我不起作用，我不想投入更多精力。在 localhost 上运行 React 和 WAMP 似乎有效，要回答的问题是：

如何将 PHP 文件导入 JSX。试图用 smth 来称呼它：require('./foo.php') 不起作用。 import foo from ./foo.php 也不起作用。有想法吗？

【问题讨论】：

虽然有可能，但它并不是我们使用 react 开发的真正方式......您想快速了解一下 nodejs 以及如何使用它创建一个简单的 API 服务器。它真的很简单而且更好，不仅仅是因为性能大幅提升。

我对 NodeJS 持开放态度，但是托管公司只提供 MySQL+PHP 解决方案。是否可以使用 NodeJS 和一些 SQL 数据库进行开发，然后构建一些东西以使其在生产环境中在 MySQL+PHP 上运行？

可能，但根本不值得，因为您必须重写整个服务器端代码。然后简单地用于PHP。你也想看看 reactPHP。 reactphp.org

问题是项目托管在来宾主机上，所以我无法安装任何东西——只能安装普通的 MySQL 和 PHP 脚本。我想在不购买私有虚拟服务器选项的情况下弄清楚。

在不弹出的情况下能达到的效果非常有限。不弹出你有什么顾虑？

【参考方案1】：

1) 我强烈建议您尝试这样做： 关注点分离非常重要。为您的应用程序拥有两个存储库，一个用于后端，一个用于前端，这一点非常重要。特别是如果您使用的是版本控制系统，更重要的是，如果您计划在团队中使用它。我建议您将 wamp 安装留在原处，添加一个 Vhost，例如：backend.my-project.com，然后正常运行您的 react 应用程序，并使用 cra 文件中的 env.local 来存储后端的 URL应用程序使用环境变量。

2) 你不需要弹出脚本来让你的前端和后端都在同一个地方： 在您的 wamp 文件夹中创建-react-app，或者将您的 wamp 文件夹指向您的 create-reac-app 生成的反应应用程序

【参考方案2】：

经过调查，我找到了实现目标的方法。

能够向您使用的任何本地服务器（Apache、nginx、Node.js）发送请求的关键是使用 ReactJS proxy 功能：

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development

将"proxy": "http://localhost" 添加到我的 package.json 文件后，我能够向我的 WAMP 服务器发送和接收请求，同时保留所有 React 的 Create App 本机脚本。

附：事实证明，Facebook 有一个很好的 React-native 请求工具，名为 fetch - https://facebook.github.io/react-native/docs/network.html。