はじめに
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したはいいが、どうやって使えばいいの??
そんな疑問があると思います。
使い方は下記のような方法で使います。
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を使用します。
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のデファクトのルーティングライブラリです。
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の導入などより良いアプリケーションにするための方法があります。
時間があれば、またその辺りも記述してみます。