Posted at

Facebook製JSフレームワークReactまとめVol.1 -Hello, World!-

More than 5 years have passed since last update.

Reactのドキュメントを気が続き限りまとめていく。


Reactとは

公式ページからの引用と抜粋


facebook.github.io/react

ReactはfacebookやInstagramで開発されたインターフェース用Javascriptライブラリで、データの変化が多い大規模アプリケーションを構築する際に発生する問題を解決するために作成された。  

ReactはMVCフレームワークではなく、一般的にMVCでいうVとして使用される。

多くのフレームワークで使用されているテンプレートを使用することなく、コンポーネントにまで分解してインターフェースを構築する手法をとっていて、これによって拡張やメンテナンスが簡単となった。


Fluxと呼ばれるアーキテクチャに基づいているらしいが、これはまた今度。

とりあえずはコードで理解したほうが早いと思う。


Hello, world!

<!DOCTYPE html>

<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/react.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.11.2/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>


結果

Hello, world!


説明

ReactはJSXというシンタックスを使用することを推奨しているのでJSXを使用するが、

これはそんなにややこしいものではなく、XML的な記法で直感的。

ただ、このJSXをコンパイルするためにJSXTransformer.jsを使うのだが、

JSXのパースに必要なコメント文/** @jsx React.DOM */を書かなければならない。

そして、React.renderComponent()によって<div id="example"></div>の中に<h1>Hello, world!</h1>がレンダリングされる。

React.renderComponent(

<h1>Hello, world!</h1>,
document.getElementById('example')
);


モジュール化

/** @jsx React.DOM */

var Name = React.createClass({
render: function() {
return (
<p>Mr. hoge</p>
);
}
});

var HelloWorld = React.createClass({
render: function() {
return (
<div>
<p>Hello, World!</p>
<Name/>
</div>
);
}
});

React.renderComponent(
<HelloWorld/>,
document.getElementById('example')
);


結果

Hello, World!

Mr. hoge

コンポーネント(いわゆるモジュール)はReact.createClass()で作成し、レンダリングするメソッドrender()の返り値にテンプレートを記述する。


モジュールはネストすることが出来て、親となる要素のコンポーネントに子コンポーネントを代入した変数をJSXのシンタックスで記述すれば良い。

今はNameHelloWorldの中にレンダリングされ、それがさらにdiv#exampleの中にレンダリングされている感じ。


JSXシンタックス

ReactでXMLライクなJSXを使用する理由として以下の3つがあげられている。


  • DOMの構造を視覚的に表現しやすい

  • デザイナーでも簡単にいじれる

  • MXMLやXAMLを使ったことがある人に馴染みがある

CommentBox(プロパティpropがhogeという値を持っているとする)

-CommentList

というような構成で、CommentBoxの子要素にCommentListがある場合、以下の様な記述になる。

<CommentBox prop={hoge}><CommentList/><CommentBox>

視覚的にCommentListがCommentBoxに内包されていることがわかると思う。


また、注意する点として、<Parent><Child/></Parent>のように、子要素を持っていない場合(ここでいうChild)は<Child>ではなく<Child/>としなければならない。


コンポーネントのプロパティ

/** @jsx React.DOM */

var Name = React.createClass({
render: function() {
return (
//プロパティを代入する
<p>Mr. {this.props.name} from {this.props.country}</p>
);
}
});

var HelloWorld = React.createClass({
render: function() {
return (
<div>
<p>Hello, World!</p>
//コンポーネントを作成する
<Name name={'Hoge'} country={'Japan'}/>
<Name name={'Bar'} country={'France'}/>
</div>
);
}
});

React.renderComponent(
<HelloWorld/>,
document.getElementById('example')
);


結果

Hello, World!

Mr. Hoge from Japan
Mr. Bar from France

先程も説明したが、コンポーネントに何らかの値を持たせたい場合はコンポーネントの属性にプロパティ名={値}を付け加えれば良い。


このプロパティはコンポーネントのオブジェクトpropsに格納されるため、this.props.プロパティ名でアクセスできる。


参考資料

http://facebook.github.io/react/docs/why-react.html

http://facebook.github.io/react/blog/2013/06/05/why-react.html

http://facebook.github.io/react/docs/getting-started.html

http://facebook.github.io/react/docs/tutorial.html

http://facebook.github.io/react/docs/jsx-in-depth.html

Reactを使ったアプリケーション

http://qiita.com/ytakzk/items/bc317c786fcdd0612498