読者です 読者をやめる 読者になる 読者になる

Djangoroidの奮闘記

python,django,angularJS1~三十路過ぎたプログラマーの奮闘記

Reactに挑戦してみる 7

概要

Reactに挑戦してみる7。この本は、バイブルになりそうな予感。

参考書籍

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

JSXを別のファイルに保存して動かす

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Browser Transpiler Example</title>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel" src="separate.js"></script>
  </body>
</html>

separate.jsを読み込むようにしてある。この辺はdjangoと似てるな。 次に、separate.jsを作成する。

var SeparateJSX = React.createClass({
    render: function(){
        return(
            <h2>React with JSX Transpiler Speaking!</h2>
        );
    }
});

ReactDOM.render(
    <SeparateJSX />,
    document.getElementById('content')
);

chrome以外ではこれで動いた! ただ、chromeは、file->fileのアクセスが禁止されてるぽくて、表示されない。まあこの辺は、djangoではできてるから大丈夫なはず。