(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