reactjs学习——制作button组件
前端时间一直在折腾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,可是老是报错