标签: create-react-app

我正在尝试通过运行来运行 React 服务器 npm start

当我这样做时，我得到一个丢失的脚本错误：

? npm start
npm ERR! missing script: start

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Aristophanes\AppData\Roaming\npm-cache\_logs\2019-05-15T11_34_47_404Z-debug.log

完整的错误日志：

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'start' ]
2 info using npm@6.4.1
3 info using node@v11.1.0
4 verbose stack Error: missing script: start
4 verbose stack     at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:155:19)
4 verbose stack …

我想知道是否可以使用react-script重命名src为app文件夹等其他内容

TLDR:如何从我的React应用程序中的页面启动Facebook Auth进程？

我发现很多帖子都涉及我在这篇文章标题中列出的大多数但不是全部的项目.而且我非常接近于让这个工作,但必须有一些我缺少的东西.

我的应用程序包含一个使用react-router进行路由的create-react-app前端.我在开发环境中运行端口51000.在package.json中,我使用"proxy"将其他路由重定向到我的快速服务器,在端口51001上运行.这通常用于在我的React组件中发出命中服务器的请求.例如:

axios.get('/api/some-stuff')

在我的React组件中调用时,这将成功命中我的Express服务器.

我想确保我的后端路由经过身份验证,并且我选择通过passport-facebook使用Facebook身份验证.我设置它就像我见过的许多在线教程一样.例如,我在我的快速服务器上有一个名为'/ auth/facebook'的路由.如果我去localhost:51001/auth/facebook,它会将我重定向到facebook登录,然后将我重定向回我给它的路线.所以流程按预期工作.

我遇到的具体问题是让React成功启动并完成触发auth的api调用.我试过两种方法.

方法1:通过ajax调用路由

我在componentDidMount中调用了以下内容:

axios.get('/auth/facebook')

这成功点击我的快速服务器,但随后立即在浏览器控制台中生成以下错误:

XMLHttpRequest无法加载 https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id = XYZ.从' https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http% ... 2Flocalhost%3A51000%2Fauth%2Ffacebook%2Fcallback&client_id = XYZ' 重定向到' https://www.facebook.com/login. php？skip_api_login = 1&api_key = XYZ ... _&display = page&locale = en_US&logger_id = 7f30b5a1-2ad1-dc31-f08b-70d3cfdd55fa'已被CORS策略阻止:请求的资源上没有"Access-Control-Allow-Origin"标头.因此不允许来源' http:// localhost:51000 '访问.

**方法2:在浏览器中转到路线**

我尝试过的另一件事,就是我在所有教程中看到的,是添加一个链接到我的一个页面,它只是导航到身份验证路径.例如:

<a href="/auth/facebook">Login with Facebook</a>

但是,当我点击这个时,我最终只能访问http:// localhost:51000/auth/facebook,或者只是我的React应用程序中的空白页面.我没有启动代理,当我在浏览器中访问此路由时,我在Express服务器上看不到任何活动,即使它不是我在react-router中定义的路由.

所以我有点卡在这里.单击该标记是否已触发针对我的Express服务器触发的路由？有没有办法让react-router忽略某些路由,以便将它们重定向到我的快速服务器？这似乎在进行AJAX调用时工作正常,但如果我转到localhost:51000/not/a/route,这不会导致请求被重定向到Express.它只加载没有内容的反应页面.

任何帮助表示赞赏.

谢谢,

-担

编辑

所以我现在有点工作,虽然我完全不相信这是"正确"的做事方式.

在我的反应应用程序(召回在端口51000上运行),我有以下链接:

<a href="http://localhost:51001/auth/facebook">Facebook Login</a>

请注意,这直接指向我的API服务器,而不是指向反应路由.导航到此链接会点击快速服务器,并立即重定向到Facebook.登录重定向回我的Express facebook回调,它本身重定向到http:// localhost:51000/somePage,现在回到我的反应应用程序.

理想情况下,该标记将转到/ api/auth/facebook,而不是硬编码转到不同的URL /端口.如果/当我弄清楚如何让react-router通过它而不是像处理它需要加载的页面那样处理时,我会更新这个问题.

编辑2

我对另一个告诉我的人开放,但我认为我目前的做法实际上非常好.我考虑了生产过程中的表现.我将在www.example.com上找到我的反应网站,我的快速服务器可通过api.example.com访问.我登录Facebook的链接将是"api.example.com/auth/facebook".假设成功验证,回调将重定向到"www.example.com/some/route".我认为跳转到"api"URL来执行登录是合理的.最终,试图让react-router忽略某些路由是没有意义的,因为我所有的api调用都将是一条明确的路由.

我意识到我没有为他人提供完整有用的解决方案.一旦我将它们放在一起,我将包含一个包含此登录流程的回购链接,以防其他人发现它有用.

**编辑3**

这是我的项目的链接.让整个项目运行并不是一件轻而易举的事,但只有少数与auth流相关的文件.

您可以在此处查看回购:https://github.com/dan-goyette/Portfolio

Express服务器路由器的位置如下: …

在我的公司,我们正在将Web应用程序的前端迁移到ReactJS.我们正在使用create-react-app(更新到v16),没有Redux.现在我停留在一个页面上,可以通过以下图像简化结构:

在componentDidMount()MainContainer 的方法中使用相同的后端请求检索由三个组件(SearchableList,SelectableList和Map)显示的数据.然后,此请求的结果将存储在MainContainer的状态中,并且具有或多或少的结构:

state.allData = {
  left: {
    data: [ ... ]
  },
  right: {
    data: [ ... ],
    pins: [ ... ]
  }
}

LeftContainer state.allData.left从MainContainer 接收作为prop ,并props.left.data再次传递给SearchableList作为prop.

RightContainer state.allData.right从MainContainer 接收作为prop ,并传递props.right.data给SelectableList和props.right.pinsMap.

SelectableList显示一个复选框以允许对其项目执行操作.每当在SelectableList组件的项目上发生动作时,它可能对Map引脚有副作用.

我决定在RightContainer状态下存储一个列表,该列表保留SelectableList显示的所有项目ID; 此列表作为道具传递给SelectableList和Map.然后我向SelectableList传递一个回调函数,无论何时进行选择都会更新RightContainer中的id列表; 新的道具到达SelectableList和Map,因此render()在两个组件中都会调用.

它工作正常,有助于保持RightContainer中SelectableList和Map可能发生的一切,但我问这是否适用于提升状态和单一来源的概念.

作为可行的替代方案,我想到为MainContainer中的_selected每个项添加一个属性state.right.data,并将select回调三个级别传递给SelectableList,处理MainContainer中的所有可能操作.但是一旦选择事件发生,这将最终强制加载LeftContainer和RightContainer,引入了实现逻辑的需要,shouldComponentUpdate()以避免无用,render()特别是在LeftContainer中.

从架构和性能的角度来看,哪个/可能是优化此页面的最佳解决方案？

下面是我的组件摘录,以帮助您了解情况.

MainContainer.js

class MainContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      allData: {}
    }; …

我正在使用create-react-app并在其默认端口localhost:3000中托管,并希望从同一网络上的其他设备访问它.

我得到了我的主机的IP(使用ifconfig)192.168.0.5的IP,并尝试打开192.168.0.5:3000,但这不起作用.

有没有办法实现这个目标？

有没有办法在react-web应用程序中添加长按事件？

我有地址列表.长按任何地址,我想触发事件删除该地址,然后是确认框.

它会发生,例如每3次或4次刷新一次,服务器只是在控制台中与此消息相关联:

The development server has disconnected.
Refresh the page if necessary.

我查看了其他一个SO线程,我的问题似乎有所不同,因为这是关于webpack观察者没有连接开始,在我的情况下它工作但经常断开连接.我甚至没有弹出应用程序所以不确定为什么会这样.其他人有这个问题,并找到了解决方案？

我正在关注这篇精彩的文章来学习反应。然而，缺少一些重要的部分。

当我在浏览器中打开应用程序时，出现错误

./src/components/Navbar.js 找不到模块：无法解析“@heroicons/react/solid”

显然，我缺少一个模块。我尝试安装它，但到目前为止没有任何帮助。

我试过：

npm install heroicons-react

npm install @react-icons/all-files --save

npm install @iconify/icons-heroicons-solid

npm install @heroicons/vue

文件夹结构如下所示：

project
|
|-package.json
|-node_modules
|-homepage
  |-node_modules
  |-package_json
  |-src
  |-public
  |-README.md

我尝试执行项目目录和主页目录中的命令。不确定我应该使用哪一个。

Navbar.js 中的相关代码如下所示：

import { ArrowRightIcon } from "@heroicons/react/solid";

我正在使用create-react-app关注React 的教程.该应用程序由create-react-app v1.3.0 创建

create-react-app my-app

开发服务器由运行

npm start

多次更改代码后,浏览器不会更新实时/热重新加载更改.刷新浏览器没有帮助.仅停止开发服务器并重新启动它才会捕获对代码的新更改.

我找不到关于"npm run build"工作的任何解释,

它简单易用,我得到的"build"文件夹效果很好,

但是,在create-react-app中,场景背后会发生什么？

它是一个完全不同的构建工具使用？

如果没有,它是否使用其他构建工具？