React入門
JSFiddle
Reactを試す最も簡単な方法は、下記のJSFiddleの「Hello World」のサンプルを触ってみることです。
スターターキット
Reactに入門するために、スターターキットをダウンロードします。
スターターキットのルート・ディレクトリに、下記の内容でhelloworld.htmlを作成します。
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
JavaScript内部のXML文法はJSXと呼ばれます。JSX文法の詳細についてはリンク先を確認して下さい。
バニラ(素の/生の)JavaScriptへ変換するために<script type="text/jsx">を使用して、
JSXTransformer.jsを含めることで、ブラウザ内で実際に変換が実行されるようにします。
ファイルの分割
あなたのReact JSXコードを複数のファイルに分割することが出来ます。
下記のsrc/helloworld.jsを作成してみましょう。
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
次にこれをhelloworld.htmlから参照します。
<script type="text/jsx" src="src/helloworld.js"></script>
オフラインでの変換
最初にコマンドラインツールをインストールします。(npmが必要です)
npm install -g react-tools
次にsrc/helloworld.jsファイルを素のJavaScriptへ変換します。
jsx --watch src/ build/
build/helloworld.jsのファイルは、あなたが変更を加える度に自動生成されます。
React.render(
React.createElement('h1', null, 'Hello, world!'),
document.getElementById('example')
);
下記のようにHTMLファイルを更新してみてください。
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="build/react.js"></script>
<!-- No need for JSXTransformer! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
CommonJSが必要?
もし、browserify、 webpack、 またはその他のCommonJS互換のモジュールシステムを使用したいのであれば、 react npm パッケージを使用して下さい。 また、JSXビルドツールはほとんどのパッケージシステム(CommonJSだけで無く)へ、非常に簡単に統合することが可能です。
次のステップ
更に学ぶために、チュートリアルとスターターキットのexamplesディレクトリ内のその他の例をチェックして下さい。
また、我々はワークフロー、UIコンポーネント、ルーティング、データ管理等を支援するwikiを所有しています。
Reactへようこそ！グッドラック！