ReactのHello Worldを試してみました

チュートリアル

Reactのサイトにはチュートリアルが用意されているので、これでHello Worldまで確認できます

次のコードは何かなと思ったのですがBabelをつかって『JSX syntax』を利用できるようにするためのものだと思います。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

Reactの開発で必要になるコマンドが下記を実行すると利用できるようになります。

$ npm install -g react-tools

JSXコマンドをつかってJSファイルの内容をReactで利用できるように変換します。

$ jsx --watch src/ build/

※srcのファイルをbuildフォルダに変換して移動する感じ

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

ReactDOM.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);

困ったこと

チュートリアルのサンプルを動かそうとして次のエラーが発生しました。

Uncaught ReferenceError: ReactDOM is not defined

これはなんでだろう調べてみると次のサイトに解決方法が紹介されていました。

『react-dom.js』が必要だったみたいです。

<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>

これで先程のエラーがなくなりました。

まとめ

CDNでBabelを使う方法はよくわからなかったのですが、JSXコマンドでビルドする方法はうまくいきました。動いた時のサンプルです。

その他のダウンロード方法

$ npm install --save react react-dom

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

$ bower install --save react