前提

対象は以下の開発者

流行っているらしい React を使って開発でもするか、という初期段階で
開発マシンは Mac で
Javascript は経験したことあって
Node.js は触ったこと有る

雛形の作成

ここでは HelloReact というアプリを作るとします。

0. 準備のための準備

Node.js の確認

確認.

$ node -v
v6.9.?

node.jsのversionを管理するためにnodebrewを利用する等を参考に、6系の最新版をインストールして下さい。

確認.

$ nodebrew ls-remote
...
v6.9.0    v6.9.1    v6.9.2    v6.9.3    v6.9.4    v6.9.5

実行.

$ nodebrew install-binary v6.9.5
$ nodebrew use v6.9.5
$ nodebrew alias default v6.9.5

create-react-app インストール

create-react-app は React の開発(スタートアップ)を劇的に簡単にしてくれるツール。
これを使わない手はない。

create-react-app
https://github.com/facebookincubator/create-react-app

実行.

$ npm install -g create-react-app

1. 雛形の作成

実行.

$ create-react-app HelloReact
$ cd HelloReact

確認.

$ ls -l
-rw-r--r--    1 dreamarts  staff  57790  2  5 15:59 README.md
drwxr-xr-x  748 dreamarts  staff  25432  2  5 15:59 node_modules
-rw-r--r--    1 dreamarts  staff    374  2  5 15:59 package.json
drwxr-xr-x    4 dreamarts  staff    136  2  5 15:59 public
drwxr-xr-x    8 dreamarts  staff    272  2  5 15:59 src

Git は使えますか？
もし使えるのであれば、以下で初期状態をコミットしておきましょう。
(また、この先、節目節目で、コミットして下さい)

実行.

$ git init
$ git add .

確認.

$ git status
On branch master

Initial commit

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)

	new file:   .gitignore
	new file:   README.md
	new file:   package.json
	new file:   public/favicon.ico
	new file:   public/index.html
	new file:   src/App.css
	new file:   src/App.js
	new file:   src/App.test.js
	new file:   src/index.css
	new file:   src/index.js
	new file:   src/logo.svg

11個のファイルが雛形として生成されたようです。
コミットして保存しておきます。(コミットメッセージは適当に。)

実行.

$ git commit -m "First commit."

確認.

$ git log 
commit 56a218014d86c14883071b9c3c4ae8e1a28499e5
Author: exabugs <exabugs@gmail.com>
Date:   Sun Feb 5 16:10:33 2017 +0900

    First commit.

2. 初回起動まで

ここでいったん、package.json を確認しておきます。
(package.json とは、アプリの概要を記してあるファイルです。)

確認.

$ cat package.json 
{
  "name": "HelloReact",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.8.5"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

先ずは、依存モジュール (dependencies / devDependencies) のインストールが必要です。
以下のコマンドを実行。

実行.

$ npm install

ディレクトリ node_modules に大量のモジュールが配置されます。
全て "react-scripts" の依存モジュールです。
"react-scripts" がいい感じに必要なモジュールを準備してくれるので、今のところは深く知らなくても大丈夫。

では、さっそく、起動してみます。
package.json の scripts 部分にある start を実行すればいいです。

実行.

$ npm run start

何やら処理が始まり、最後にブラウザが立ち上がって、以下の画面が見れたら成功です。

上記は開発用のスクリプトです。Ctrl + C で止まります。

ここから、実際に開発作業に入っていきます。

余談

開発が終わってリリースする際は、以下のコマンドを実行。

リリースモジュールを生成する際に実行.

$ npm run build

build ディレクトリにリリースモジュール一式が生成されます。
(Appach などの Web サーバーで配信できる形式になります。)

開発環境

エディタ

プログラム開発には最低限、テキストエディタが必要です。
Atomがオススメ。
そもそも、Atom 自身も React で書かれているらしい。

デバッガ

エディタとともに、最低限必要なのが、「デバッガ」です。

chrome のメニュー「表示」 - 「開発/管理」 - 「デベロッパーツール」で起動です。
( または、option + command + i )

「ブレークポイント」を設定して「ステップ実行」とかできるようになる。使い方はすぐわかる。

chrome には React 開発用のプラグイン「React Developer Tools」があるので、追加しておく。

ESLint

初心者はコードの間違いを見つけるだけでも大変だし、ましてや、コーディングスタイルまで気にする余裕はないでしょう。

ESLint を使えば、間違い部分や、おかしなスタイルを指摘してくれる。言われる通りに修正すれば、あら不思議、一流プログラマーが書いたコードと遜色ない見栄えになります。

コーディングスタイルは沢山ありますが、その中でも一番人気は Airbnbスタイルです。これをマスタしておけば間違いない。

以下の4行をまとめてコマンドラインにコピペすれば、ESLint に必要なモジュールを package.json に記載して、インストールまでしてくれる。

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

package.json の依存モジュール (devDependencies) に、eslint の 5 モジュールが追加されていればOK。

確認.

$ git diff
diff --git a/package.json b/package.json
index 2b816a5..e79f6c9 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.9.0",
     "react-scripts": "0.8.5"
   },
   "dependencies": {

最後に、ESlint 設定ファイルを配置する。
(package.json と同じディレクトリ)

.eslintrc.json

{
  "extends": "airbnb"
}

一応、ここまでをコミットしておきます。

確認.

$ git log -p
commit 2599c925eeee7371ce88d4c154443acf1f00d103
Author: exabugs <exabugs@gmail.com>
Date:   Sun Feb 5 18:14:44 2017 +0900

    Add ESLint (Airbnb).

diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..b0c0c8b
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "airbnb"
+}
diff --git a/package.json b/package.json
index 2b816a5..e79f6c9 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
+    "eslint": "^3.15.0",
+    "eslint-config-airbnb": "^14.0.0",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^3.0.2",
+    "eslint-plugin-react": "^6.9.0",
     "react-scripts": "0.8.5"
   },
   "dependencies": {

さて、Atom を起動してみます。

$ atom .

ESLint プラグインをインストール。
Atom メニュー - Preferences で install を選択して、以下の Package 3個をインストールします。

linter
linter-eslint
react

インストールが完了したら(Atomの再起動が必要かも)、適当にファイルを開いてみます。
App.js を開いてみると

さっそく、ワーニングが発生しています。正常に ESLint が動作していることがわかります。

[Error] JSX not allowd in files with extension '.js'
[Error] 'document' is not defined.
[Error] Missing trailing comma.

1. JSX を使うなら、拡張子は .jsx にしろ

JSX とは、React の特徴の一つである、タグを使って Javascript を記述する表記のことです。
しかしここで問題が。
create-react-app を使って生成したアプリは、react-scripts を使ってコードを処理しますが、Javascript のエントリポイントは src/index.js である必要があります。
どうしたらいいか。。

→ index.js のみ、JSX を使わない記法にします。
また、index.js 以外は、拡張子を .jsx にします。

BEFORE.

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

AFTER.

ReactDOM.render(
  React.createElement(App),
  document.getElementById('root'),
);

2. 'document' が定義されていない。

document はグローバル変数だから、宣言はないです。どうしたらいいか。。

→ .eslintrc.json で "browser": true を指定すればよい
http://eslint.org/docs/user-guide/configuring.html#specifying-environments
(併せて、テストモジュール "jest" も true にしておきます。)

.eslintrc.json

{
  "extends": "airbnb",
  "env": {
    "browser": true,
    "jest": true
  }
}

3. 末尾にカンマが足りない

へい、了解。

おわりに

React で開発開始できるまでの手順をまとめました。
開発リーダの人は、こちらもどうぞ
「みんな大好き Airbnb JS スタイルを Jenkins + SonarQube で CI 運用に組み込む」