依赖包：

{
  "dependencies": {
    "moment": "^2.18.1","react": "^15.5.4","react-addons-css-transition-group": "^15.5.2","react-dom": "^15.5.4","react-fastclick": "^3.0.2-alpha.1","react-redux": "^5.0.5","react-router": "^4.1.1","react-router-dom": "^4.1.1","react-swipe": "^5.0.8","redux": "^3.6.0","underscore": "^1.8.3"
  },"devDependencies": {
    "babel-core": "^6.24.1","babel-eslint": "^7.2.3","babel-loader": "^7.0.0","babel-preset-es2015": "^6.24.1","babel-preset-react": "^6.24.1","babel-preset-stage-0": "^6.24.1","babel-plugin-transform-runtime": "^6.23.0","eslint": "^4.0.0","eslint-plugin-react": "^7.1.0","webpack": "^2.6.1"
  }
}

webpack的配置：

var webpack = require("webpack");
var path = require("path");


module.exports = {
    entry: {
        app:path.resolve(__dirname,'./src/main.jsx'),vendor : [
            'react','react-dom','react-router','react-router-dom',// 'react-addons-css-transition-group','react-fastclick','react-redux','react-swipe','redux','underscore','moment'
            
        ]
    },// 入口文件
    devtool: 'source-map',　　// 调试时定位到编译前的代码位置，推荐安装react插件
    output: {
        path: path.resolve(__dirname,"./dist"),filename: '[name].bundle.js' // 打包输出的文件
    },module: {
        rules: [{
            test: /\.jsx?$/,// test 去判断是否为.js或.jsx,是的话就是进行es6和jsx的编译
            exclude: /(node_modules|bower_components)/,loader: 'babel-loader',query: {
                presets: ['es2015','stage-0','react']
            }
        }]
    },resolve: {
        // 现在你import文件的时候可以直接使用import Func from './file'，不用再使用import Func from './file.js'
        extensions: ['.js','.jsx']
    },plugins: [
		new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
        })
	],externals: {
        //require("zepto") is external and available
        //on the global var Zepto
        //'zepto': 'Zepto'
    },};

src:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore,combineReducers } from 'redux';
import { Provider,connect } from 'react-redux';

const reducer = (state = {},action) => {
    switch (action.type) {
        case "test":
            return { ...state,...{ demo: action.data } };
        default:
            return state;
    }
};

const store = createStore(reducer);


// 不稳定的语法，ES7装饰器
// @connect(mapStateToProps,mapDispatchToProps)
class App extends React.Component {
    render() {
        return (
            <div>
                <div onClick={ev => this.props.triggerFun("WOW!")}>Hello</div>
                <div>{this.props.demo}</div>
            </div>
        );
    }
}

const mapStateToProps = state => ({ demo: state.demo });
const mapDispatchToProps = dispatch => ({ triggerFun: data => dispatch({ type: "test",data: data }) });
const AppView = connect(mapStateToProps,mapDispatchToProps)(App);

ReactDOM.render(
    <Provider store={store}>
        <AppView />
    </Provider>,document.getElementById("react-root")
);

如果使用了路由：

class MainPage extends React.Component {
    render() {
        return (
            <Provider store={store}>
                <Router>
                    <div>
                        <Route exact path="/" component={HelloView} />
                    </div>
                </Router>
            </Provider>
        );
    }
}