这个例子主要用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项目就算构建完成了