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

2024-03-18

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

完美的情况是:

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

问题:

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

EDIT:将反应应用程序放入/wamp/www不是一个选择 - 它对我不起作用,我不想投入更多的努力。在本地主机上运行 React 和 WAMP 似乎可以工作,要回答的问题是:

  • 如何将 PHP 文件导入 JSX。尝试用类似的方式调用它:require('./foo.php')不起作用。import foo from ./foo.php也没用。安利的想法?

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

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

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在本地开发带有全栈 (WAMP) 的 React 的相关文章

  • 查找第一个可滚动父级

    我遇到这种情况 需要将元素滚动到视口中 问题是我不知道哪个元素是可滚动的 例如 在纵向中 主体是可滚动的 而在横向中 它是另一个元素 还有更多情况会更改可滚动元素 现在的问题是 给定一个需要滚动到视口中的元素 找到其第一个可滚动父元素的最佳
  • 指令可以从父作用域中删除自身吗

    假设我有以下代码 div div div div 我的自定义指令有一个独立的范围 定义为 app directive customDirective function log return restrict E templateUrl te
  • 在 Graal.js 中使用 java 类

    使用 Graal js 如何将 java 类导入到 JS 脚本中 以下代码适用于 Nashorn JJS 但不适用于 Graal js 因为没有Java type 在graal中 我需要在某个时候调用truffle吗 var ArrayLi
  • 根据每个选项的值或 ID 过滤选择框

    我想使用jquery来过滤表单中的所有选择框 例如 在第一个选择框中 如果我选择 仅显示1 我想过滤所有选择元素中的所有选择选项 以隐藏值不包含 1 的任何选项 仅应显示带有 1 的产品值 如果选择 Filter 选项 则所有选择框的默认值
  • MySQL 8 用逗号分割字符串并将其转换为JSON ARRAY

    我有以下字符串 a b c d 我想将它转换成一个 json 数组 像这样 a b c d MySQL 8 有什么函数可以实现这个功能吗 Try SELECT CAST CONCAT REPLACE a b c d AS JSON See
  • 如何更新 Laravel 编辑视图中的图像?

    在 Laravel 中 我的编辑视图中有一个名为 个人资料图片 的字段 每当我单击 编辑 按钮时 我都会在编辑视图中从数据库中获取所有值 但没有获得图像 并且如果每当我每次单击 提交 按钮时 我都必须如果没有上传图像 我无法进一步处理我想要
  • 将焦点和光标设置到文本输入字段/字符串 w 的末尾。 Jquery [重复]

    这个问题在这里已经有答案了 我有以下函数 将选择器添加到搜索输入作为高级选项 就像堆栈溢出高级搜索一样 当您单击要搜索的内容时 它会添加一个前缀 请参阅下面的 Jquery
  • 如何在 blob 类型中使用 UTF-8?

    我必须通过 csv 文件导出表 csv 文件数据来自服务器 按 Blob 类型 Blob size 2067 type text csv async exportDocumentsByCsv this commonStore setLoad
  • 合并两个 MYSQL SELECT 查询[重复]

    这个问题在这里已经有答案了 可能的重复 如何将两个 Post Category 表 MYSQL SELECT 查询合并为一个 https stackoverflow com questions 12972130 how to combine
  • 为什么我会失去对元素的引用?

    我偶然发现了一些奇怪的东西 至少对我来说 案例如下 我选择一个元素 child1 从 DOM 并将其保存到变量中 我继续添加一个新元素child1的家长 parent1 现在 如果我尝试修改某些值child1它不记录更改 似乎引用已经消失
  • 如何使用 jQuery 或 php 从 Instagram 令牌获取访问令牌

    我是 Instagram API 的新手 发现一些与了解如何获取访问令牌相关的问题 我所做的是在 Instagram 上注册 创建了一个应用程序 并使用了客户端 id 和重定向 url 当我将以下内容发布到浏览器中时 它会给我一个 code
  • MySQL“LIKE”搜索不起作用

    我通过 LOAD DATA INFILE 在 MySQL 中导入了一个 txt 数据库 一切似乎都正常 唯一的问题是 如果我使用以下查询在数据库上搜索记录 SELECT FROM hobby WHERE name LIKE Beading
  • PHP - 获取类公共变量?

    请考虑下面的代码 class A public function construct class B extends A public a a public b b public c c 如何从父类中获取 B 类的公共变量而不确切知道它们是
  • 如何使用 HTML5 在画布上绘制心电图监视器?

    我尝试使用canvas html5绘制心电图系统 几乎我即将完成我的波浪正在移动 但不是连续地重复 但我想绘制波浪是从左到右连续移动的 下面的链接是示例 Ex https www youtube com watch v wuwBfSpVEg
  • Magnific Popup:来自span的源标题

    我想从锚标记内的隐藏标题字段中获取放大图像的标题 而不是从标题中获取 这是因为我的标题包含标记 HTML a href img zoom jpg img src img small jpg alt span class hide This
  • ajaxStart 和 ajaxStop 与 fetch API 等效

    我正在尝试将 API 调用从使用 jQuery ajax 迁移到使用 Fetch API 我使用 jQuery ajaxStart 和 ajaxStop 在服务器调用期间显示加载旋转器 我正在运行多个并行服务器请求 我希望旋转器在第一个请求
  • 仅在页面加载时执行 Javascript,而不是回发 (SharePoint)

    我正在尝试在 SharePoint 网站上的自定义页面上加载页面时执行一些 JavaScript 它使用当前用户填充人员选择器 问题是代码也在回发时执行 这是我不希望的 因为它会重置人员选择器的任何更改 我尝试过使用if IsPostBac
  • 危险的 PHP 函数

    我将用户输入的 php 函数存储到 mySQL 数据库中 这些函数需要能够被执行 正如我们所知 这可以并且将会允许黑客先生将一个漂亮的网站变成瑞士奶酪 这些函数很简单 不需要任何高级的 php 编码 它们更多地涉及处理单个数据数组 因此 如
  • 解析函数是否异步传递给 Promise 执行器?

    我有以下代码 function myPromiseFunc return new Promise resolve gt resolve Promise resolve 123 据我们所知Promise resolve方法立即用普通值解析 P
  • 网站可以检测您何时将 Selenium 与 chromedriver 结合使用吗?

    我一直在使用 Chromedriver 测试 Selenium 我注意到有些页面可以检测到您正在使用 Selenium 即使根本没有自动化 即使我只是通过 Selenium 使用 Chrome 手动浏览 Xephyr https en wi

随机推荐