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

使い方は、こちら

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の導入などより良いアプリケーションにするための方法があります。
時間があれば、またその辺りも記述してみます。