学び直し、reactをnpmで動かしてみるのだ - 鈍足ランナーのＩＴ日記

待望のnode環境ができあがったのでうごかしみる
reactのドキュメントはnode周りのあれこれは知っているものとして省略しているので
ググらないととっつけない。

https://facebook.github.io/react/docs/getting-started.html

npm init
npm install -g browserify
npm install babelify --save-dev
npm install http-server -save
browserify -t babelify main.js -o bundle.js

package.jsonの編集scriptにstartを追加する

{
  "name": "age_watch",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "http-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "http-server": "^0.8.5",
    "react": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "devDependencies": {
    "babelify": "^6.3.0"
  }
}

index.htmlをつくる

<html>
<head>
</head>
<body>
<h1 id="example">aaa</h1>
<script src="bundle.js" ></script>
</body>
</html>

main.jsはドキュメント通り

var React = require('react');
var ReactDOM = require('react-dom');

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

npm start

ブラウザでihttp://localhost:8080/index.htmlを開いてみたら動いたようだ。