ソースの用意
$ git clone https://github.com/mitswku/react-sample.git
package.json
{
"name": "react-sample",
"scripts": {
"start": "webpack-dev-server",
"browser": "open http://localhost:8080/webpack-dev-server/"
},
"devDependencies": {
"babel-core": "^6.6.5",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"webpack": "^1.12.14",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
}
}
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(
<HelloMessage name="John" />,
document.getElementById('container')
);
public/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="container"></div>
</body>
<script src="bundle.js"></script>
</html>
webpack.config.js
var path = require("path");
module.exports = {
entry: {
app: ['./src/index.js']
},
output: {
path: path.resolve(__dirname, "public"),
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.jsx*$/,
exclude: [/node_modules/],
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
},
devtool: "#source-map",
devServer: {
contentBase: "./public",
}
};
試す
$ npm install
$ npm start
別consoleで
$ npm brower