前端時間一直在折騰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，可是老是報錯