react入門----基礎語法
阿新 • • 發佈：2017-08-07
var 相關 html 三種 head cdn blog ont ack
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- react核心庫 --> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 8 <!-- 提供與dom相關的功能 -->9 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 10 <!-- 將es6代碼轉換為es5語法格式 --> 11 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 12 <style> 13 .trest{ 14 color: red;15 } 16 </style> 17 </head> 18 <body> 19 <div id="container"></div> 20 <script type="text/jsx"> 21 var Hello = React.createClass({ 22 render: function () { 23 <!-- 這裏的this表示當前react組件的實例--> 24 <!--props則是我們自在使用這個組件是，組件上屬性的集合 --> 25 <!-- props的key值與return上的key值一一對應，值頁一一對應 --> 26 <!-- class樣式的三種方式，類名，內聯，還有聲明 --> 27 <!-- 1、使用類名時，這裏的html標簽內不能使用class而要使用className，因為在es6中class是一個保留字 --> 28 <!-- return <div className="trest">Hello {this.props.name} {this.props.title}</div>; --> 29 <!-- 2.內聯樣式 使用雙花括號的形式，並且使用駝峰命名的實行寫屬性名--> 30 <!-- return <div style={{color:‘red‘,fontSize:"55px"}}>Hello {this.props.name} {this.props.title}</div>; --> 31 32 <!-- 3.使用聲明變量的形式--> 33 var styleObj={ 34 color:‘red‘, 35 fontSize:‘55px‘ <!--采用駝峰命名的形式--> 36 } 37 return <div style={styleObj}>Hello {this.props.name} {this.props.title}</div>; 38 } 39 }); 40 ReactDOM.render(<Hello name="dongdong" title="Mr"/>, document.getElementById(‘container‘)); 41 </script> 42 </body> 43 </html>
react入門----基礎語法