Reactで画像タイムラインを作ってみる

こんにちは、システムデザイン部のウザワです。
今回はfacebook製のUI生成用JavaScriptライブラリ「React」の紹介と、Reactを使って簡単なアプリケーションを作って見ようと思います。

Reactとは

UIを作るためのfacebook製のJavaScriptライブラリです。
Viewの状態管理を容易にしてくれる様々な特徴を持っています。
以下の様な特徴を持っています。

一方向のデータフロー

Reactのコンポーネントは、状態とプロパティという値を持っており、コンポーネントをこれらの関数として画面に表示します。
状態は親コンポーネントのみに指定するのが好ましく、親以下の子コンポーネントでは親から渡された値をプロパティとして呼び出します。
これにより親コンポーネントの状態のみでコンポーネント全体を生成でき、画面状態の管理を容易にしてくれます。

VirtualDOM

コンポーネントを毎回再描画していてはパフォーマンスが悪いのでは、と思うかもしれません。
Reactで生成したコンポーネントに何らかの変更があった際に、コンポーネント全体を再描画せず、変更があった部分だけを検知し更新してくれる仕組みがあり、それがVirtualDOMです。

また、ReactがカバーするのはViewのみであるため、既存のWebアプリケーションにReactを導入することも用意です。

以上がReactの簡単な紹介になります。
それではReactを使って簡単なアプリケーションを作っていきましょう。 (続きを読む…)



  • Profile
    キャスレーコンサルティングの技術ブログです。
    当社エンジニアが技術面でのTips、技術系イベント等についてご紹介いたします。
  • CSV社長ブログ
  • チーム・キャスレーブログ