Reactに挑戦してみる 7
概要
Reactに挑戦してみる7。この本は、バイブルになりそうな予感。
参考書籍
WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用
- 作者: 柴田文彦
- 出版社/メーカー: インプレス
- 発売日: 2016/11/25
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
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ではできてるから大丈夫なはず。
