这个例子主要用es6编写一个最简单的react组建,并用gulp将代码转换为浏览器能识别的es5代码
整个流程大致如下:
首先安装依赖:
cnpm install --save-dev babelify babel-preset-es2015 babel-preset-react browserify gulp vinyl-source-stream
cnpm install --save react react-dom
看一下目录结构
dist目录保存的事打包后的文件
我们写了两个react组建,放在components目录中
app.jsx:
import React,{Component} from 'react'
class App extends Component{
constructor(props){
super(props)
this.state={
count:0
}
}
componentDidMount(){
}
addCount(){
let count = this.state.count;
count++;
this.setState({
count:count
})
}
render(){
return (
<div>
<button onClick={this.addCount.bind(this)}>点我递增次数</button>
<span>当前点击次数:{this.state.count}</span>
</div>
)
}
}
export default App
parent.jsx:
import App from "./app.jsx"
import React,{Component} from 'react'
class Parent extends Component{
render(){
return <div>
<span>hellow,parent1000</span>
<App/>
</div>
}
}
export default Parent;
入口文件为
app.js:
import React from 'react'
import {render} from 'react-dom'
import Parent from '../components/parent.jsx'
console.log(activityId);
render(<Parent />,document.getElementById("root"));
gulp打包文件:
var gulp = require("gulp");
var source = require("vinyl-source-stream");
var browserify = require("browserify");
var babelify = require("babelify");
gulp.task("react",function(){
return browserify('./src/app.js')//入口文件
.transform(babelify,{
presets:['es2015','react']
})//es6转es5,jsx转js
.bundle()//合并
.pipe(source("bundle.js"))//打包,source的作用是把babelify的输出转化为gulp可以识别的输入
.pipe(gulp.dest('dist'))//输出目录
});
gulp.task('default',['react'])
在看html 文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="node_modules/zepto/dist/zepto.js"></script>
</head>
<body>
<div id="root"></div>
<script src="dist/normal.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>
最后的
<script src="dist/bundle.js"></script>
是引用的打包后的js文件 运行:gulp
dist目录下就会多一个文件
打开运行上面的html
每点击一次按钮次数就会递增1
这样,最基本的react项目就算构建完成了