ababup1192
2/24/2015 - 5:42 AM

React.js 公式ページ(http://facebook.github.io/react/index.html) なぞり 01 HelloWorld

React.js 公式ページ(http://facebook.github.io/react/index.html) なぞり 01 HelloWorld

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.min.js"></script>
    <!-- JSXを扱うために必要 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="example2"></div>
    <!-- JSXを含むjsのtypeは、text/jsxとなる。 -->
    <script src="hello.js" type="text/jsx"></script>
  </body>
</html>
hello.js
content_copyfile_download
// DOMを取得して、そこにXMLによる描画。JavaScriptの中にXMLをJSXと呼んでいるらしい。
React.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

// 別な描画を複数書いた場合は、最後のものが反映される。
/*
React.render(
  <h1>Hello, world2!</h1>,
  document.getElementById('example')
);
*/

// JSXを使わずに、jsで描画することも可能。
// JSXを使わないため、「JSXTransformer.js」は読み込む必要がない。
React.render(
  React.createElement('h1', null, 'こんにちは、世界！'),
  document.getElementById('example2')
);