読者です 読者をやめる 読者になる 読者になる

鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

学び直し、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を開いてみたら動いたようだ。