11月18日の学び(React.js)

フロントエンドはそこまで深く踏み込む気はないが動作概要だけでも知っておくこと。

React.jsとは

  • JavaScriptでの開発に用いられるUI用の汎用ライブラリ
  • 比較対象として挙げられるBackbone.jsやAngular.jsとも併用できます。

SPA

  • シングルページアプリケーション
  • 仮想DOMの利用により効率的な画面更新が可能

webpack

  • React.jsやCSSなど複数のソースファイルから配布用のパッケージを作成するツール
  • 以前はgruntやgulpといったツールが利用されていたらしい

React.jsの動作①

  • ブラウザは直接Reactのソースコードを読み込めないため、先にindex.html内のタグを経由してReactの実行ファイルのapp.jsを読み込む
  • 内でReactの適用がなされる

React.jsの動作②

  • ページ状態を保持している「プレーンなJSのオブジェクト」に「テンプレート的な関数」を作用させて、「仮想DOM」と呼ばれるDOMの設計図を取り出す。
  • その設計図を使って本物のDOMを構築する。

ここでいう「プレーンなJSのオブジェクト」とは、JSONをパースしたりするだけで取得でき、タグとかの文字列を一切含まない、クリーンなデータを保持しているJSオブジェクト

React.jsプロジェクトの作成

npmとyarnの2通りの方法がある

npmの場合

  • ブラウザに読み込ませるソースコード用のディレクトリsrcを作成
  • React.jsのソースコードのapp.jsをsrc内に作成
  • webpackが生成するブラウザ動作用のjsファイル出力先としてdistを作成
  • "npm run build"コマンドでwebpackを利用して配布用のパッケージを作成する