React 入門編
SPA(Single Page Applicaton)を作る時に使えるJavaScriptのフレームワークを紹介します。
はじめに
最近では、画面遷移無しでフレキシブルなWebページをSPA(Single Page Applicaton)などと呼ばれているようです。
以前まではAjaxやらサーブレットやらを使ってやっていましたが、今ではJavaScriptだけでちゃっちゃとWebページを作るようになりました。
Reactとは
Reactは、JavaScript(以下、JS)だけで書けるライブラリ。
EcmaScript6というJavaScriptの進化版を使うようです。（es6についてはこちら）
最近では、Angularとどっちを取るかで界隈を賑わせているようですね。
データバインディングとvirtual domを備えているので、高速で描画を更新出来る点はよりモダンな感じがしますね。
Reactのデータバインディングをざっくり
コンポーネント指向であるReactは、データのバインドをクラス単位で管理します。
基本は、親のコンポーネントから子のコンポーネントに変化があった分のデータだけ伝播させます。
親コンポーネントの例（Main.jsx）
親コンポーネントでは自身でstateを持ち、子コンポーネントのSub.jsxに値を渡しています。
子コンポーネントの例（sub.jsx）
親コンポーネントからのデータはコンストラクタが走った際にthis.propsに入ります。
この2ファイルがレンダリングされると下のようになります。
ReactのVirtual Domをざっくり
Reactはpropsまたはstateが変わる度にrenderが走ります。
でも、毎回毎回renderが走る度にDomを取っ替え引っ替えしてるとjQueryでゴチャゴチャやるのと同じぐらいモッサリしてしまいそう。
しかし、Reactの場合はJS上のDom要素とHTML上のDom要素にキーが割り当てられていて、変化があったキーのDomだけが更新されるようです。
ぜひ使って欲しい
本サイトでも、Reactの情報は取り扱っていこうと思います。
多分これからもSPAなサイトは多くなっていくと思います。ぜひ使って見てくださいね。
