# 一、hello worldjavascript
學習一個語言,最好的方式,咱們須要去官網去查看文檔(https://facebook.github.io/react),經過JSFiddle,即可以看到最簡單的demo.
目前爲止最新版本爲15.3.0,後續沒有特別說明,咱們都是基於該版本。html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>react</title> <style> .styleT{ color: #f40; } </style> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello = React.createClass({ render:function(){ return <h1 className="styleT">Hello,{this.props.name}</h1>; } }); ReactDOM.render( <Hello name="蒼老師" />, document.getElementById("example") ); </script> </body> </html>
須要注意的點:
+ 引入文件 :當前版本須要引入react\react-dom\browser三個文件,版本不一樣,引入文件有出入。
- 問題來了,咱們browser的爲啥要用,文件這麼大?它的做用是使瀏覽器支持babel,你能夠使用ES2015(javascript下一代標準ECMAScript 6)進行編碼。若是你用ES5,能夠不引入。
+ ReactDOM.render該方法的兩個參數
- dom節點,(並非真正的dom節點,是個實例而已)須要注意的是class不在支持樣式,由於關鍵字的緣由,應該用className
- 須要插入的節點。
+ 傳參,「蒼老師」java
# 二、事件react
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Event</title> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script> </head> <body> <div id="main"></div> <script type="text/babel"> var Btn=React.createClass({ render:function () { return <div><button onClick={this.onClick}>顯示與隱藏</button> <span ref="tip">看我消失~~!</span></div>; }, onClick:function(evt){ var ele=ReactDOM.findDOMNode(this.refs.tip); if(ele.style.display=="none"){ ele.style.display="inline"; }else{ ele.style.display="none"; } } }); var Ipt=React.createClass({ render:function (){ return ( <div> <input onChange={this.onChange} /> <span ref="infoShadow">{this.state.inputVal}</span> </div> ); }, onChange:function(evt){ this.setState({ inputVal:evt.target.value, }); }, getInitialState:function(){ return { inputVal:"默認的字符" } }, }); ReactDOM.render( <div> <Btn /> <br/><br/><br/><br/> <Ipt /> </div>, document.getElementById('main') ); </script> </body> </html>
注意點:
+ type類型爲text/babel,而非text/JSX
+ 渲染React組件,聲明變量採用首字母大寫(老紙用小寫,踩坑了,半天死活沒效果,也不報錯)
+ React.createClass() 接受的參數爲對象,{ xxx }
+ 綁定事件爲 onXxx={this.fn}
+ 查找節點ReactDOM.findDOMNode
- 接受參數爲虛擬dom節點this.refs.xxx
- ref="xxx"(我暫時理解爲id)
+ 狀態
- 狀態初始化 getInitialState:fn(){return {xxx:"初始化"}}
- 改變狀態 setState({xxx:"改變後的狀態"})
+ 建立組件虛擬dom的結構,一行顯示爲一坨,很噁心
- 放在小括號內 (虛擬dom...)注意接觸是分號git