在本地使用全栈 (WAMP) 开发 React

IT技术 javascript php mysql reactjs wampserver
2021-05-16 04:24:20

有没有什么方法可以在前端使用 React 和全栈服务器(例如 WAMP)设置本地开发环境?

完美的情况是:

  • 使用默认的 React Create App 设置而不弹出脚本
  • 对 PHP 文件进行 AJAX 调用,这些文件将处理对 MySQL 数据库的查询

问题:

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

编辑:将react应用程序放入/wamp/www不是一个选项 - 它对我不起作用,我不想付出更多的努力。在本地主机上运行 React 和 WAMP 似乎有效,要回答的问题是:

  • 如何将 PHP 文件导入 JSX。试图用 smth 调用它,例如:require('./foo.php')不起作用。import foo from ./foo.php也没有用。只有想法吗?
2个回答

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

能够向您使用的任何本地服务器(Apache、Nginx、Node.js)发送请求以使用 ReactJSproxy功能的关键:

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

PS 事实证明,Facebook 有一个很好的 React-native 请求工具,称为fetch- https://facebook.github.io/react-native/docs/network.html

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

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