Question

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

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

我的理解是React js是一个javascript库，所有代码最终都使用babel加载器转换为普通的javascript文件（如果我们使用的是ES6）。所以我认为应该可以这样做。

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

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

如果有人对此有任何解决方案，那将非常有帮助。感谢

Answer 1

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

"homepage": "./",

引用建立时对终端输出作出反应：

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

＆＃34;主页＆＃34; ：＆＃34; http://myname.github.io/myapp＆＃34;，

注意：我很确定这不会在每个项目中都有效。

Answer 2

这几个概念基本上都是你需要的（加lifecycles methods）。这就是为什么React摇滚，即使你拥有庞大而复杂的app，它也很容易思考和推理。

React在没有服务器的情况下工作，只需添加脚本标记，并确保使用当前浏览器理解或下载React源的JavaScript，并在任何说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非常容易使用内联样式，我想不出更好的工具设计电子邮件模板。

Answer 3

我现在遇到了同样的问题，默认的react / react-router应用程序。使用BrowserRouter时，react-router对我也没有用。但我发现issue建议将BrowserRouter更改为HashRouter。它解决了我的问题。要在模拟器上启动应用程序（实际上我是为webOS编写的），我将src中的script标记中的index.html更改为我的构建位置。

Answer 4

以下更改对我有用：

在 "homepage": "." 中添加 package.json 键值。
将 BrowserRouter 替换为 HashRouter，两者都是从 react-router 导入的。

（了解 BrowserRouter 和 HashRouter here 之间的区别）

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

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

Answer 5

如果您使用create-react-app创建了应用，则可以在命令行npm run build.上执行这将构建您的应用程序，并将应用程序的捆绑文件放入/ build文件夹：现在只剩下一件事要做：将/ build文件夹的内容复制到Web空间。您必须以某种方式配置Web服务器，以使所有请求始终路由到您的index.html

看这篇文章： https://www.andreasreiterer.at/react-app-without-nodejs-server/

Answer 6

“主页”：”。使用它可以在没有Web服务器的情况下工作。它对我的工作很好。

Answer 7

///这是我的代码，如何在Tizen Studio上运行React应用 tizen中的index.html ..运行react app并像我一样添加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>

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

7 个答案: