[Sy] npmを使わずにReactの開発環境を構築する方法（CDNで配信されているReactとbabel-coreを利用）

2016/07/04

昨日、npmを使わずにJSXTransformer.jsでのReact開発環境構築について記事を書きました。それから少し調べてたら、もっと楽な方法がありました。。。

必要なファイルがすべてCDNで配信されてたので、それを読みこめばOKでした。

まずは昨日の記事にささっと目を通していただけると、話が理解しやすいかと思います。

⇒ [Sy] npmを使わずにReactの開発環境を構築する方法（オフィシャルサイトからダウンロード）

公式サイトを改めて見てみると・・・

記事公開後、さてnpmを使った環境構築でもしてみるかー、と公式サイトを何気なく見てると、トランスパイルに必要なbabel-coreがcloudflareで配信されてるじゃないですか。。。ちゃんと読めって感じですね。

⇒ Getting Started | React

さっそく試すことに。

非推奨のJSXTransformer.jsを使うのをやめて、babel-coreに切り替える

昨日の記事の最終的なindex.htmlはこうなってました。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
</head>
<body>
  <h1>Reactサンプル</h1>

  <div id="container"></div>

  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/JSXTransformer.js"></script>
  <script src="jsx/app.js" type="text/jsx"></script>
</body>
</html>

少し補足すると、ReactのコードにあるJSXは、そのままではJavaScriptとして実行できないので、一旦JavaScriptに変換してあげる必要があります。

そのための方法として、React v0.13 までは JSXTransformer.js というライブラリを読み込んで、リアルタイムにトランスパイル（JSX⇒JavaScript）するというものがありました。しかし v0.14 以降、JSXTransformer.jsを使ったトランスパイルは非推奨となり、代わりにBabelを使ってね というようなことが公式ブログを見ると書いてあります。

⇒ Deprecating JSTransform and react-tools | React

なので、上記コードは、

JSXTransformer.jsを外す
babel-coreを読み込むようにする
app.jsのtype属性をtext/babelにする

という修正を入れて、

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
</head>
<body>
  <h1>Reactサンプル</h1>

  <div id="container"></div>

  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script src="jsx/app.js" type="text/babel"></script>
</body>
</html>

とすることで推奨されている形にすることができます。問題なくJSXがトランスパイルされてHello, world!が画面に表示されるはずです。

さらにReactもCDNから

というかReact自体もCDNから使えるので、これが一番楽ですね。一つもダウンロードが必要ないです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Reactサンプル</title>
</head>
<body>
  <h1>Reactサンプル</h1>

  <div id="container"></div>

  <script src="https://fb.me/react-15.2.0.js"></script>      <- CDNから取得
  <script src="https://fb.me/react-dom-15.2.0.js"></script>  <- CDNから取得
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  <script src="jsx/app.js" type="text/babel"></script>
</body>
</html>