React.js基础学习之实现移动RSS阅读器实例
扫描二维码
React.js基础说明
React 是”一个用于构建用户界面的 JavaScript 类库”.对应到前端框架MVC的话，是V这一层，只专注于视图这一层，也就是对于数据经常变化而影响视图变化的解决方案。
React 使用的是特殊的 JavaScript 语法, 叫做 JSX.
主要的目标是提供一个能表示 React 内部的 DOM 的符合直觉的语法糖,用更简单封装更好的语法来些React.
React 关于JSX官方教程 上其他的用法也很好懂.
最终 JSX 代码会被编译到平常的 JavaScript.
React 不依赖第三方的类库(比如 jQuery)
React 当中, components 是构建应用核心的组成.
component 是各自独立的, 模块化, 在应用当中是动态的 HTML 的表示.
component 经常会是其他 React component 的子模块.
RSS阅读器实现思路
需要三个东西来构建：
- react.js构建页面布局和数据渲染
- Ratchet来实现Mobile风格样式,reatchet是一个支持ios、android风格样式的样式库
- 用Yahoo来实现RSS订阅的解析，因为google被墙，所以就只能退而求其次
最后组合起来构成一个相对完整的Mobile风格的可以阅读的RSS阅读器
代码
react部分的主要的代码如下：
//顶部导航条
var Header = React.createClass({
render: function () {
return (
<header className="bar bar-nav">
<a href="#" className={"icon icon-left-nav pull-left" + (this.props.back==="true"?"":" hidden")}></a>
<h1 className="title">{this.props.text}</h1>
</header>
);
}
});
//滚动列表元素
var ListItem = React.createClass({
render: function () {
return (
<li className="table-view-cell media">
<a href={this.props.employee.link} target="_blank" class="navigate-right">
{this.props.employee.title}<small> [{this.props.employee.label}]</small>
<p>{this.props.employee.des}</p>
</a>
</li>
);
}
});
//滚动列表布局
var List = React.createClass({
render: function () {
var items = this.props.employees.map(function (employee) {
return (
<ListItem key={employee.id} employee={employee} />
);
});
return (
<ul className="table-view">
{items}
</ul>
);
}
});
//首页布局
var HomePage = React.createClass({
render: function () {
return (
<div>
<Header text="今天极客新闻" back="false"/>
<div className="content">
<List employees={this.props.employees}/>
</div>
</div>
);
}
});
//创建App对象
var App = React.createClass({
//react内部方法，初始化对象变量，返回值可以通过this.state调用
getInitialState: function() {
return {
searchKey: '',
employees: [
],
page: null
}
},
//react内部方法,初始化完成后立即调用一次
componentDidMount: function() {
var rssArray = [
{"title":"业界资讯","des":"业界资讯","url":"http://cnbeta.feedsportal.com/c/34306/f/624776/index.rss","type":"rss","label":"咨询"},
{"title":"36氪","des":"36氪","url":"http://www.36kr.com/feed/","type":"rss","label":"创业"},
{"title":"techcrunch","des":"IT新闻","url":"http://techcrunch.cn/feed/","type":"rss","label":"IT"},
{"title":"品玩","des":"品味把玩","url":"http://www.pingwest.com/feed/","type":"rss","label":"品玩"},
{"title":"极客公园","des":"极客早知道","url":"http://www.geekpark.net/rss","type":"rss","label":"极客"},
{"title":"爱范儿","des":"爱范儿","url":"http://www.ifanr.com/feed","type":"rss","label":"爱范儿"}
];
var res = [];
for (var i = 0; i < rssArray.length;i++) {
var url = rssArray[i].url;
// 利用Yahoo的rss解析api获取json返回值
var yahoo = 'select * from feed where url="' + encodeURIComponent(url) + '" | truncate(count=10)';
var api = "https://query.yahooapis.com/v1/public/yql?q=" + yahoo + "&format=json&diagnostics=true&num=4&callback=";
var _self = this;
// Send request
(function(label) {
$.getJSON(api, function(data){
if (data) {
var item = data.query.results.item;
for (var j = 0; j < item.length;j++) {
var des = "";
try {
des = $(item[j].description).text();
} catch (err) {
des = item[j].description;
}
des = des.length > 40 ? des.substring(0,40) + ".." : "";
des = des.replace(/<strong>/, '').replace(/<\/strong>/, '');
var temp = {"title":item[j].title,"link":item[j].link,"des":des,"label":label};
res.push(temp);
}
} else {
_self.setState({"employees":[]});
};
_self.setState({"employees":res});
})
})(rssArray[i].title);
}
},
render: function() {
return <HomePage employees={this.state.employees}/>;
}
});
//渲染入口
React.render(<App/>, document.body);
###说明
可以看到按react的方式，一个列表页面可以分成几个组件：
- Header
- ListItem
- List
- HomePage
最后通过App对象将这些组件组合在一起,具体app内的方法说明可以查看代码注释.