用 reactjs 经验与心得

用 reactjs 经验与心得

最近做了一个项目，用reactjs 写的，之前都没接触过，只是在网上看了一些例子说明案例，好像特别火的样子。我尝试用它来写手头的项目。
要用到node。用它来处理项目管理。
下面个人觉得不好的：
对于初学者，它大大减慢了我的开发速度，要去研究它的，要理解props、state以及组件通信如何工作等并不是很简单。
React 不支持 IE8 以下的任何浏览器，以后也绝不会。还有它不兼容IE8的，还好我现在的项目时手机端H5的。
基本上用webpack 来打包reactjs 文件，根据自己的需要写webpack配置文件，很繁琐。单单一个配置文件就花了我大部分时间。
react 本身没有 ajax，事件系统（除了原生的 DOM 事件）等，还需要利用第三方或者自己添加。js文件可能很大。需要取舍些不必要的。
个人觉得不错的：
对团队开发来说表现的很出色
加强了 UI 和 工作流模式 UI 代码的可读和可维护性。
组件化的 UI 是 web 开发的趋势。
将 JavaScript 和 HTML 绑定到 JSX 使组件更易懂。
可以在服务端渲染 React

需要注意的：
基本上很少用到DOM操作，没必要添加jquery库。添加jquery－ajax 需要的一些插件，一切从简，毕竟单单reactjs的代码压缩后也需要147k以上，移动端的代码越少越好

添上webpack的代码：
javascript 代码

var path = require('path');
var fs = require("fs");
var webpack = require('webpack');
var os = require('os');
var commonsPlugin = webpack.optimize.CommonsChunkPlugin;
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var cfgfile = fs.readFileSync("cfg.json","utf-8");
var cfg = eval("(" + cfgfile + ")");
var debug = cfg.debug;
var hot = cfg.hot;

var devPath = path.resolve(__dirname, 'dev');
var distPath = path.resolve(__dirname, cfg.dev);

function getAddress() {
    var network = os.networkInterfaces();
    var address = 'obtain an IP address';
    if(network["en0"]){
        for(var i = 0; i < network["en0"].length; i++) {
            var json = network["en0"][i];
            if(json.family == 'IPv4') {
                address = json.address;
            }
        }
    }
    if(network['本地连接']){
        address = network['本地连接'][1].address;
    }
    return address;
}
var IPv4 = getAddress();
console.log(IPv4)
function getEntry() {
    var jsPath = path.resolve(devPath, 'scripts');
    var dirs = fs.readdirSync(jsPath);
    var matchs = [], files = {
        wd:["react","react-dom","zepto","utils"]
    };
    dirs.forEach(function (item) {
        matchs = item.match(/(.+)\.js$/);
        if (matchs) {
            if(hot){
                files[matchs[1]] = [
                    'webpack-dev-server/client?http://'+IPv4+':'+cfg.port,
                    'webpack/hot/only-dev-server',
                    path.resolve(devPath, 'scripts', item)
                ];
            }else{
                files[matchs[1]] = [
                    path.resolve(devPath, 'scripts', item)
                ];
            }
        }
    });
    return files;
}
var _plugins = [
    new webpack.ProvidePlugin({
        $: "zepto",
        utils: "utils"
    }),
    new commonsPlugin("wd","wd.js"),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
          NODE_ENV: JSON.stringify('production'),
      }
    })
];
if(!debug){
    _plugins.push(new uglifyJsPlugin({
        output: {
            comments: false  // remove all comments
        },
        compress: {
            warnings: false
        }
    }))
}
var loadders = [
    {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [path.resolve(devPath, 'scripts')],
        query: {
          presets: ['es2015', 'react']
        }
    },
    {
        test: /\.less$/,
        loaders: ['style-loader', 'css-loader', 'less-loader']
    },
    {test:/\.css$/,loader:["style-loader","css-loader"]},
    {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'image?{bypassOnDebug: true, progressive:true, \
                optimizationLevel: 3, pngquant:{quality: "65-80"}}',
            'url?limit=10000&name=img/[hash:8].[name].[ext]',
        ]
    }
]
if(hot){
    loadders.unshift({
        test: /\.js$/,
        loader: 'react-hot',
        include: [path.resolve(devPath, 'scripts')]
    })
}
var config = {
    devtool: (!debug?false:"source-map"),
    entry: getEntry(),
    output: {
        path: path.join(distPath, "scripts"),
        publicPath: 'http://'+IPv4+':8080/build/scripts',
        filename: '[name].js'//debug ? '[name].js':'[name]_[hash:8].js',
        //chunkFilename: debug ? '[chunkhash:8].chunk.js' : '[chunkhash:8].chunk.min.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            "zepto":devPath+"/lib/zepto.js",
            "utils":devPath+"/lib/utils.js"
        }
    },
    devServer:{
        contentBase:path.join(devPath, "app")
    },
    module: {
        loaders: loadders
    },
    plugins:_plugins
};
module.exports = config;