function foo()
{
}

2016年4月29日金曜日

Reactの勉強(2) ... Reactを使い始める編

Reactを使い始めます
1. まずインストール
$ npm install --save-dev babel-preset-react
$npm install react react-dom --save
2. webpack.config.jsにReactのpresetを追加します
 
presets: ['es2015', 'react']
3. index.jsとindex.htmlだけ用意します。
- index.js
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hi</h1>, document.getElementById('root'));
- index.html
<html>
  <body>
    <div id="root">
    </div>
    <script charset="utf-8" src="bundle.js"></script>
  </body>
</html>
4. npm run buildしてからファイルにアクセスするとHelloと表示されます
5. そろそろbuildするのも面倒なので、勝手にbuildしてもらいます
$ npm install webpack-dev-server --save-dev
package.jsonのscriptに以下を追加
"watch": "./node_modules/.bin/webpack-dev-server"
$ npm run watch
ファイルを更新すると勝手にbuildしてくれます ブラウザからはhttp://localhost:8080でアクセスします。

0 件のコメント:

コメントを投稿