React.js：作成反応するアプリ

を私が反応するように新たなんだと私は基本的なリアクトアプリを構築するために、この説明を使用：React.js：作成反応するアプリ

npm install -g create-react-app 
create-react-app my-app 

cd my-app 
npm start

：https://facebook.github.io/react/docs/installation.html

は私がして、新しいプロジェクトを開きましたindex.htmlファイルは、ハローワールド/パブリックに位置しており、ここでの内容です：

しかし

<!doctype html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta name="theme-color" content="#000000"> 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> 
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 
    <title>React App</title> 
    </head> 
    <body> 
    <noscript> 
     You need to enable JavaScript to run this app. 
    </noscript> 
    <div id="root"> 

    </div> 
    </body> 
</html>

、すべての「ものに反応」こんにちは世界\ srcディレクトリに置かれています。 'hello-world \ src \ index.js'はコンポーネントをアクティブにします。

私が理解できないのは、index.htmlがindex.jsの内容を「読み込む」方法です。 index.htmlには、index.jsにつながるHTMLタグはありません。

"npm start"を実行することでこのアプリケーションを開始できます。このコマンドが実行するのは、localhost：3000で実行されているサーバーを呼び出すことです。「npm start」を使わずにアプリケーションを見るにはどうすればいいですか？

出典

2017-08-07 CrazySynthax

それは反応が '

'の間にあるためです。 – Zorig

私はそれをアンダー。私が望むのは、index.htmlをダブルクリックし、アプリケーション全体を見ることです（ 'npm start'を使ってサーバを設定することなく）。 – CrazySynthax

あなたは 'dist /'フォルダの中にいますか？ – Zorig

我々は（npm start用）ブラウザ上でレンダリングされたDOMを見れば、それが注入された以下のスクリプトノードを持っています

<script type="text/javascript" src="/static/js/bundle.js"></script>

同様に、生産のビルド（npm run build）のために、index.htmlのがあります同様のscriptノードが組み込まれているビルドフォルダの下のファイル。私の場合は

例：

<script type="text/javascript" src="./static/js/main.440dcd65.js">

したがって、私は、スクリプトノード噴射がreact-scriptsライブラリまたはそれの依存関係の1つから行われていることを考える傾向があります。また

、動作するはずです以下、Webサーバなしでアプリケーションを実行するには：package.json

ランで"homepage": "./"が定義されている

生産ビルド（npm run build）
起動index.htmlbuildフォルダから直接ダウンロードしてください。

編集：./node_modules/react-scripts/configが表示されます下

構成は<script>ノード注射の世話をします。

例：./node_modules/react-scripts/config/webpack.config.dev.jsあなたはちょうどあなたがWebPACKのようなツールを使用することができることを行うために、単一のjsファイル内のすべてのあなたのコードをバンドルする必要があり、

// Generates an index.html file with the <script> injected. 
new HtmlWebpackPlugin({ 
    inject: true, 
    template: paths.appHtml, 
}),

出典

2017-08-07 07:06:01

を持っています。

は、あなたがこのようなプロジェクト構造があるとします -

Project 
-src 
    -app.js 
-index.html 
-package.json 
-node-modules

あなたはwebpack.configを追加する必要があります。js： - あなたのコードをバンドルするためのいくつかの特定の設定を含むルートディレクトリにあります。

webpack.config.jsを問わず、これを見ていきます： -

var path = require('path'); 
var webpack = require('webpack'); 

BUILD_DIR = path.resolve(__dirname,'dist'); 
DEV_DIR = path.resolve(__dirname,'src'); 

var config = { 
    entry:DEV_DIR + '/app.js', 
    output:{ 
     path:BUILD_DIR, 
     filename:'bundle.min.js', 
    }, 
    module:{ 
     loaders:[ 
      { 
       test:/\.jsx?/, 
       include:DEV_DIR, 
       loader:'babel-loader', 
       exclude:/node_modules/, 
      } 
     ] 
    }, 
}; 
module.exports = config;

あなたのルートディレクトリに.babelrcファイルを追加します。 - あなたのルートディレクトリrunコマンドでその後

{ 
"presets": ["react","es2015","stage-1"] 
}

： - webpack をあなたのbundle.min.jsを含むdistフォルダを作成します。

編集あなたのindex.htmlで： -

<script src = "dist/bundle.min.js"></script>

package.json

"dependencies": { 
"babel": "^6.23.0", 
"babel-core": "^6.25.0", 
"babel-loader": "^7.1.1", 
"babel-preset-es2015": "^6.24.1", 
"babel-preset-react": "^6.24.1", 
"babel-preset-stage-1": "^6.24.1", 
"react": "^15.6.1", 
"react-dom": "^15.6.1", 
"webpack": "^3.4.1", 
},

私はこれはかなり大きいですが、私の意見では、あなたが通過する必要があります知っていますこのプロセスは、反応の中で発展している間に、最初からこれを進める方が良い。

出典

2017-08-07 07:28:46

React.js：作成反応するアプリ

答えて

関連する問題