学习React-Native(一)：学习React，使用模块加载器webpack

关于React的原理和教程什么的，网上一搜有很多，在这里我就不赘述了。如果想对React有个大致的概念，推荐这篇博客，然后就是Facebook的官方文档，我一步一步看下来按照它说的做也没什么大问题，主要就是要自己消化知识。学习React，很重要的学习内容就是怎样将组件拆分。

React有个很重要的概念就是组件(component)，通过封装一些组件，可以增加复用，不用重复造轮子。一个组件可以这样封装：

var TimeLabel = React.createClass({
    getInitialState:function() {
        return {date:new Date()}
    },updateTime:function() {
        this.setState({date:new Date()});
    },componentDidMount:function() {
        setInterval(this.updateTime,1000);
    },render:function() {
        return (
            <p>
                Hello,<input type="text" placeholder="Your name here" />!
                It is {this.state.date.toTimeString()}
            </p>
        );
    }
});

module.exports = TimeLabel;

由于之前我没怎么接触过前端，对于commonjs等等的框架都不了解，所以刚开始我并不知道怎么去引用这个封装好的模块。我直接在js文件中使用：

var TimeLabel = require('TimeLabel');
ReactDOM.render(
    <TimeLabel />,document.getElementById('content')
);

并在HTML代码中引入这个js文件。得到的结果是报错，require is undefined，require关键字未定义。后来了解到，我们还需要将这些js代码“编译”成可以带浏览器端运行的代码。这就涉及到前端模块管理器的概念，可以参考这篇文章：前端模块管理器简介。我们还需要模块加载器将这些带有require的代码转换成浏览器可以运行的代码。

通过比较，我选择了用webpack。具体的安装过程就不说了，参考这里。使用方法是，先建立一个配置文件，典型的配置文件如下，文件名为webpack.config.js：

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
  entry: {
    entry1: './entry/entry1.js',//需要转换的文件路径，是键值对
    entry2: './entry/entry2.js'
  },output: {
    path: __dirname,//转化后的文件的路径
    filename: '[name].entry.js'  //转化后的文件的名字
  },resolve: {
    extensions: ['','.js','.jsx']  //js代码和jsx代码都进行转化
  },module: {//对于不同的文件，用不同的加载器进行处理
    loaders: [{
      test: /\.js$/,loader: 'babel-loader'
    },{
      test: /\.jsx$/,loader: 'babel-loader!jsx-loader?harmony'
    }]
  },plugins: [commonsPlugin]
};

然后在命令行中运行：

webpack --config webpack.config.js

如果提示提示一些包没安装的话，用npm安装一下就好了。具体配置文件里面的参数的意义，参考这里，React里面需要用到的就是代码里面有注释的那些。最后，在html文件中引用转换后的文件，就可以了。

学习React-Native(一)：学习React，使用模块加载器webpack

猜你在找的React相关文章