React
React Boilerplate [リアクション+バベル+ウェブパック]

プロジェクトの設定

プロジェクトの依存関係をインストールするには、ノードパッケージマネージャが必要です。 Nodejs.orgからオペレーティングシステムのノードをダウンロードしてください。 Node Package Managerにはノードが付属しています。

ノード・バージョン・マネージャを使用して、ノードとnpmバージョンの管理を改善することもできます。異なるノードのバージョンでプロジェクトをテストするのに最適です。ただし、運用環境には推奨されません。

システムにノードをインストールしたら、まずバベルとウェブパックを使って最初のReactプロジェクトを爆破するための必須パッケージをインストールしてください。

実際に端末でコマンドを打ち始める前に。 BabelとWebpackが使われているものを見てみましょう。

端末でnpm initを実行すると、プロジェクトを開始できます。初期設定に従います。その後、以下のコマンドを端末で実行します。

依存関係：

npm install react react-dom --save

Dev Dependecies：

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack webpack-dev-server react-hot-loader --save-dev

オプションのDev依存関係：

npm install eslint eslint-plugin-react babel-eslint --save-dev

このサンプル package.jsonを参照することができます

次の内容のプロジェクトルートに.babelrcを作成します。

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

必要に応じて、以下の内容のプロジェクトルートに.eslintrcを作成します。

{
  "ecmaFeatures": {
    "jsx": true,
    "modules": true
  },
  "env": {
    "browser": true,
    "node": true
  },
  "parser": "babel-eslint",
  "rules": {
    "quotes": [2, "single"],
    "strict": [2, "never"],
  },
  "plugins": [
    "react"
  ]
}

生成されたファイルをgitリポジトリにアップロードしないように.gitignoreファイルを作成します。

node_modules
npm-debug.log
.DS_Store
dist

最低限の内容のwebpack.config.jsファイルを作成します。

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

module.exports = {
  devtool: 'eval',
  entry: [
    'webpack-dev-server/client?http://localhost:3000',
    'webpack/hot/only-dev-server',
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ],
  module: {
    loaders: [{
      test: /\.js$/,
      loaders: ['react-hot', 'babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

最後に、 sever.jsファイルを作成して、次の内容のnpm startを実行できるようにします。

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true
}).listen(3000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Serving your awesome project at http://localhost:3000/');
});

あなたのReactプロジェクトが何かをするのを見るためにsrc/app.jsファイルをsrc/app.jsます。

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <h1>Hello, world.</h1>
    );
  }
}

package.json startが何start表すのかを定義していれば、ターミナルでnode server.jsまたはnpm start実行します。

反応スタータープロジェクト

このプロジェクトについて

これは単純な定型プロジェクトです。この記事は、ReactJs + Webpack + Bableの環境を設定するためのガイドです。

始めましょう

私たちは、fire up expressサーバー用のノード・パッケージ・マネージャーを必要とし、プロジェクト全体の依存関係を管理します。ノード・パッケージ・マネージャーを初めてご使用の場合は、 ここで確認できます 。注：ノード・パッケージ・マネージャーのインストールはここで必要です。

適切な名前のフォルダを作成し、ターミナルまたはGUIからナビゲートします。ターミナルに行き、 npm initと入力すると、package.jsonファイルが作成されます。何もないので、プロジェクト名、バージョン、エントリポイント、gitリポジトリ、作成者、ライセンスなどがあります。エントリポイントは、プロジェクトを実行するときにノードが最初に探すため重要です。最後に、あなたが提供する情報を確認するよう求められます。 yesと入力するか、または変更することができます 。これで、 package.jsonファイルが準備完了です。

Expressサーバーのセットアップ npm install express @ 4 - saveを実行します 。これはこのプロジェクトに必要なすべての依存関係です。ここでは保存フラグは重要ですが、 package.jsファイルは更新されません。 package.jsonの主なタスクは、依存関係のリストを格納することです。あなたのpackage.jsonは"dependencies": { "express": "^4.13.4", ............. },ように見えます"dependencies": { "express": "^4.13.4", ............. },

完全なダウンロードの後、 node_modulesフォルダと依存関係のサブフォルダがあることがわかります。今プロジェクトのルートに新しいファイルserver.jsファイルを作成します。今はエクスプレスサーバーを設定しています。私はすべてのコードを終わらせ、後で説明します。

var express = require('express');
// Create our app
var app = express();

app.use(express.static('public'));

app.listen(3000, function () {
  console.log('Express server is using port:3000');
});

var express = require（ 'express'）;これはあなたに急行API全体のアクセスを与えます。

var app = express（）;機能としてエクスプレスライブラリを呼び出します。 app.use（）;エクスプレスアプリケーションに機能を追加させてください。 app.use（express.static（ 'public'））;私たちのWebサーバーに公開されるフォルダ名を指定します。 app.listen（port、function（）{}）ここで私たちのポートは3000になり、我々が呼び出している関数はWebサーバーが正しく動作していることを確認します。それは速いサーバーがセットアップされているということです。

今度は私たちのプロジェクトに行き、新しいフォルダを作成し、 index.htmlファイルを作成します。 index.htmlはアプリケーション用のデフォルト・ファイルで、Expressサーバーはこのファイルを検索します。 index.htmlは、次のような単純なhtmlファイルです

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
</head>

<body>
  <h1>hello World</h1>
</body>

</html>

ターミナルからプロジェクトパスに移動し、 ノードserver.jsを入力します 。 * console.log（ 'Expressサーバーはポートを使用しています：3000'）; *が表示されます。

ブラウザに移動し、 http：// localhost：3000と入力すると、 hello Worldが表示されます。

今すぐパブリックフォルダ内に移動し、新しいファイルapp.jsxを作成します。 JSXはJavaScriptにXML構文を追加するプリプロセッサ・ステップです.ReactをJSXなしで使用することは間違いありませんが、JSXはReactをもっとエレガントにします。 app.jsxのサンプルコードは次のとおりです

ReactDOM.render(
  <h1>Hello World!!!</h1>,
  document.getElementById('app')
);

index.htmlに行き、コードを修正します。これは次のようになります。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23                                              /browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js">                           </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js">    </script>
</head>

<body>
  <div id="app"></div>

  <script type="text/babel" src="app.jsx"></script>
</body>

</html>

これで、あなたはすべて完了です。私はあなたがそれを簡単に見つけることを願っています。