React 始めました - Hello React

はじめに

npm が使えるようになったので、早速 React の Hello world をやりたいと思います。
npm コマンド使えない人は、ここ見て環境作るといいと思います。 arfyasu.hatenablog.com

手順は、React の Getting Started のページに沿って進めます。 facebook.github.io

Reactって何？美味しいの？って言う人は、以下の記事を読むといいと思います。 html5experts.jp

環境

Mac OS X Yosemite 10.10.5
npm 3.3.12
React 0.14.7

開発準備

まずは、React をインストールして開発環境を作ります。

package.json 作成

package.json はプロジェクトで使うパッケージを管理するためのファイルです。
Rails の Gemfile みたいなものです。

npm install を実行すると、package.json に記載されているパッケージをインストールしてくれます。

package.json は init コマンドで作成します。
途中、いくつか質問されるので適当に答えますｗ

$ npm init
...
Press ^C at any time to quit.
name: (hello_world)
version: (1.0.0)
description: hello world
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

{
  "name": "hello_world",
  "version": "1.0.0",
  "description": "hello world",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

ちなみに、package.json を作らずにインストールすると以下のような警告が出ます。

npm WARN ENOENT ENOENT: no such file or directory, open '/path/to/package.json'

React のインストール

package.json が作成できたので、React をインストールします。

$ npm install --save react react-dom

インストールが完了すると、node_modules というディレクトリが作成されその中にパッケージが配置されています。

--save オプションをつけると、以下のように package.json にパッケージの情報が追記されます。

{
  ...
  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  }
}

Hello React

1. helloworld.html

以下の内容で helloworld.html を作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="node_modules/react/dist/react.js"></script>
  <script src="node_modules/react-dom/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
  <h1>Hello, world!</h1>,
      document.getElementById('example')
  );
</script>
</body>
</html>

ブラウザで開くと、以下のページが表示されるはずです。 f:id:kanz-labs:20160130104459p:plain

2. html から js を別ファイルに分離

helloworld.html から React のコードを抜き出して src/helloworld.js を作成します。

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

helloworld.html から上記コードを削除し、src/helloworld.js を読み込みます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="node_modules/react/dist/react.js"></script>
  <script src="node_modules/react-dom/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="src/helloworld.js" type="text/babel"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>

Babel でトランスパイル

Babel を使って、helloworld.js を plain なJSとしてブラウザが読み込めるコードに変換します。

Babel は、ES6からES5のトランスパイル（変換）を行うことができるツールです。
と言いつつ、それ以上のことはあまり分かっていなくて、というか絶賛勉強中ですｗ

ググるとたくさん出てきますが、このページが分かりやすかったです。 html5experts.jp

Babel のインストール

npm で Babel をインストールします。
-g オプションを使い、グローバルなパッケージとしてインストールします。

$ npm install -g babel-cli
$ npm install babel-preset-react

コード変換

babel コマンドを使って、src/helloworld.js をトランスパイルします。
変換後のファイルは、build ディレクトリに作成されます。

$ babel --presets react src --watch --out-dir build

--watch オプションをつけると、変更を検知してトランスパイルしてくれます。
付けずに実行すると変換は1度のみです。

下記が変換されたコード(build/helloworld.js)です。

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

helloworld.html の修正

helloworld.html で変換されたファイルを読み込むように変更します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello React!</title>
  <script src="node_modules/react/dist/react.js"></script>
  <script src="node_modules/react-dom/dist/react-dom.js"></script>
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>

気をつける点は以下の2つです。

トランスパイルしたので、Babel の browser.min.js は不要なので削除します。

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

build/helloworld.js の挿入位置

<head>
  ...
  <script src="build/helloworld.js"></script>
</head>

のように、head に入れると以下のエラーで動きません(´・ω・｀)

Error: _registerComponent(...): Target container is not a DOM element.

操作対象のDOM要素以降に記述します。

まとめ

ということで、React で Hello world をやってみました。
npm や Babel を知っていればそんな躓くこともなかったんでしょうけど、ここまでやるのに結構な時間がかかりました。

npm も Babel も、当然 React もまだ全然理解が不十分。
っていうか、色々とパッケージが多すぎて覚えるの大変だわｗ

当面の目標は react-rails を使うことなので先は長いですが、少しづつ使いながら覚えていくしか無いかなって感じですね。

今回使ったソースは以下です。
https://github.com/arfyasu/react-hello-world

blog @arfyasu

プログラミングとか趣味のこととか