用react + react-redux构建项目 基本配置

为什么80%的码农都做不了架构师？>>>   

依赖包：

{
  "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>
        );
    }
}

转载于:https://my.oschina.net/wolfx/blog/1377673