|
前端时间一直在折腾nodejs,好不容易有点搞懂express框架想要作业登录注册系统来练练手,路由搞好了,ajax搞好了,页面也搞好了,兴冲冲的准备测试了,麻蛋我忘记世界上有一种东西叫数据库,还没连数据库/(ㄒoㄒ)/~~网上好多都是教mangoDB,又要重新学,搞来搞去没弄好/(ㄒoㄒ)/~~等我折腾好了再来写nodejs。
reactjs太火啦,感觉不去学学有点对不起web工程师的名头哈哈哈哈哈哈,学了几天自己做了一个button的组件,和bootstrap那个有点像,先来说说学习reactjs。
虽然已经火了好久,但是资料还是不是特别多啊,我在学的时候被添加style样式烦了很久(还是没弄清楚),然后正式版本又没出来,facebook一直在改改改,可是国内更新进度跟不上,导致很多资料都是以前版本的,哎,以后还是自己看英文的啦,老子英语这么好不能废了哈哈哈。
我学的时候觉得这两个讲的很好,推荐下:
入门实例教程 - 阮一峰的网络日志 (!推荐,这个日志会随版本更新!)这个真的是入门啦,我每个做了两遍以上,会让你懂一些基本操作方法,多做几遍就有感觉了。当然说说入门,要理解react还差远了,我做完里面的demo其实还是糊里糊涂的,然后噔噔噔就要推荐下面这个了。
ReactJS 生命周期、数据流与事件 有很多网页都有写react组件的生命周期,但我看了以后,觉得这个讲的最好!我把他打印下来好好研究了!虽然我现在对销毁&清理期这部分还是懵逼状态。
现在来放下我写的button组件哟~
效果:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ReactButton</title>
<script type="text/javascript" src="build/react.js"></script>
<script type="text/javascript" src="build/react-dom.js"></script>
<script type="text/javascript" src="build/browser.min.js"></script>
<style type="text/css">
.box{
float: left;
margin:20px;
}</style>
</head>
<body>
<div id="Primary" class="box"></div>
<div id="Success" class="box"></div>
<div id="Danger" class="box"></div>
<script type="text/babel">
var MyReactButton=React.createClass({
getDefaultProps:function(){
return{
children:'button',
pattern:'Primary'
};
},
getInitialState:function(){
return{
opacity:'0.92',
};
},
handleMouseover:function(){
this.setState({
opacity:1
});
},
handleMouseout:function(){
this.setState({
opacity:'0.92'
});
},
render:function(){
var styles={
Primary:{
opacity:this.state.opacity,
backgroundColor:'#2e6da4',
padding:'6px 12px',
color:'#fff',
border:'1px solid #2e6da4',
borderRadius:'4px',
fontSize:'14px',
},
Success:{
opacity:this.state.opacity,
backgroundColor:'#4cae4c',
padding:'6px 12px',
color:'#fff',
border:'1px solid #4cae4c',
borderRadius:'4px',
fontSize:'14px'
},
Danger:{
opacity:this.state.opacity,
backgroundColor:'#d43f3a',
padding:'6px 12px',
color:'#fff',
border:'1px solid #d43f3a',
borderRadius:'4px',
fontSize:'14px'
},
};
return(
<button style={styles[this.props.pattern]} className={this.props.className} onMouseOver={this.handleMouseover} onMouseOut={this.handleMouseout}>{this.props.children}</button>
);
}
});
ReactDOM.render(<MyReactButton pattern='Primary'>Primary</MyReactButton>,
document.getElementById('Primary'));
ReactDOM.render(<MyReactButton pattern='Success'>Success</MyReactButton>,
document.getElementById('Success'));
ReactDOM.render(<MyReactButton pattern='Danger'>Danger</MyReactButton>,
document.getElementById('Danger'));
</script>
</body>
</html>
现在来讲下疑问:
1)怎么把共有的style属性提取出来,类似于mixin那样,这样有些我就不用重复写了,可惜我弄了好久还是没弄明白/(ㄒoㄒ)/~~有知道的说下啊
2)我把jsx文件单独写一个文件而不是写进HTML,可是老是报错
|
|
|