React.jsの簡単な導入方法

React.jsの導入方法で嵌ってしまったのでメモ。

npmとか使うと初心者には厳しいので、CDNを使いました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@latest/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
  </body>
</html>

こんな感じで書けば、すぐ使えます。

簡単に導入できる方法を見つけるまでが大変ですね…。

やっぱりまだまだ情報が少ない。非フロントエンドにとってはハードルは高いかな。

ついでにHello Worldをしてみましょう。

  <body>
    <div id="container"></div>
    <script type="text/babel">
      // このなかに書いていく
    </script>
  </body>

Reactの中身。

    var Hello = React.createClass({
        render: function(){
            return <div>Hello {this.props.name}</div>;
        }
    });
    ReactDOM.render(<Hello name="World" />, document.getElementById('container'));

最後の行、React.renderだと動かなかったけど、ReactDOMにしたら表示されました。

Hitasura JS

ただひたすらJavaScriptのコードを載せるためのブログ。たまにHTML、CSS、PHPも。

React.jsの簡単な導入方法