目下Reactを勉強しているところなんですがappを作成してコーディングを始めるまでをメモ。あとで見返してわかりやすいように極力ひと言でまとめます。

1. node.jsを導入する

Reactを動作させるのにnode.jsが絶対必須ってわけではないけどバンドラのwebpack, JSX記法をJSに変換するトランスパイラのbabel等を動かすためにnode.jsが必要です。ここまで書いて自分でも何言ってるかわからないけど実用的なアプリを作るには必要ってことで黙ってインストール。
　node.js

補足
・webpackとは
JSやCSSの複数のファイルをひとつにまとめてくれるバンドラ。

・babelとは
ECMAScript2015 (ES6)やECMAScript7等の最新の規格で書かれたJavascriptを一般的なブラウザが扱えるECMAScript5に変換してくれるトランスパイラ。
　babel

2. yarnを導入する

node.jsにはnpm (node package manager) というパッケージマネージャがデフォルトで入っていますがyarnの方が高速で信頼性も高いってことでyarnを入れときます。

~ % npm install --global yarn
~ % yarn --version
1.22.4

補足
・yarnとは
Facebookが開発したパッケージマネージャ。npmと互換性がある。npmよりも高速で動く。

3. create-react-appを導入する

1でも書いたとおりReactの開発にはwebpackやbabelが必要でこれまではマニュアルでインストールしなくてはならず非常に面倒です。これを解決するのがcreate-react-app。

~ % yarn global add create-react-app

補足
・create-react-appとは
Facebookが開発したReactアプリを作成するためのコマンドラインツール。
　create-react-app

4. appを作成する

create-react-appがインストールできたら以下のコマンドでappを作成します。

~ % create-react-app my-app

省略

Success! Created my-app at /Users/username/my-app
Inside that directory, you can run several commands:

 yarn start
   Starts the development server.

 yarn build
   Bundles the app into static files for production.

 yarn test
   Starts the test runner.

 yarn eject
   Removes this tool and copies build dependencies, configuration files
   and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

 cd my-app
 yarn start

Happy hacking!

成功すると以下のファイルが作成されます。

MY-APP
├── .gitignore
├── README.md
├── package.json
├── node_modules
├── public
├── yarn.lock
└── src
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── serviceWorker.js
 └── setupTests.js

このnode_modulesの中にwebpackやらbabelやらの諸々が入っています。あとはsrcの中のファイルを編集することでappを開発していきます。

5. appを起動する

~ % cd my-app
~ % yarｎ start

上記コマンドで作成したappを起動します。appはローカルホストの3000番ポートを使って起動するので http://localhost:3000/ にアクセスします。

上のような画面が表示されたらappは正常に起動しています。railsのローカル環境も3000番ポートを使うのでかち合わないように注意。

6. まとめ

とりあえず自分のメモ用にReactのソースをいじれるようになるまでの道のりを端折りまくってまとめてみましたが・・・。私が思うにReact自体が、

ブラウザによってAPIやら挙動が微妙に異なるので、素のDOM操作をして動的なWebサイトの開発をするのは困難を極める。
　↓
jQuery登場。
ブラウザに依存しないオープンソースのセレクタエンジンを使ったDOM操作をサポート。
　↓
Facebookの天才技術者が「そもそもDOMがJavaScriptの外部モデルとして存在していてJavaScriptの操作対象になっているからやりにくい、と。ならばもうDOMはJavaScriptの値（ファーストクラスオブジェクト）にしてしまおう」というとんでもないことを思いつく。　
（Quora日本語版のQAより一部加筆修正）

という流れで生まれてきたものなので、この背景を知らないと理解しにくいです。加えてwebpackやらbabelやら複雑な仕組みを導入している上、それらを解決するためにさらにcreate-react-appが生まれてブラックボックス化になったりと初学者にとっては非常にカオスな状況になっています。このわかりにくさが巷でよく言うReactの学習コストの高さなんじゃないかと思いました。

よってReactを理解するには生まれた背景からしっかり抑えるといいんではないかと。

次回はReactの中身をまとめていきます。