关于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文件中引用转换后的文件,就可以了。