Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

React.jsその0002 scriptを外部ファイルに切り出す

制作 javascript reactjs

参考にさせて頂いたページ

いま最も注目のライブラリ「React.js」でシングルページアプリケーションを作ってみよう！【前編】（2/3）：CodeZine

バージョン

React v0.13.2

前回のreact_sample.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>

react_sample.jsの作成と記述内容

appディレクトリを作成して、その中にreact_sample.jsを作成した。
そのまま切り出してもよかったけど、ついでなのでcreateClassメソッドを使用した。
記述内容は以下の通り。

var App = React.createClass({
  render: function() {
    return (
      <h1>Hello, world!</h1>
    );
  }
});

React.render(
  <App></App>,
  document.getElementById('example')
);

今回のreact_sample.htmlの記述内容

script要素のタイプはtype="text/jsx"

<!DOCTYPE html>
<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
    <script type="text/jsx" src="app/react_sample.js"></script>
  </head>
  <body>
    <div id="example"></div>
  </body>
</html>