React => インストール

シンプルなセットアップ

フォルダの設定

この例では、 src/コードとout/出力することを想定しています。このようにフォルダ構造は次のようになります

example/
|-- src/
|   |-- index.js
|   `-- ...
|-- out/
`-- package.json

パッケージの設定

セットアップnpm環境を仮定すると、最初に、Reactコードをes5準拠のコードに変換するために、babelを設定する必要があります。

$npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

上記のコマンドは、webpackで使用するローダーモジュールとコアbabelライブラリをインストールするようnpmに指示します。また、JSXとes6モジュールコードを理解するためにes6と反応するプリセットをインストールします。（プリセットに関する詳細は、ここでBabelプリセットを参照してください）

$npm i -D webpack

このコマンドはwebpackを開発の依存関係としてインストールします。（私はインストールの略語であり、 -Dは--save-devの略語です）

追加のwebpackパッケージ（追加のローダーやwebpack-dev-server extensionなど）をインストールすることもできます。

最後に、実際の反応コードが必要になります

$npm i -D react react-dom

ウェブパックの設定

依存関係の設定では、webpackに何をすべきかを伝えるためにwebpack.config.jsファイルが必要になります

シンプルなwebpack.config.js：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};

このファイルはwebpackにindex.jsファイル（src /にあると仮定）で始まり、 outディレクトリの単一のbundle.jsファイルに変換するように指示します。

moduleブロックは、正規表現に対して見つかったすべてのファイルをテストするようにwebpackに指示し、一致した場合、指定されたローダを呼び出します。（この場合、 babel-loader ）さらに、 exclude regexは、 node_modulesフォルダ内のすべてのモジュールのこの特別なローダーを無視するようにnode_modulesます。これは、蒸散プロセスのスピードアップに役立ちます。最後に、 queryオプションは、webpackにどのパラメータをbabelに渡すかを伝え、以前にインストールしたプリセットを渡すために使用されます。

セットアップのテスト

今残っているのは、 src/index.jsファイルを作成し、アプリケーションをパックすることです

src / index.js：

'use strict'

import React from 'react'
import { render } from 'react-dom'

const App = () => {
  return <h1>Hello world!</h1>
}

render(
  <App />,
  document. getElementById('app')
)

このファイルは、通常、単純な<h1>Hello world!</h1>ヘッダーをID「app」のhtmlタグにレンダリングしますが、今のところコードを一度トランスペアレントにするだけで十分です。

$./node_modules/.bin/webpack .ローカルにインストールされたバージョンのwebpackを実行します（-gを使用してwebpackをグローバルにインストールした場合は$webpack使用します）

これは、変換されたコードをout/bundle.jsファイルout/bundle.jsを内部に作成し、その例を終了するはずです。

webpack-dev-serverの使用

セットアップ

webpackを使用する簡単なプロジェクトを設定した後、 $npm i -g webpack-dev-serverを発行して反応させると、より速く開発できるように開発用httpサーバーがインストールされます。

webpack.config.jsの変更

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  }
};

変更は

output.publicPathを提供するためのパスを設定します（詳細はWebpack設定ファイルを参照してください）
devServer
- contentBase静的ファイルを提供するための基本パス（ index.html ）
- hotは、ディスク上のファイルに変更が加えられたときにwebpack-dev-serverをホットリロードするように設定します

最後に、アプリをテストするために単純なindex.htmlが必要です。

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Sandbox</title>
  </head>
  <body>

    <div id="app" />

    <script src="public/bundle.js"></script>
  </body>
</html>

この設定で$webpack-dev-serverを実行すると、ポート8080上のローカルhttp $webpack-dev-serverが起動し、接続時に<h1>Hello world!</h1>を含むページがレンダリングされます。

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow

React
インストール

サーチ…