npm install -g webpack
npm install -g webpack-dev-server
npm init
npm install webpack --save-dev
npm install webpak-dev-server --save-dev
npm install react react-dom --save
npm install react-hot-loader --save-dev
npm install babel-preset-es2015 babel-preset-react --save-dev
npm install babel-core babel-loader --save-dev
npm install style-loader css-loader sass-loader node-sass --save-dev
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$\/ exclude: /node_modules/, loader: 'babel'},
{ test: /\.scss$/, loader: 'style!css!sass'}
]
}
}
{
"presets": ["es2015","react"]
}
import React from 'react';
class CommentForm extends React.Component {
render(){
return(
<form>
<div className="container">
<input type="text" />
</div>
<div className="container">
<input type="submit" />
</div>
</form>
)
}
}
export { CommentForm as default };
import React from 'react';
import CommentForm from './CommentForm';
class Comment extends React.Component {
render(){
return(
<div>
<h1>评论</h1>
<CommentForm />
</div>
)
}
}
export { Comment as default };
import React from 'react';
import ReactDOM from 'react-dom';
import Comment from './comment/Comment';
ReactDOM.render(
<Comment />,
document.getElementById('app');
)
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<title></title>
</head>
<body>
<div id='app'></div>
<script src='bundle.js' type='text/javascript'></script>
</body>
</html>
- webpack-dev-server --hot --inline
http://localhost:8080/webpack-dev-server/index.html
网友评论
原文链接：http://www.jianshu.com/p/4453e53f3eec
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
ReactDOM.render(
<Comment />,
document.getElementById('app');
)
这边的 ； 放错位置了吧！
import CommentForm from './CommentForm';
然后就可以正常运行了！
替换掉一下两行：
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel'},
{ test: /\.scss$/, loader: 'style!css!sass'}