React環境構築(初心者向け)

（2017年1月7日）

読んで欲しい人

なんとなくReactやってみたい人。

必要技術

・javaScript
・Webpack(Babelとかbrowserifyでも大丈夫です。この記事はWebpack)
・ターミナルがちょっと使える。

(僕もReact始めて3週間あまりなので、
間違えがあればご指摘ください。)

Reactがすごい勢いで流行っています。フロントエンドの流れとしてはWebサービスからSPAのサービスへ流れが来ているような気がしています。
僕もこれまではフロントエンドのフレームワークはAngularJSをもっぱら使っていたのですが
Angular2になったり、また2017年3月にAngular4がリリース宣言されることなどあって、
フロントエンドの流行り廃りはとても早くなって来ています。

React.jsとは

ReactはMVCフレームワークでいうところのV(View)のみに特化しているJavaScriptのライブラリです。
僕もまだReact初めて3週間ですが、僕が気がついているReactの優れているところは
・仮想DOM(Virtual DOM)でページ全体をロードしなくても必要なDOMだけ書き換えることができる。
・これまで複雑だったコンポーネントを一つ一つ管理することができる。
・(Fluxアーキテクチャの)Reduxを使えば、データの方向を一方通行にすることができる。
まずReactやってみて上記の上から２つは、reactの良さに気がつくと思います。

（SPA：シングルページアプリケーションとは）

SPAという言葉を聞いたことがあるかもしれませんが、
デスクトップでFacebookを開いてみた時を想像してください。
縦に3列のコンテンツがあって、それぞれがリアルタイムで更新されています。
例えば誰かが記事を書くと、それがリアルタイムで更新されて、
真ん中のコンテンツのウォールが更新されるという挙動をすると思います。
このようにページを更新しないで中身だけを更新するような（ざっとですが...）仕組みのことをSPAと呼びます。

実際に書いてみましょう

公式チュートリアルを見るのが一番いいのですが、
僕も英語は苦手だったので、そのような人のために公式を簡単に説明します。
まずは大前提として、Reactはjsにそのまま書いてもブラウザでは見れない！
ということを頭に入れておきましょう。
Reactだけを勉強してもダメですね。

まずはReactがどのようなものか書いてみます。

app.js

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component{
  render(){
    return(
      <div>Hello World</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("content"))

index.html

<!Document html>

...（略）

  <div id="content"></div>

...

Reactは基本このような形で書いていきます。
他の記事を見るとレンダリングは
render(<App />, document ... )
とかで書いてあることもありますが、
ReactDOM.render(<App />, document.getElementById("content"))
で問題ないと思います。
(ちなみにReactでは大文字小文字に気をつけないとエラーする印象でしたのでお気をつけください。(例:Component))

まずは環境構築

ターミナルを使ってディレクトリを作りましょう

$ mkdir reactSample
$ cd reactSample

次にpackage.jsonを作ります。
$ npm init -y

その後はindex.htmlとapp.jsを作ります。

$ touch index.html
$ touch app.js

そうすることで基本のフォルダができると思います。

reactSample/
｜
｜ーーindex.html
｜
｜ーーapp.js
｜
｜ーーpackage.json

ただ、これだけではReactは動かないので、続いてwebpackにてreactを通常のJavaScriptに変換する必要があります。

reactとreact-domのインストール

まずはreactとreact-domをインストールしましょう。
$ npm install --save react react-dom

先ほど書いたapp.jsの

app.js

import React from 'react'
import ReactDOM from 'react-dom'
...

で読み込んでいることになります。

Webpackのインストール

続いてwebpackのインストールです。
npm install webpack@beta -g
ローカルにもインストールしましょう
$ npm install --save-dev webpack

Babelのインストール

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

その後、.babelrcファイルを設定します。

$ touch .babelrc
$ open .babelrc

.babelrcのファイルに以下のコードを追加してください。
{"presets: ["react", ""es2015]"}

続いてwebpackでReactで書いたコードをブラウザからも読み込めるようにwebpackの設定をします。

$ touch webpack.config.js
$ open webpack.config.js

次のコードを挿入しましょう。

webpack.config.js

module.exports = {
  entry: './app.js',
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  }
}

ブラウザリロードの実装

Reactコードをwebpackでブラウザに読み込めるようにするコードは
$ npm run build
ですが、コードを変更した時にいちいちコマンド入力するのは面倒だと思うので、
ターミナルでwebpackを実行するために、package.jsonに以下を書き込みます。

package.json

...
...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server --hot --inline"
  }
...

これでコードを新しく書くたびにブラウザがオートリロードします。

・webpackの実行
$ npm run build

・自動リロード
$ npm start

最後はindex.htmlに以下コードを追加します。

index.html

...
  <script src="./dist/bundle.js"></script>
...

これで http://localhost:8080 でReactが見れるようになると思います。