0%

React入門 - Part1: Getting Started

ReactはFacebookがオープンソースで開発しているJavaScripライブラリです。ドキュメントサイトのGetting StartedTutorialから勉強をはじめます。きっかけはClojureを勉強していて、OmというReactのClojureScriptインタフェースを紹介したInfoQの記事で興味を持ちました。Web UIのデータバインディングをリアクティブに書く方法を取り入れたいです。

Reactの特徴

Reactのページに書いてある特徴を簡単にまとめます。

  • JUST THE UI
    MVCのVだけComponentとして提供する

  • VIRTUAL DOM
    VirtualDOMを使い差分だけ更新するため高速に動作する

  • DATA FLOW
    一方向のリアクティブなデータバインディング

  • JSX
    JavaScript内にXML風に記述でき、DOM構造がわかりやすい

開発用コンテナ

JavaScriptの開発環境はStrongLoopを追加したmasato/baseimageイメージを使います。insecure_keyphusion/baseimage-dockerからダウンロードして使います。

$ wget -P ~/.ssh https://raw.githubusercontent.com/phusion/baseimage-docker/master/image/insecure_key
$ chmod 600 ~/.ssh/insecure_key
$ docker run -d -it --name dev masato/baseimage /sbin/my_init bash
$ IP_ADDRESS=$(docker inspect --format="{{ .NetworkSettings.IPAddress }}" dev)
$ ssh -A docker@$IP_ADDRESS -o IdentitiesOnly=yes -i ~/.ssh/insecure_key

Node.jsの準備

SSHで接続後、nvmを有効にしてnodeとnpmコマンドが使えるようにします。

$ source ~/.profile
$ nvm use v0.10
Now using node v0.10.35
$ npm --version
2.1.16

Emacsの設定

JSX用のEmacsの設定を、Emacs - Setup JSX mode, JSX Syntax checking and Suggestionを参考にして、web-modeとflycheckをCaskファイルに追加します。

;; web-mode
(depends-on "web-mode")
(depends-on "flycheck")
;; javascript
(depends-on "js2-mode")
(depends-on "ac-js2")

npmコマンドでjsxhintパッケージをインストールします。

$ npm install -g jsxhint

caskコマンドでパッケージをインストールします。

$ cd ~/.emacs.d
$ cask install

JSX用のweb-modeとflucheckの設定を追加します。

~/.emacs.d/inits/10-jsx-flycheck.el
(add-to-list 'auto-mode-alist '("\\.jsx$" . web-mode))
(defadvice web-mode-highlight-part (around tweak-jsx activate)
(if (equal web-mode-content-type "jsx")
(let ((web-mode-enable-part-face nil))
ad-do-it)
ad-do-it))

(require 'flycheck)
(flycheck-define-checker jsxhint-checker
"A JSX syntax and style checker based on JSXHint."

:command ("jsxhint" source)
:error-patterns
((error line-start (1+ nonl) ": line " line ", col " column ", " (message) line-end))
:modes (web-mode))
(add-hook 'web-mode-hook
(lambda ()
(when (equal web-mode-content-type "jsx")
;; enable flycheck
(flycheck-select-checker 'jsxhint-checker)
(flycheck-mode))))

js2-modeの設定をします。JavaScriptファイルは2タブになるようにします。

~/.emacs.d/inits/11-js2-mode.el
(autoload 'js2-mode "js2-mode" nil t)
(add-to-list 'auto-mode-alist '("\\.js$" . js2-mode))
(add-hook 'js2-mode-hook
'(lambda ()
(setq js2-basic-offset 2)))

(add-hook 'js-mode-hook 'js2-minor-mode)
(add-hook 'js2-mode-hook 'ac-js2-mode)

Hello World

ライブラリはCDNから取得してかんたんにHello Worldをはじめます。最初にプロジェクトを作成します。

$ mkdir ~/helloworld
$ cd !$

index.htmlを作成します。JSXをオンラインで変換するためにJSXTransformer-0.12.2.jsをロードします。JSXを記述したJavaScriptファイルは、text/jsxを指定してロードすると自動的に変換してくれます。

~/helloworld/index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="helloworld.jsx"></script>
</head>
<body>
<div id="example"></div>
</body>
</html>

<h1>要素のところがJSXです。今回はComponentを作成していないので、Top Levelコンポーネントに入ります。

~/helloworld/helloworld.jsx
React.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);

Webサーバーを起動して確認

プロジェクトのディレクトリに移動して、PythonのSimpleHTTPServerを起動します。

$ cd ~/helloworld
$ python -m SimpleHTTPServer 8080
Serving HTTP on 0.0.0.0 port 8080 ...

IDCFクラウド上の仮装マシンにDocker開発環境があります。外部からコンテナに接続するために、ngrokを使ってトンネルをつくります。

$ docker inspect --format="&#123;&#123; .NetworkSettings.IPAddress }}" dev
172.17.1.157
$ docker run -it --rm wizardapps/ngrok:latest ngrok 172.17.1.157:8080

ngrokで取得したURLをブラウザで確認するとHello World!が表示されました。56110a8cはランダムで変わります。

http://56110a8c.ngrok.com/

ChromeのReact Developer Tools

Chromeの場合、React Developer Toolsをインストールすると、Reactのデバッグが便利になります。デベロッパーツールにReactというタブが追加され、以下のようにComponentsを確認することができます。