（1）新建工程目录，并定位到工程目录
mkdir hello-react
cd hello-react
（2）npm初始化（会提示输入工程相关信息，最后写入到./package.json中
npm init
（3）用npm安装代码依赖（会自动修改./package.json
npm install --save react react-dom
（4）用npm安装开发依赖（会自动修改./package.json
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
（5）配置babel：新建./.babelrc文件
{
"presets": [
"es2015",
"react"
]
}
（6）配置webpack：新建./webpack.config.js
module.exports = {
entry: {
index: './index.jsx'
},
output: {
path: './dist/',
filename: '[name].js',
libraryTarget: 'umd'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader'
}
]
}
};
（7）新建./index.jsx文件
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class Page extends Component {
render() {
return (
<span>hello react</span>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('page')
);
（8）新建./index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="page"></div>
<script src="./dist/index.js"></script>
</body>
</html>
（9）运行webpack
webpack --watch
（10）浏览器打开./index.html
注：
前提是已安装npm，webpack
网友评论