React.jsの理屈は後回し。とりあえずコードを書いてみたい。jQueryが古いと言われているのらしいので「こう書けばこうなる」くらいをやってみたい。
React.jsが来るらしい
jQueryで表面のベーシックなことだけしていたタイプの私には、React.jsは大変ハードルが高いです。検索して出てくる記事をいくつか読んでみたものの、そもそもの考え方から変えていかなければならないんだなと感じました。しかし、時間は待ってくれないので、もうHTMLにソースを書いてみようと思います。強引にやっていきましょう。
※ちなみにこのReact.jsですが、HTML5が使えるブラウザ環境である必要があります。
jsなのでまずはライブラリを読み込む
さてやっていきましょう。ここはjQueryと同じですね。ライブラリを読み込みます。ローカルに落として読み込んでもOK。|
1 2 |
<script src="http://fb.me/react-0.13.3.js"></script> <script src="http://fb.me/JSXTransformer-0.13.3.js"></script> |
文字を出力する
まずは王道「Hello World.」を出力してみましょう。[ HTML ]
HTMLソースはこう書きます。
|
1 |
<div id="textInsertArea"><!-- ここに文字が入ります --></div> |
[ React.js ]
scriptタグは、「type=”text/jsx“」になるので注意してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<script type="text/jsx"> //1：出力する内容を定義 var HelloWorld = React.createClass({ render:function(){ return( <p>Hello World.</p> ); } }); //2：1で定義した内容をdivに出力 var textSet = React.render(<HelloWorld />, document.getElementById('textInsertArea')); </script> |
[1]で出力する内容を定義し、[2]で実際に出力するという感じらしいです。2ステップでできました。.createClass()で何かしているらしい…
デモ
[ jQuery ]
ちなみに参考までに。上記と同じ内容をjQueryで書くとこうなります。
|
1 2 3 4 5 |
<script type="text/javascript"> $(function() { $('#textInsertArea').html('<p>Hello World.</p>'); }); </script> |
