Reactアプリケーションを実装する際に、最低限必要なpackageの紹介

## はじめに
React.jsでアプリケーションを実装したい！
でも、必要なpackageが多すぎて、何を入れていいのかわからない....
今回は、そんな方のために最低限必要なpackageのご紹介をします。
（何を最低限と定義するかは、人それぞれなので、今回は筆者の独断と偏見により記述してみます。）

## 対象
とりあえず、React.jsを使ってアプリケーションを実装してみたい！という方

## 前提知識
必用なパッケージをインストールする上で、必ず必用なものを3つご紹介します。

### npm
npmは、Node Package Managerの略称のことで、
Node.jsで作られたパッケージ管理ツールのことです。
Railsの実装の際には、bundlerなどがありましたね。

### package.json
package.jsonとは、そのアプリケーションで使用したいパッケージのバージョンや依存関係などを管理してくれるツールです。
RailsではGemfileというファイルが同様の役割をになっていました。
Railsで、必要なパッケージはgemというもので提供されており、Gemfileにそれらを定義し、bundle installすることで、アプリケーション内で使用することができていました。
これと同様に、webpackはnpmのパッケージですので、まずは、packageを管理するための管理場所を作成する必要があります。
それがpackage.jsonと呼ばれるファイルで、下記のコマンドを打つことで生成されます。

```
$ npm init
```


### packageのインストール方法
npmのpackageをinstallするには、下記のコマンドでインストールすることが可能です。

```
$ npm install packageName
```

この際、オプションをつけることができます。
一般的には大きく2つのオプションを使い分け、package.jsonに定義します。
それが、`--save`と`--save-dev`です。

### `--save`, `--save-dev`の違い
package.jsonに記述する方法として、Railsでbundle installlにオプションが複数あったように、npmでも同様に存在します。
大きく2つ存在しており、それぞれの違いは下記の通りです。(他にも存在するが、詳しく知りたい方は公式documentを確認してください。)

### `--save`とは
- package.jsonの `dependencies`に記述される
- package.jsonを外部の人がinstallする際、全てinstallされる
- 主にpackageやアプリケーションをの実行に必要なものは、`dependencies`で管理する。

### `--save-dev`とは
- package.jsonの `devDependencies `に記述される
- 開発する際に必要なpackageの管理のために使う。


## packageのご紹介
では、必用なpackageのご紹介をします。
※まだnpmとpackage.jsonをインストール、生成されていない方は先に実施してください。

### react
下記のコマンドでreactをinstallします。
これで、アプリケーション内でreact.jsを書くことができます。

```
$ npm install react --save
```

#### どうやって使うの??
reactをinstallしたはいいが、どうやって使えばいいの??
そんな疑問があると思います。
使い方は下記のような方法で使います。

```index.js
var React = require('react');
var Header = require('./Header.js');
var Footer = require('./Footer.js');

var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <div>index</div>
        <Footer/>
      </div>
    );
  }
});
```

#### React.createClassとReact.Componentの違い
reactには、componentを作成する方法として2つ定義されています。
1つはcreateClass()メソッドを使う方法、もう一つはComponent()メソッドを使う方法です。
React.Component()メソッドはES6による記述の仕方なので、ES6を使う場合は、その設定をする必用があります。

### react-dom
下記のコマンドでreact-domをinstallします。

```
$ npm install react-dom --save
```

### どうやって使うの??
react-domは下記のようにして使います。
react-domは0.14からreactから切り離されており、
`render()`や`findDOMNode()`などを使用したい場合は、react-domのpackageを使用します。

```index.js
var React = require('react');
var ReactDOM = require('react-dom');
var Header = require('./Header.js');
var Footer = require('./Footer.js');

var Index = React.createClass({
  render:function(){
    return (
      <div>
        <Header/>
        <div>index</div>
        <Footer/>
      </div>
    );
  }
});

ReactDOM.render(
  <Index />,
  document.getElementById('root')
);
```

### react-router
react-routerは下記のコマンドでインストールします。

```
$ npm install react-router --save
```

#### どうやって使うの?
react-routerは、React.jsのデファクトのルーティングライブラリです。

```route.js
var browserHistory = require('react-router').broserHistory

var route = (
  <Router history={browserHistory}>
    <Route path="/" component={App}>
    <IndexRoute component={Index} />
    <Route path="/a" component={PageA} />
    <Route path="/b" component={PageB} />
  </Router>
)
```

`Route`は、URLとそれに対応するcomponentを指定することができます。
`IndexRoute`は、`Route`同様の機能を持つ他、defaultで表示されるcomponentを指定することができます。


### webpack
下記のコマンドでwebpackをinstallします。

```
$ npm install webpack --save-dev
```

使い方は、[こちら](http://qiita.com/ftyabu/240280617a69777a2fd4)

### webpack-dev-server
下記のコマンドでwebpack-dev-serverをinstallします。

```
$ npm install webpack-dev-server --save-dev
```

#### どうやって使うの??
webpack-dev-serverは、webpackを使う際に、一緒に使うと良いツールです。
webpack同様、webpack.config.jsをみに行きbuildしてくれます。

webpackにもwatch機能があり、変更があった際に自動で検知してリビルドしてくれますが、
webpack-dev-serverには、この機能以上に様々な機能があり、ローカル環境で開発するにはオススメのツールです。

- ローカルサーバーを起動する
- Automatic Refreshという機能で、webpack同様、変更があった際に検知して自動リビルドしてくれる
-  Hot Module Replacementという機能で、変更があった際にブラウザ全体を更新するのではなく、変更のあったモジュールのみ更新してくれる

## おわりに
これでReact.jsを動かすことはできるかと思います。
しかし、本来であれば、ここにプラスして、reduxやES6、babelの導入などより良いアプリケーションにするための方法があります。
時間があれば、またその辺りも記述してみます。