在本地使用全栈 (WAMP) 开发 React [英] Develop React w/ full-stack (WAMP) locally

问题描述

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

Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?

最理想的情况是:

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

问题:

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

• Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
• Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?

将 React 应用程序放入 /wamp/www 不是一种选择 - 它对我不起作用，我不想投入更多精力.在本地主机上运行 React 和 WAMP 似乎可行，要回答的问题是:

putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:

• 如何将 PHP 文件导入 JSX.试图用以下方式调用它: require('./foo.php') 不起作用.import foo from ./foo.php 也没有用.只有想法吗?

• How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?

推荐答案

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

After investigation I have found a way to achieve my goal.

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

The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:

• 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 原生脚本.

After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.

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

P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.

这篇关于在本地使用全栈 (WAMP) 开发 React的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！