运行没有服务器的React应用程序

Question

在提出我的问题之前,我想告诉你,我是一个非常新的反应,直到现在我已经学会了非常基本的反应概念,如组件,状态,道具,路由器等.可能这个问题很有趣但我需要解决方案.如果我错了,请纠正我.

所以我的问题是,我们可以运行基于反应的应用程序,而无需在服 基本上,我想要,我可以直接在Web浏览器上使用index.html文件路径,我的应用程序开始工作.

我的理解是React js是一个javascript库,所有代码最终都使用babel加载器转换为普通的javascript文件(如果我们使用的是ES6).所以我认为应该可以做到这一点.

我发现我可以使用webpack,它在内部首先将我的基于React或其他js文件转换为普通的javascript,并制作一个可以在Index.html文件中使用的单个bundle文件以供进一步使用.我试过这个,但只有一些功能正常工作状态,道具但许多其他功能不像反应路由器,但当我使用npm服务器所有功能开始工作正常.

现在为什么我要这样做是因为我想使用react js来创建三星Tizen电视网络应用程序,我不认为我可以使用npm服务器和所有.

如果有人有任何解决方案,那将是非常有帮助的.谢谢

Answer 1

以下更改对我有用：

1. 在 中添加"homepage": "."键值对package.json。
2. 替换BrowserRouter为HashRouter，均从 导入react-router。

（阅读 和 之间的BrowserRouter区别HashRouter 这里）

进行这些更改后，执行以下操作以在没有任何服务器的情况下运行应用程序：

1. 运行yarn run build或npm run build创建应用程序的生产版本。
2. 在浏览器中打开build/index.html。

Answer 2

在构建之前我在package.json中添加了以下内容:

"homepage": "./",

引用建立时反应终端输出:

该项目是在假定它托管在服务器根目录的情况下构建的.要覆盖它,请在package.json中指定主页.例如,添加它以为GitHub页面构建它:

"主页":" http://myname.github.io/myapp ",

注意:我很确定这在每个项目中都不起作用.

Answer 3

这几个概念基本上都是你需要的(加上生命周期方法).这就是为什么React摇滚,即使你拥有庞大而复杂的应用程序,它也很容易思考和推理.

React可以在没有服务器的情况下工作,只需添加脚本标签并确保使用当前浏览器理解的JavaScript 或下载React源并在任何说JS和DOM的地方使用它.

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

例如,Firefox使用React作为他们的新devtools,这里的提示为您节省了大量时间:使用React非常容易使用内联样式,我想不出更好的设计电子邮件模板的工具.

Answer 4

我现在遇到了同样的问题，使用默认react/react-router应用程序。在使用BrowserRouter时也react-router对我不起作用。但我发现建议更改为HashRouter 的问题。它解决了我的问题。为了在模拟器上启动应用程序（实际上，我正在为 webOS 编写），我将标签更改为我的构建位置。BrowserRoutersrcscriptindex.html