1.准备:配置好Node环境,并且安装npm工具
2.安装依赖包
npm install babel -g
npm install webpack -g
npm install webpack-dev-server -g
上面这三个依赖包都需要安装到全局,因为需要使用它们的命令行工具。其中babel是一个可以将ES6代码转换成ES5代码,这样我们就可以在编写代码的时候使用ES6的一些新特性了。webpack工具是一个代码构建工具,webpack-dev-server是一个小型的Express服务器。
3.创建一个项目目录:reactTest。通过命令行进入reactTest目录下,执行npminit命令。该命令可以帮助我们创建一个package.json文件。
4.安装react的必要模块
在命令行执行如下语句:
使用--save可以直接将安装的模块写入到package.json文件中的dependencies字段下,自动添加依赖。
5.安装babel相关的插件
npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015
6.创建文件
在reactTest目录下创建需要的文件,文件名称及其作用如下:
index.html:要展示的界面,存放html结构
App.jsx:使用jsx来构建React组件
webpack.config.js:webpack配置文件
7.编辑wbepack.config.js,代码及注释如下:
var config = {
entry: './main.js',//设置入口文件
output: {
path:'./',filename: 'index.js',94);">//设置导出文件为index.js
},devServer: {
inline: true,port: 7777 //设定使用webpack-dev-server工具的服务器端口
},module: {
loaders: [ { //引入babel模块处理ES6代码
test: /\.jsx?$/,exclude: /node_modules/,loader: 'babel',query: {
presets: ['es2015','react']
}
}]
}
}
module.exports = config; //导出config文件
(1)在App.jsx中定义组件
(2)在main.js中渲染组件
(3)在index.html中引入文件并构建HTML结构
<!DOCTYPE html>
<html>
<head>
<Meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
注意这里引入index.js文件,这个是利用webpack构建后的文件
9.运行:使用webpack-dev-server,在命令行中进入当前项目目录,输入命令webpack-dev-server,访问localhost:7777即可。至此成功构建出一个简单的React应用