|
|
前端时间一直在折腾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，可是老是报错
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-2-25 08:03:14
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡