2016年04月13日

WebpackでReactを使ってみる

とりあえずWebpackでReactを使うまでのメモとりあえず適当なフォルダで「npm init -y」でpackage.jsonを作成

npm init -y


babelの必要系モジュールとwebpackをインストール

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
npm install --save-dev webpack


webpack.config.jsというファイルを作成、/src/main.jsを/dist/bundle.jsに書き出します。

module.exports = {
entry: __dirname + "/src/main.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
query: {
presets: ["es2015", "stage-0", "react"]
}
}
]
}
};


.babelrcを作成。

{
"presets": ["es2015", "stage-0", "react"]
}


/src/main.jsには以下の様な内容を設定

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
render () {
return <p> Hello React!</p>
}
}
render( <App/ >, document.getElementById('app'));


webpackコマンドで/dist/bundle.jsが生成されます。

参考:React+Babel+WebpackでHello World | memocon
タグ:WebPACK REACT
posted by ねこまんま at 21:21 | Comment(0) | TrackBack(0) | React | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック