[英]Run React application without server
在问我的问题之前，我想告诉你，我对反应很陌生，直到现在我已经学会了反应的非常基本的概念，如组件、状态、道具、路由器等，可能这个问题很有趣，但我需要解决方案。 如果我在某处错了，请纠正我。
所以我的问题是，我们可以运行基于 React 的应用程序而不在服务器上运行应用程序吗？。 基本上，我想要那个，我可以直接在网络浏览器上使用 index.html 文件路径，我的应用程序开始工作。
我的理解是 React js 是一个 javascript 库，所有代码最终都使用 babel loader 转换为普通的 javascript 文件（如果我们使用的是 ES6）。 所以我认为应该可以做到这一点。
我发现我可以使用webpack ，它首先在内部将基于 React 的或其他 js 文件转换为普通的 javascript 并制作一个可在 Index.html 文件中使用的单个包文件以供进一步使用。 我试过这个，但只有一些功能像 state、prop 一样工作正常，但许多其他功能不像 react-router 那样工作，但是当我使用 npm server 时，所有功能都开始正常工作。
现在我为什么要这样做是因为我想使用 react js 来创建三星 Tizen TV Web 应用程序，我认为我不能使用 npm 服务器等等。
如果有人对此有任何解决方案，那将非常有帮助。 谢谢
在构建之前，我在 package.json 中添加了以下内容：
"homepage": "./",
构建时对终端输出的反应：
该项目是假设它托管在服务器根目录下构建的。 要覆盖它，请在 package.json 中指定主页。 例如，添加以下内容为 GitHub Pages 构建它：
“主页”：“ http://myname.github.io/myapp ”，
注意：我很确定这不会在每个项目中都有效。
这几个概念基本上就是你所需要的（加上生命周期方法）。 这就是 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 用于他们的新开发工具，这里的提示可以为您节省大量时间：在 React 中使用内联样式非常容易，我想不出更好的工具来设计您的电子邮件模板。
以下更改对我有用：
"homepage": "." package.json键值。BrowserRouter与HashRouter ，无论从进口react-router 。 （在此处阅读BrowserRouter和HashRouter之间的BrowserRouter ）
进行这些更改后，请执行以下操作以在没有任何服务器的情况下运行应用程序：
yarn run build或npm run build以创建应用程序的生产版本。build/index.html 。我现在遇到了同样的问题，使用默认的react / react-router应用程序。 在使用BrowserRouter 时， react-router也对我不起作用。 但我发现的问题，其中建议改变BrowserRouter到HashRouter 。 它解决了我的问题。 为了在模拟器上启动应用程序（实际上，我正在为 webOS 编写），我将index.html中script标记中的src更改为我的构建位置。
“主页”：“。” 使用它可以在没有 Web 服务器的情况下工作。 它对我的工作非常好。
// 这是我如何在 Tizen 中的 Tizen Studio index.html 上运行 React 应用程序的代码 .. 像我一样运行 react 应用程序并添加一个 ip 地址 :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
/>
<link rel="stylesheet" href="css/style.css" />
<script src="main.js"></script>
</head>
<body>
<script>
window.open("http://1.1.1.1:4000")
</script>
</body>
</html>
配置xml
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/HelloWorld" version="1.0.0" viewmodes="fullscreen">
<tizen:application id="7bo2fXhVaD.HelloWorld" package="7bo2fXhVaD" required_version="2.3"/>
<access origin="*" subdomains="true"></access>
<content src="index.html"/>
<feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
<icon src="icon.png"/>
<name>AnalyticsTesting</name>
<tizen:profile name="tv-samsung"/>
<tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
<tizen:privilege name="http://tizen.org/privilege/application.launch"/>
<tizen:privilege name="http://tizen.org/privilege/tv.inputdevice"/>
<tizen:privilege name="http://tizen.org/privilege/tv.display"/>
<tizen:privilege name="http://tizen.org/privilege/fullscreen"/>
<tizen:privilege name="http://tizen.org/privilege/internet"/>
<tizen:privilege name="http://tizen.org/privilege/volume.set"/>
<tizen:privilege name="http://developer.samsung.com/privilege/productinfo"/>
<tizen:setting pointing-device-support='disable' />
<tizen:setting screen-orientation="landscape" context-menu="disable" background-support="enable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>
如果您使用 create-react-app 创建了应用程序，则可以在命令行npm run build.上执行npm run build. 这将构建您的应用程序并将您的应用程序的捆绑文件放入 /build 文件夹中： 现在您只需要做一件事：将 /build 文件夹的内容复制到您的网络空间。 您必须以某种方式配置 Web 服务器，即所有请求始终路由到您的 index.html
看看这篇文章：https ://www.andreasreiterer.at/react-app-without-nodejs-server/
如何在没有任何本地服务器的情况下通过单击 index.html 文件来运行 React 应用程序
[英]How to run React application by clicking index.html file without any local server
运行一个 python 脚本，在 React 应用程序的节点 js 服务器中创建一个数据库
[英]Run a python script that creates a database in node js server in React Application
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.