React.js を 使うまで

コマンドラインツールをインストール

MacBook-Pro:~ user$ npm install -g react-tools
npm WARN deprecated react-tools@0.13.3: react-tools is deprecated. For more information, visit https://fb.me/react-tools-deprecated
/usr/local/bin/jsx -> /usr/local/lib/node_modules/react-tools/bin/jsx
/usr/local/lib
└─┬ react-tools@0.13.3
  ├─┬ commoner@0.10.8
  │ ├── commander@2.11.0
  │ ├─┬ detective@4.5.0
  │ │ ├── acorn@4.0.13
  │ │ └── defined@1.0.0
  │ ├─┬ glob@5.0.15
  │ │ ├─┬ inflight@1.0.6
  │ │ │ └── wrappy@1.0.2
  │ │ ├── inherits@2.0.3
  │ │ ├─┬ minimatch@3.0.4
  │ │ │ └─┬ brace-expansion@1.1.8
  │ │ │   ├── balanced-match@1.0.0
  │ │ │   └── concat-map@0.0.1
  │ │ ├── once@1.4.0
  │ │ └── path-is-absolute@1.0.1
  │ ├── graceful-fs@4.1.11
  │ ├── iconv-lite@0.4.19
  │ ├─┬ mkdirp@0.5.1
  │ │ └── minimist@0.0.8
  │ ├── private@0.1.8
  │ ├── q@1.5.1
  │ └─┬ recast@0.11.23
  │   ├── ast-types@0.9.6
  │   ├── esprima@3.1.3
  │   └── source-map@0.5.7
  └─┬ jstransform@10.1.0
    ├── base62@0.1.1
    ├── esprima-fb@13001.1001.0-dev-harmony-fb
    └─┬ source-map@0.1.31
      └── amdefine@1.0.1

作成したjsファイル（src/main.js）を、素のJavaScriptへ変換する

MacBook-Pro:~ user$ cd /work/reactPJ
MacBook-Pro:reactPJ user$ jsx --watch src/ build/
built Module("main")
["main"]

ビルドされたjsファイルが、新規作成された build ディレクトリに格納される
（build/main.js）

今後は、変更すると自動的にビルドされるようになるらしい。

htmlファイルから呼び出してみる

今まで src 下の main.js を呼び出していたので、 build 下の main.js を呼び出すように書き換える

<script src="../build/main.js"></script>

なんか怒られてるけどとりあえず呼び出せた！笑