问题标签 [react-slingshot]

我有一个基于https://github.com/coryhouse/react-slingshot的项目

我想将流集成到 npm start 脚本中，以便在运行启动脚本时通过运行flow命令启动流服务器，然后flow在每次 *.js 文件更改时运行该命令。

这些是 package.json 中的脚本：

我有独立工作的流程。我不知道如何让文件观察程序运行流命令。

我怎样才能做到这一点？

我有一个基于https://github.com/coryhouse/react-slingshot/的样板。我已经删除了 FuelSavings 应用程序并将其替换为可以正常工作的应用程序 - 但我编写了一个组件，当我将它包含在应用程序下时，它会阻止任何内容的呈现（我得到一个白页）。

<UserHeader />将标签添加到 App.js时出现 3 个错误：

• “警告：React.createElement：类型不应为空、未定义、布尔值或数字。它应该是字符串（对于 DOM 元素）或 ReactClass（对于复合组件）。检查渲染方法App。”
• Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查App.
• 未捕获的类型错误：无法读取未定义的属性“道具”

如果我删除UserHeader标签，页面的其余部分加载就好了。

src/components/App.js

src/components/UserHeader.js

欢迎任何想法。服务器本身根本没有显示任何问题，只是关于缺少道具验证的警告。问题是阻止UserHeader执行任何代码。我只是没有足够的经验知道如何！

我为我的 react/redux 应用程序使用了 react slingshot starter 项目。当我使用类似的路由时，热重载效果很好，/foo但我发现热重载不适用于像/foo/bar. 我没有对开箱即用的 webpack 配置文件进行任何更改，可以在这里找到https://github.com/coryhouse/react-slingshot/blob/master/webpack.config.js

404 GET http://localhost:3004/orders/c344e97ed1fbc2923017.hot-update.json 404 (Not Found)当我有以下路由配置时，我会使用 CreateOrder 组件：

但是当我将路径从 orders/create 更改为 just create 时，它​​不会返回 404。

似乎热更新中间件正试图从 /orders 子路由中获取 hot-update.json？

所有教程都讨论从客户端使用弹弓上传，是否可以从服务器端上传。

我有一个使用 Webpack 构建的 React 和 Redux 项目，并且正在尝试第一次构建生产环境。我为我的项目构建了这个项目框架。在我的index.ejs文件（webpack 用于构建的模板）中，我有这一行：

<link rel="stylesheet" type="text/css" href="/vendor/ui-toolkit/css/nm/main.min.css" media="all">

运行npm run build并运行结果index.html输出后，我在控制台中收到此错误：

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/vendor/ui-toolkit/css/nm/main.min.css

如何将此样式表（以及同一文件夹中的字体）包含到构建中？这是代码：

在package.json中，您可以看到有一个npm run build脚本，这是我运行来生成我的生产dist文件夹的。

包.json：

"build":npm 脚本运行，babel-node tools/build.js如下所示：

构建.js：

接下来，您可以看到 webpack 的config is being imported from../webpack.config.prod` - 这是该文件：

webpack.config.prod.js：

任何想法为什么它找不到我的样式表？如何将它包含到 webpack 构建中并链接到它？

我的目的是做一些非常基本的事情。我只希望我的名字在渲染时出现在 HelloPage 容器中，然后通过单击将我的名字变成“Bob”。我想我错过了一些愚蠢的东西。

HelloPage.js（容器，我的名字应该出现在其中，但完全未定义）

我猜罪魁祸首在我设置初始状态的减速器中。初始状态是否设置得不够早？这部分代码看起来对吗？

这是我设置 initialState 文件的方式：

而且，我组合减速器的方式：

该应用程序的其他容器/组件运行良好，但只是这个新容器不是。我正在使用反应弹弓样板。只是增加了一条额外的路线。我复制了样板文件中的结构。

我有一个在端口 8050 上运行的 Django 开发服务器，带有几个我想为我的 React 应用程序提供的 REST API，该应用程序由react-slingshot组成并在 localhost:3002 上运行。

我想要的是我的 Javascript 代码，例如fetch('api/v1/employees')，实际调用 localhost:8050 而不是 localhost:3002。

我在 github 讨论中看到raythree能够找到我的问题的解决方案，但是，我无法让他的解决方案起作用。我完全按照他的建议执行了他的建议，但代码表现得好像我根本没有做任何更改。

这是我在 tools/srcServer.js 中的代码现在的样子：

我对 webpack 和 react 很陌生，我正在尝试在 react-slingshot 上添加 bootstrap 4-beta。

我正在寻找正确的方法来做到这一点。我看到了 bootstrap-loader 但我很难将它包含在 webpack 中（没有错误，但没有添加样式）

我正在查看 react slingshot 入门套件，我不明白为什么该项目同时使用 npm 和 yarn。

回购的网址是：https ://github.com/coryhouse/react-slingshot

有人可以给我一个解释吗？

我听说如果你有 yarn.lock（就像项目一样）你应该使用 yarn。然而，所有的命令行命令都是基于 npm 的。为什么？

我在 Chrome 开发者工具响应模式中看到了一种奇怪的缩放行为。无论实际窗口宽度如何，window.innerWidth 都报告 980（除非实际宽度超过 980，否则它会正确报告）。

下面是三个屏幕截图，窗口大小设置为 600、500 和 400 像素宽。您可以看到，在每种情况下，宽度都报告为 980，即使窗口只有 400 像素宽，200 像素宽的 div 也被缩放以占据窗口的大约四分之一，并且文本缩小到几乎不可读：

600px 宽的窗口

500px 宽的窗口

400px 宽的窗口

.

这是我的 index.js 文件：

从“反应”导入反应；从'react-dom'导入{渲染}；

.

当我在 Windows 10 中调整 Chrome 浏览器的大小时，这可以按预期工作。只有当我启用 Chrome 开发人员工具并在响应模式下调整窗口大小时，我才会得到奇怪的结果。我在几个移动设备上对此进行了测试，我也看到了相同的缩放行为。

我验证了 updateWindowDimensions 事件在窗口调整大小时正确触发，但 window.innerWidth 总是报告 980。

我对 Web 开发相当陌生，但我还没有看到用 Angular 或直接 JavaScript 开发的类似页面的这种行为。这是特定于 React 或 react-slingshot 工具堆栈的东西吗？我很确定我的示例应用程序已经剥离了 react-slingshot 样板可能一直在做的任何事情。

关于是什么原因造成的任何想法？