问题标签 [react-create-app]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 使用 npm 反应部署到 AWS S3 生产 - index.html 文件作为最后
我有一个 React 应用程序(使用 React Create App),我想使用脚本上传到生产环境。我的产品是一个 AWS S3 存储桶。我在 package.json 中添加了一个“部署”脚本,如下所示:
这会将所有构建文件上传到生产存储桶。由于构建静态文件(css、js 等)有自己的哈希码,它们不会被每个版本覆盖,这很好。
我遇到的问题是我不希望在其他文件完成上传之前上传 index.html 文件。这样,一旦 index.html 被最新版本覆盖,新的静态文件就会自动使用。
知道如何实现这一目标吗?如果有更好的脚本可以将 React 应用程序上传到 S3,那就太好了。
twitter-bootstrap - 使用 Bootstrap 找不到 React 模块
我正在开发一个从 react-create-app 开始的应用程序。我已经包含了 react-bootstrap 并且一切正常。然后昨晚我尝试安装react-d3-component。
我按照 npm 的说明进行操作:
npm install react-d3-components
npm install & npm run build:js
在我下次尝试npm
启动时运行它后,我的 Bootstrap 出现以下错误:
从那以后,我尝试卸载 react-d3-components 并卸载并重新安装 react-bootstrap 无济于事。我想问题npm run build:js
出在 Bootstrap 扩展上,但我不确定。
知道如何解决这个问题吗?
reactjs - 使用 react-create-app 设置 D3
我正在使用 react-create-app 作为起点来开发一个 React 项目。我正在尝试将 D3 集成到我的项目中,但我很难让 D3 工作。
这是我目前的项目。我在 d3-2.js 中创建了一个 React 组件并将其导入到 App.js,但它不起作用。看来 D3 回来未定义。
这里的其他帖子提到import * as d3 from 'd3'。我已经尝试过了,但它仍然无法正常工作。
是否需要在 webpack 的文件中进行设置?我已经通过npm install d3 --save 安装了 d3 ,它在我的 package.json 文件中。
知道如何让它工作吗?
javascript - 使用 create-react-app 时 .babelrc 文件的位置是什么?
我曾经create-react-app
构建一个项目,并且 Babel 与安装一起打包。通常.babelrc
文件位于项目的根目录中,但我在那里没有看到。我需要修改文件中的预设之一,但似乎找不到它。
我需要手动创建.babelrc
文件还是已经包含在内?如果是这样,文件的位置是什么?
javascript - Hydrate my React app with HTML from the API instead of static HTML from index.html
I am building a React application using the create-react-app. My application will rely on an API for initial HTML using which I will hydrate my app and add React components to it dynamically during load and serve to the browser.
I planned to call the API in componentDidMount()
of the initial app component and replace the static HTML with the dynamic one from the API using ReactDOM.render(element, document)
I can replace the whole DOM (including <html></html>
).
Is there any other approach which doesn't have a dirty path like this, or is there any other best practices for doing something like this?
node.js - 在不同的端口上运行前端和后端
嗨,我在不同的端口上但在同一主机上运行我的前端(create-react-app)和后端服务器(express.js)。例如:前端打开127.0.0.1:3000
,后端打开127.0.0.1:3003
。
在我的 package.json 中:
一切正常,直到我没有将我的应用程序迁移到远程服务器。
当我尝试将 http 请求 (axios) 发送到服务器时(可能是由于代理设置错误),我的应用程序开始意外刷新。
所以我有前端应用程序正在运行35.125.320:10:3000
,服务器正在运行35.125.320:10:3003
。我的 http 请求被意外取消了。(我检查了网络)。所以我将代理设置更改为
但无论如何,当我尝试制作 http req 时,我的应用程序仍然令人耳目一新。在服务器上。我认为问题是我无法访问我的快速后端服务器。所以代理转发我的请求很糟糕。
更新
场景:(我正在做两个发布请求)
1)第一个请求仍然通过(应用没有刷新)
2)通过了相同的请求(但有时会刷新应用程序)
3)第二个仍然被浏览器取消。
问题
当我的前端在不同端口上但在同一服务器和域上运行时,我的前端如何通过代理与后端服务器通信?
感谢你的回答。
html - 公共文件夹中的 react-create-app 静态 html 页面
我正在使用 react-create-app 来创建单页应用程序。现在我必须创建一个带有静态文本的合法页面,我不想成为主应用程序的一部分。
因此,我在公共文件夹中添加了一个 html 页面,然后将其复制到构建目录中。不幸的是,我无法在生产中链接到该页面,因为它总是加载主反应应用程序,即使使用静态 html 页面的正确 URL。
我相信这与服务人员有关。有人知道如何解决这个问题吗?
谢谢 :)
css - 如何从反应应用程序中自动添加导入
我有一个使用react-create-app
工具创建的应用程序,并且我使用了一个自动编译的style.less
文件。src/assets/less
在我style.less
的应用程序中,我导入了我在各种反应组件中的样式。我喜欢让每个组件都有自己的 style.less 的想法。
第一个问题是我必须在 中添加或更新的引用src/assets/less/style.less
,每次我添加一个组件或重命名它或移动它时。有什么办法可以自动获取所有导入?
node.js - 在 aws elasticbeanstalk 为 react-create-app 配置生产环境
我已经在 aws elastic-beanstalk 部署了 react-create-app,它正在开发环境中运行。
如何配置生产环境?
javascript - Typescript 将 es6 .js 依赖项转换为 es5
我的项目中有一个假设的 Typescript 文件(简化示例)。
实用程序.ts:
导入helper-from-node-modules
包含一个 Javascript 文件。
helper-from-node-modules.js:
从@types/helper-from-node-modules
index.d.ts:
其中tsconfig.json
包括以下内容:
所以我的问题是 Typescript 编译器的输出文件是我编译的源代码加上所有体面的巨大串联。由于helper-from-node-modules
始终是一个.js文件,因此编译器似乎只是将其内容附加到输出文件中。因此,尽管"target": "es5"
输出文件仍然包含es6工件,例如const
和(e) => {...}
,导致后面的东西出现错误,这些东西严格要求 es5 javascript。
有没有办法告诉 Typescript 编译器/转译器也在javascript 依赖项上输出es5 ?
上下文如果你关心:
我犯了一个可怕的错误,使用react-create-app-typescript
andreact-scripts-ts
作为我的 React 应用程序的样板。内置的 webpack 堆栈对于源代码应该来自哪里以及编译后的源代码必须是es5非常固执己见。如果尝试缩小任何es6工件,打包的 minifier/uglifier 将崩溃。我知道我可以运行和修改各种配置脚本,但我试图避免这种混乱。我很想将源代码编译为es6而不会弄乱他们的 webpack 堆栈。npm run-script eject