Reactガイドを読んでいくその49

React

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

他のライブラリとのインテグレーション

他のビューライブラリとのインテグレーション

ReactはReactDOM.render()の柔軟性のおかげでほかのアプリケーションに組み込むことができる。
ReactDOM.render()は小さいものからアプリケーション全体まで独立したUIパーツに対して複数回呼び出すことができる。
通常Reactは単一コンポーネントをDOMにロードして使用するため、複数回呼び出すような使われ方はしない。
ReactがFacebookで使われている理由はこのReactDOM.render()があるからと考えてよいらしい。この機能があるからこそ少しずつアプリケーションを作成して既存のテンプレートやクライアントサイドコード と組合わせることが可能となっている。（といってもReactの根っこはFacebookなのだから自分たちのために使いやすいよう作っているのは当然と思えなくもないのだけれど…考え方が違うかな？）

React で文字列ベースのレンダーを置き換える

古いウェブアプリケーションによくあるパターン
　・DOMのまとまりを文字列として扱う
　・$el.html(htmlString) のような形で DOM に挿入する
こういったありがちなパターンの場所にReactを導入するのはぴったりで、文字列ベースのレンダーをReactコンポーネントに置き換えるだけでよい。

たとえばこれが

$('#container').html('<button id="btn">Say Hello</button>');
$('#btn').click(function() {
  alert('Hello!');
});

こうなる

function Button() {
  return <button id="btn">Say Hello</button>;
}

ReactDOM.render(
  <Button />,
  document.getElementById('container'),
  function() {
    $('#btn').click(function() {
      alert('Hello!');
    });
  }
);

置き換えがうまくいくと後はReactのルールに合わせて拡張、変更を進めていきやすい。
その時に活躍するのがReactDOM.render()で、変換したりしていくにつれて、呼び出しを階層の上のほうへ移動させていけるようになっていく。

今日はここまで。