朋也
朋也
  • 发布:2015-09-14 11:14
  • 更新:2015-09-15 14:36
  • 阅读:6177

分享一个mui与react结合的demo

分类:MUI
mui

给大家分享一个用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")  
)  

2015-09-14 11:14 负责人:无 分享
已邀请:
静待枯竭

静待枯竭

直接把http://jfbbs.tomoya.cn/api/index 发布在外网。也没有设置一个验证。安全性不好吧。

  • 朋也 (作者)

    jfbbs.tomoya.cn就是一个开源的项目,没事的


    2015-09-22 14:11

只为你搁浅

只为你搁浅

这样做能提升性能吗?

  • 朋也 (作者)

    这样写的话,页面都是reactjs写的了,应用的性能,跟在浏览器里打开手机版网站差不多


    2015-09-22 14:12

  • wenju

    回复 朋也:这样子写有什么好处?


    2016-01-15 09:41

  • 朋也 (作者)

    回复 wenju:没什么好处,就是折腾着玩玩罢了


    2016-01-20 14:57

  • merb_tu

    回复 wenju:好处就是用react的思想来写UI的时候,开发者的思维逻辑比较清晰。性能方面看就没啥意义,连中文官网的文档都说浏览器端解析JSX语法很耗性能,建议放到服务器端处理。


    2017-02-21 19:56

只为你搁浅

只为你搁浅

比如初始页面的加载速度

该问题目前已经被锁定, 无法添加新回复