reactjs学习——制作button组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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，可是老是报错
以上是关于reactjs学习——制作button组件的主要内容，如果未能解决你的问题，请参考以下文章