Syntax Error.

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

2016/07/03

通常 React の開発環境を作る場合、npm や bower といったパッケージマネージャを使う事になるかと思いますが、まだまだ npm って何？という人だっていると思うので、npm を使わないで環境を作る方法をまとめてみました。その他、ささっと React の挙動を見てみたい、という場合などにも良いかと。ただし、非推奨な部分もあるので、本格的な開発にはちゃんと npm 使いましょう。

2016/07/04追記

この記事よりもキレイで楽な方法があったので、別記事を書きました。（この記事を軽く読んでから続けて読んでもらうと経緯がわかりやすいかと）

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

準備

Webサーバ（Nginx, Apacheなど）が動いている環境を用意してください。

（以下、http://localhost/index.htmlというURLでの作業を想定して書いてます）

react.jsとreact-dom.jsをダウンロードしてくる

オフィシャルサイトへ行き、ダウンロードします。

⇒ Downloads | React

Individual Downloads の development のところにあるreact.jsとreact-dom.jsのリンクをクリックするとダウンロードできます。

React環境構築 オフィシャルページからダウンロード

この記事を書いている時点（2016年7月5日）ではバージョンは15.2.0で、react.jsのサイズは691KB、react-dom.jsのサイズは1KBくらいでした。

Reactのバージョン

react.jsのバージョンは、0.13、0.14とマイナーバージョンとして扱われてましたが、0.15となるタイミングでメジャーバージョンに切り替えて、15.0としてリリースされています。

react-dom.jsについて

v0.14から、react.jsからDOMを扱う部分がreact-dom.jsとして分離されています。なのでv0.13以前の記事にはreact-dom.jsを読み込むという記載はないですが、0.14以降は必要となります。

HTMLから react.js と react-dom.js を読み込む

今回、ページを作成するためのドキュメントルートをRootディレクトリとします。まずは、

  1. Rootディレクトリにindex.htmlを作成（とりあえず中身は空でもOK）
  2. JavaScriptファイル用のディレクトリjs/を作成
  3. js/に先ほどダウンロードしてきたreact.jsとreact-dom.jsを置く

ここまでやります。すると以下の様な階層になります。

Root/
+ - index.html
+ - js/
    + - react.js
    + - react-dom.js

続いて、index.htmlを編集して、react.jsとreact-dom.jsを読み込みます。

<!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>
</body>
</html>

ここまでできたら、index.htmlをブラウザで表示してみます。http://localhost/index.htmlといった感じでURLを入力して表示してください。

以下のようにHTMLの内容が表示されて、Developer toolsのコンソールにエラーが出ていなければ読み込み成功です。

React環境構築 react.jsとreact-dom.jsの読み込み React環境構築 react.jsとreact-dom.jsの読み込み（Developer Tools）

もし、

GET http://localhost/js/react.js
net::ERR_FILE_NOT_FOUND

のような赤文字のエラーメッセージが出ていたら、react.jsを置いた場所が間違っているか、HTMLのscriptタグで指定しているreact.jsのパスが間違っている可能性があるので、上のディレクトリの構成とHTMLファイルの内容と違うところがないか確認してください。

また、これとは別のエラーで、

Uncaught TypeError: Cannot read property
'__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined

というものがreact-dom.jsで出ていたら、react.jsがきちんと読み込めていないか、index.htmlにてreact.jsより先にreact-dom.jsを読み込むタグを書いてる可能性があります。どちらにしてもindex.htmlのscriptタグを見なおしてみてください。

react-devtoolsについて

先ほどのindex.html表示時にコンソールに出力されている「Download the React DevTools and use an HTTP server (instead of a file: URL) for a better development experience: https://fb.me/react-devtools」というメッセージですが、これはReactでの開発に便利なChrome拡張をインストールすることを勧めているものです。とりあえず今回はインストールせずに進めます。

JSXを使ったReactのコードを書く

簡単な例として、Hello, world!という文章をReactを使って先ほどのindex.htmlに表示してみます。

新しくRootディレクトリの下に、jsx/ディレクトリを作り、その中にapp.jsを以下の内容で保存します。

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

このコードは、「containerの子要素としてHello, world!というpタグを作ってね」という意味になります。

app.jsを追加して、できあがる階層はこうなります。

Root/
+ - index.html
+ - js/
|   + - react.js
|   + - react-dom.js
+ - jsx/               <- jsxディレクトリ作成
    + - app.js         <- app.jsを配置

ファイルを配置できたら、index.htmlからjsx/app.jsを読み込みます。

<!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="jsx/app.js"></script>        <- app.jsを読み込む
</body>
</html>

JSXをJavaScriptに変換する（JSXTransformerの利用）

ここまでで必要なコードはすべて準備できました。

が、試しにindex.htmlを再読み込みしてみても、「bodyタグの子要素としてHello, world!というpタグを作ってね」という、やりたかったことができていないのが分かるかと思います。

なぜかというと、 JSXで書かれたコードをきちんと実行するためには、JavaScriptに変換してあげる必要がある からです。

ということで、いくつかJSXをJavaScriptに変換（トランスパイルと言います）する方法があるのですが、今回は一番簡単なJSXTransformer.jsというライブラリを使って行います。

JSXTransformer.jsを使った変換は非推奨になりました。

React v0.13 までは、ここで紹介する JSXTransformer.js を使ったり、 react-tools という npm でインストールできるパッケージを使って事前にトランスパイルする方法でも良かったみたいですが、v0.14からはこの両方ともに非推奨となっており、代わりに Babel を使う方法が推奨されています。今回は npm に触れずに説明したかったので、Babel を使わずに JSXTransformer.js を使っていますが、あくまでも簡易的に React を試すという用途だけに留めてください。普通に使っていたらうまく動かない可能性があります。

JSTransformer.jsはもう公式にはダウンロードページがなさそうなので、以下URLから落としてください。

⇒ JSXTransformer.js v0.13.3

ダウンロードしたら、js/JSXTransformer.jsとして配置し、index.htmlで読み込みます。app.jsよりも先にJSXTransformer.jsを読み込むようにしてください。

また、app.jsをJSXからJavaScriptに変換するために、type="text/jsx"と属性を追加してあげます。これでJSXTransformer.jsがapp.jsをトランスパイルしてくれます。

Root/
+ - index.html
+ - js/
|   + - react.js
|   + - react-dom.js
|   + - JSXTransformer.js    <- 追加
+ - jsx/
    + - app.js

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

  <script src="js/react.js"></script>
  <script src="js/react-dom.js"></script>
  <script src="js/JSXTransformer.js"></script>         <- app.jsの前に追記
  <script src="jsx/app.js" type="text/jsx"></script>   <- type属性を追加
</body>
</html>

index.htmlを再読み込み

index.htmlを再読み込みすると、以下のようにHello, world!と表示されるはずです。

React環境構築 JSXTransformer.jsを使ってJSXをJavaScriptに変換

Developer Tools で要素を見てみると、ちゃんとcontainerにpタグが生成されているのがわかります。

React環境構築 JSXTransformer.jsを使ってJSXをJavaScriptに変換（Developer Tools）

こうなってますね。

・
・
<body>
  <h1>Reactサンプル</h1>
  <div id="container">
    <p data-reactroot>Hello, world!</p>  <- Reactによって追加された要素
  </div>
・
・

以上、npmを使わない方法での React の環境構築の手順でした。

ひとこと

なんとか npm を使わずに React のサンプルが動きましたが、上にも書いたとおりJSXTransformer.jsは非推奨になったので、なるべく早く npm や bower の環境を整えて、Babel を使う方法に切り替えないとつらくなってくるかもしれません。

Good ! Bad ...
Syntax Error.