给大家分享一个用mui与react结合写的小demo，很简单，吐槽轻点^_^
demo截图：
源码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="css/mui.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/app.css" />
</head>
<body>
<div id="app"></div>
<script src="bower_components/zepto/zepto.min.js"></script>
<script src="bower_components/react/react.min.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="js/react/react_components.js "type="text/jsx"></script>
<script src="js/react/index.js" type="text/jsx"></script>
</body>
</html>react_components.js
var Header = React.createClass({
render: function(){
return (
<header className="mui-bar mui-bar-nav">
<h1 className="mui-title">{this.props.title}</h1>
</header>
)
}
});
index.js
var Topic = React.createClass({
render: function(){
return (
<li className="mui-table-view-cell">
<a className="mui-navigate-right">
{this.props.title}
</a>
</li>
)
}
})
var TopicList = React.createClass({
getInitialState: function() {
return {
topics: []
}
},
render:function(){
var topics = this.props.topics;
var topic = topics.map(function(t){
return <Topic title={t.title} />
});
return (
<ul className="mui-table-view mui-table-view-chevron margin-top-44">
{topic}
</ul>
)
}
})
var App = React.createClass({
getInitialState: function() {
return {
title: '首页',
topics: []
}
},
componentDidMount: function() {
$.get('http://jfbbs.tomoya.cn/api/index', function(result){
this.setState({
topics: result.detail.list
})
}.bind(this));
},
render:function(){
return (
<div>
<Header title={this.state.title}/>
<TopicList topics={this.state.topics}/>
</div>
)
}
});
React.render(
<App/>,
document.getElementById("app")
)
朋也 (作者)
jfbbs.tomoya.cn就是一个开源的项目，没事的
2015-09-22 14:11