学习React-Native(一):学习React,使用模块加载器webpack
2015-10-23 14:05
1071 查看
关于React的原理和教程什么的,网上一搜有很多,在这里我就不赘述了。如果想对React有个大致的概念,推荐这篇博客,然后就是Facebook的官方文档,我一步一步看下来按照它说的做也没什么大问题,主要就是要自己消化知识。学习React,很重要的学习内容就是怎样将组件拆分。
React有个很重要的概念就是组件(component),通过封装一些组件,可以增加复用,不用重复造轮子。一个组件可以这样封装:
由于之前我没怎么接触过前端,对于commonjs等等的框架都不了解, 所以刚开始我并不知道怎么去引用这个封装好的模块。我直接在js文件中使用:
并在html代码中引入这个js文件。得到的结果是报错,require is undefined,require关键字未定义。后来了解到,我们还需要将这些js代码“编译”成可以带浏览器端运行的代码。这就涉及到前端模块管理器的概念,可以参考这篇文章:前端模块管理器简介。我们还需要模块加载器将这些带有require的代码转换成浏览器可以运行的代码。
通过比较,我选择了用webpack。具体的安装过程就不说了,参考这里。使用方法是,先建立一个配置文件,典型的配置文件如下,文件名为webpack.config.js:
如果提示提示一些包没安装的话,用npm安装一下就好了。具体配置文件里面的参数的意义,参考这里,React里面需要用到的就是代码里面有注释的那些。最后,在html文件中引用转换后的文件,就可以了。
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文件中引用转换后的文件,就可以了。
相关文章推荐
- ReactJs入门教程
- ReactJS ,是否言过其实?
- [干货分享]一篇可能会让你爱上MVVM与ReactiveCocoa的文章
- [干货分享]一篇可能会让你爱上MVVM与ReactiveCocoa的文章
- ReactJs 使用心得
- Reactor和Proactor应用代码编写对比
- React-Native入门指南之HelloWorld
- React Reflux
- Relay文档翻译目录 #Facebook Relay文档翻译#
- React——JSX
- React Native ——入门环境搭配以及简单实例
- iOS React-Native入门指南之HelloWorld
- ReactiveCocoa进阶篇
- React component参数传递
- Thinking in GraphQL #Facebook Relay文档翻译#
- React ——第一个程序
- react js 笔记——环境搭建
- Web开发的未来:React、Falcor和ES6
- MVVM without ReactiveCocoa
- React对state的初级理解