web-dev-qa-db-ja.com

Reactサーバーなしのアプリケーションを実行

私の質問をする前に、私は反応するのが非常に新しいことを伝えたいと思います。今まで、コンポーネントのようなreactの非常に基本的な概念を学びました。状態、プロップ、ルーターなど、この質問は非常に面白いかもしれませんが、そのための解決策が必要です。どこか間違っている場合は私を修正してください。

だから私の質問は、サーバー上でアプリケーションを実行せずに反応ベースのアプリケーションを実行できますか？です。基本的に、Webブラウザでindex.htmlファイルパスを直接使用でき、アプリが動作し始めます。

私の理解ではReact jsはjavascriptライブラリであり、すべてのコードは最終的にbabel loaderを使用してプレーンなjavascriptファイルに変換されます（ES6を使用している場合）。 。

webpackを使用して、内部で最初にReactベースまたは他のjsファイルを通常のjavascriptに変換し、 Index.htmlファイルで使用できる単一のバンドルファイルを作成し、これを試してみましたが、一部の機能のみがstate、propのように機能しますが、他の多くの機能は反応ルーターのように機能しませんが、npmを使用した場合サーバーのすべての機能が正常に動作し始めます。

今私がこれをしたいのは、react jsを使用してSamsung Tizen TV Webアプリケーションを作成したいからですnpmサーバーとすべて。

誰かがそれについて何か解決策を持っているなら、それは非常に役立つでしょう。ありがとう

javascriptreactjsreact-routertizentizen-web-app
19
Vikas Verma

ビルドする前にpackage.jsonに以下を追加しました：

"homepage": "./",

ビルド時の反応のターミナル出力の引用：

プロジェクトは、サーバールートでホストされていると想定して構築されました。これをオーバーライドするには、package.jsonでホームページを指定します。たとえば、これを追加してGitHubページ用にビルドします。

「ホームページ」：「 http://myname.github.io/myapp "、

注：これはすべてのプロジェクトで機能するとは限りません。

10
Jannik S.

これらのいくつかの概念は基本的に必要なものすべてです（プラス ライフサイクルメソッド ）。そのため、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でインラインスタイルを使用するのは非常に簡単です。メールテンプレートを設計するためのより良いツールを考えないでください。

7
Solo

デフォルトのreact/react-routerアプリケーションで同じ問題が発生しました。そして、react-routerも BrowserRouter を使用しているときに機能しませんでした。しかし、私は issue を見つけましたBrowserRouterを HashRouter に変更することをお勧めします。それは私の問題を修正しました。エミュレータでアプリケーションを起動するには（実際にはwebOS向けに作成しています）、index.htmlのsrcタグのscriptタグをビルド場所に変更します。

2
AleshaOleg

「ホームページ」：」。これを使用して、Webサーバーなしで動作します。私にとっては非常にうまく機能しています。

0
mohammad feiz

//これは、TizenのTizen Studio index.htmlでReact appを実行する方法です。

<!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>
0
Slavo3Dev

Create-react-appを使用してアプリを作成した場合、コマンドラインで実行できますnpm run build.これにより、アプリがビルドされ、アプリのバンドルファイルが/ buildフォルダーに配置されます。あとは、/ buildフォルダーの内容をWebスペースにコピーするだけです。すべてのリクエストが常にindex.htmlにルーティングされるように、Webサーバーを構成する必要があります

この記事をご覧ください： https://www.andreasreiterer.at/react-app-without-nodejs-server/

0
Angelotti