環境構築に沢山選択肢がある！！
・reactの環境開発に必要なものは多く一から構築するのは初心者には大変！
・パッケージ管理 => npm、yarnなど...
・使用するライブラリやフレームワーク => react, react-dom, vue.js, angular.j.など...
・JSX/ES6のトランスパイラ => Babel、関連プラグインなど...
・ビルドツール => Browserify、webpackなど...
・フォーマッター・構文チェック => ESLintなど...
環境構築を行うにあたり！
-
create-react-appのコマンド一つでReactのアプリが生成できるようにする(岩崎) - でも、
Babelとbrowserifyで一から作成もしたい(小林)
create-react-app
面倒臭いreactにおける環境構築を一発で行ってくれる！
nodeをインストール → npmをインストール → create-react-app → npm start実行！
メリット
・ webpack、browserifyの設定が不要
・ バベルの設定も不要
Babelとbrowserify
Reactを使う時には生のJavaScriptを直接書くのは疲れるので、もっと楽に書けるES2015やJSXを使う
*JSX
JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。
コードの量が少なくなり、とても見やすい
(例)
*ES2015(ES6)
<script type="text/babel">
ReactDOM.render(
<h1>開発合宿楽しいよ</h1>,
document.getElementById('root')
);
</script>
*ES5
<script>
ReactDOM.render(
React.createElement(
'h1',
null,
'開発合宿楽しいよ'
),
document.getElementById('root')
);
</script>
しかし、問題が...
ES2015やJSXはブラウザで直接動かすことができません。
Babel
ここでBabelが登場
Babelはこれらをブラウザで動く生のJSに変換してくれます。
Browserify
npmにあるライブラリをクライアントサイドで使えるようにできる。
つまり、Browserifyというのはnodeのrequire('aaa')という、依存関係解決機能をブラウザに持ち込める。
gulp（タスクランナー） 処理を自動化
gulpfile.jsの設定
編集したJavaScriptのファイルを保存すると、自動で以下の処理を実行する。
1.ES2015,JSXなファイルをbabelでコンパイル
2.browserifyで一つのファイルまとめる(bundle.js)
3.サーバーの起動
監視対象
index.js
index.html
に加えて、srcディレクトリ配下のjsファイル
これらのファイルが更新されていたら、ビルドしてブラウザをリロードします。
上記の処理はgulpfile.jsで設定しています。
ここからは、Reactについてです。
Reactでは、コンポーネントというものを定義して、それを組み合わせることで画面を作ります。
一つ一つが部品のようになっているので、保守性の高いアプリケーションを作ることができると言われています。
例
index.htmlを作成します。
<div id="container"></div>
のようにしてReactで生成する仮想DOMを適用する場所を作ります。（コンポーネントを埋め込むイメージです）
コンポーネントを渡す部分はこのようになります。
index.js
ReactDOM.render(
<App />,
document.getElementById('container')
)
Appコンポーネントをid=containerな要素に渡しています。Appコンポーネントを定義しているApp.jsにはさらに、いくつかのコンポーネントが繋がっています。
このことからも、Reactではコンポーネントを組み合わせて、画面を作っていることが分かります。