Browse By

入門 React.js その3 Hello world!してみよう

Pocket

入門 React.js その3 Hello world!してみよう

React.jsの導入

React.jsを使用するにはReact.js本体を読み込む必要があります。
htmlのheadタグ内に下記の記述を追加しましょう。ローカルに保存してパスを指定しても構いません。

  <head>
    <script src="http://fb.me/react-0.13.1.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
  </head>

※JSXを有効にするためJSXTransformer-0.13.1.jsも読み込んでいます。

現時点での最新バージョンは0.13.1です。下記のページから最新版のダウンロードができます。
https://facebook.github.io/react/downloads.html

Hellow world!

では実際にReact.jsを動かしてHello world!と表示させてみましょう。
記述は以下のとおりです。

<!DOCTYPE html>
<html>
  <head>
    <script src="http://fb.me/react-0.13.1.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.13.1.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

上記のサンプルはこちら

React.jsが動作してHello world!が表示されたことを確認出来ました。
React.render()は、フレームワークを開始して、第二引数として与えられたDOM要素の中に第一引数のマークアップされたHello world!を挿入します。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>