tyoshikawa1106のブログ

- Force.com Developer Blog -

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

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

f:id:tyoshikawa1106:20160404122325p:plain

A JavaScript library for building user interfaces | React


Rectに必要なファイルはダウンロードサイトから取得できます。
f:id:tyoshikawa1106:20160404122514p:plain


Zipを解答したらこんな感じ。
f:id:tyoshikawa1106:20160404122740p:plain


ファイルがたくさんありますが、exampleフォルダの方はサンプルコードです。
f:id:tyoshikawa1106:20160404123401p:plain


実際に動かして確認できるようになっていました。
f:id:tyoshikawa1106:20160404123438p:plain

チュートリアル

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/

f:id:tyoshikawa1106:20160404132525p:plain


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

元のファイル (src/helloworld.js)
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);
変換後のファイル (build/helloworld.js)
ReactDOM.render(
  React.createElement("h1", null, "Hello, world!"),
  document.getElementById('example')
);


実際に読み込むのはbuildフォルダの方です。

困ったこと

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

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

$ npm install --save react react-dom
利用方法
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);

Bower

$ bower install --save react


Bowerでインストールしたときのファイル構成はこんな感じです。ダウンロードサイトと同じように必要なファイルが用意できました。
f:id:tyoshikawa1106:20160404132912p:plain