データの表示
UIを使用して行う事が出来る最も基本的なことは、データを表示することです。 Reactはデータ表示を簡単にし、データ変更時に自動的にインターフェースが最新に保たれるようにします。
はじめに
簡単な例を見てみましょう。
下記コードが記述されたhello-react.htmlファイルを作成して下さい。
<!DOCTYPE html>
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
// ** Your code goes here! **
</script>
</body>
</html>
以降、このドキュメントではJavaScriptコードにのみフォーカスし、 それを上記のコードをテンプレートとみなして挿入されるものとします。 下記のJSXを、上記のプレースホルダのコメントと置き換えて下さい。
var HelloWorld = React.createClass({
render: function() {
return (
<p>
Hello, <input type="text" placeholder="Your name here" />!
It is {this.props.date.toTimeString()}
</p>
);
}
});
setInterval(function() {
React.render(
<HelloWorld date={new Date()} />,
document.getElementById('example')
);
}, 500);
Reactive(反応的)な更新
ブラウザでhello-react.htmlを開き、テキスト・フィールドに名前を入力して下さい。
ReactがUI内で時間を表す文字列のみを変更し、
それとは別に配置したテキスト・フィールドは、このための挙動を管理するコードを書かずとも、
そのまま残ることに注目して下さい。
開発者のためにReactはこのような解決をし、正しく処理してくれます。
私達がこれを解決出来るようにするには、必要が無い限りReactがDOMを操作しないようにする事です。 処理の速い内部の擬似DOMを使用して差分を取り出し、最も効果的なDOM変更を算出してくれます。
このコンポーネントへの入力は、"properties"(プロパティ)を短くして「props」と呼ばれています。
それらはJSX文法内では属性として渡されます。
また、コンポーネント内にあるこれらpropsは不変のものとして考える必要があります。
つまり、this.propsに書き込みすることは出来ません。
コンポーネントは関数のようなもの
Reactのコンポーネントは非常にシンプルです。
これらは、porpsとstate(詳細は後述)を受け取りHTMLを描画するシンプルな関数として考えることが可能です。
このようにシンプルであるため、コンポーネントの構造の理解を非常に簡単にしてくれます。
注意: Reactのコンポーネントが描画出来るのは単一のルート・ノードのみという制約があります。 もし、複数のノードを返したい場合は、それらを単一のルートに囲まなければいけません。
JSX文法
我々は、"テンプレート"と"表示ロジック"よりも、関係性を分離する事こそがコンポーネントの正しい使い方であると確信しています。 また、マークアップとそれを生成するコードは、お互いに密接に結びついていると考えています。 加えて、表示ロジックが非常に複雑になってしまうケースが多く、それを表すテンプレート言語は煩雑になります。
この問題に対する最善策は、HTMLとコンポーネントツリーを、実際のプログラミング言語の表現力の全てを行使してUIを構築し、 JavaScriptコードから動的に生成することであると発見しました。
これをより簡単にするために、我々はReactのツリー・ノードを作成するための、 とてもシンプルで任意に選択可能なHTML風の文法を追加しました。
JSXはHTML文法を使用してJavaScriptオブジェクトを作成出来るようにしてくれます。 Reactで純粋にJavaScriptを使用してリンクを生成する場合は、次のように記述します。
React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')
JSXを使うと次のようになります。
<a href="https://facebook.github.io/react/">Hello!</a>
これがReactアプリケーションの構築を簡単にしてくれること、デザイナーがこちらの文法を好んでくれる傾向があることを理解していますが、 人それぞれにワークフローがあるので、Reactを使用するためにJSXを必須にはしていません。
JSXはとても小規模なものです。 JSXについてより詳しく知りたければ、JSXの詳細を参照して下さい。 または、我々のライブJSXコンパイラで変換の挙動を確認してみて下さい。
JSXはHTMLに似ていますが、全く同じというわけではありません。 異なるポイントについては、JSXの嵌まりどころを参照して下さい。
JSXを使い始める簡単な方法は、ブラウザ内でJSXTransformerを使用することです。
ただし、本環境でこれを使用しないことを強くお勧めします。
我々が用意したreact-toolsパッケージのコマンドラインを使用して、
コードを予めコンパイルしておく(プリコンパイル)ことが可能です。
JSX無しのReact
JSXは完全に任意(オプショナル)であり、ReactでJSXを使用しなければいけないという事はありません。
タグ名またはコンポーネント、プロパティオブジェクト、
可変の任意の子の引数を受け取るReact.createElementを使用して、
素のJavaScriptのReact要素を作成することが可能です。
var child1 = React.createElement('li', null, 'First Text Content');
var child2 = React.createElement('li', null, 'Second Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
React.render(root, document.getElementById('example'));
開発の都合に合わせて、カスタム・コンポーネントから要素を作成するための、ファクトリー関数の略記(ショートハンド)の作成が可能です。
var Factory = React.createFactory(ComponentClass);
...
var root = Factory({ custom: 'prop' });
React.render(root, document.getElementById('example'));
Reactには予め、共通のHTMLタグ用に組み込みファクトリーが実装されています。
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);