React學習小結（二）
阿新 • • 發佈：2017-05-29
display lin body -a 頁面 return 有時 borde size
一、組件的嵌套
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="react.min.js" type="text/javascript" charset="utf-8"></script> 7 <script src="react-dom.min.js" type="text/javascript" charset="utf-8"></script> 8 <script src="browser.min.js" type="text/javascript" charset="utf-8"></script> 9 <style type="text/css"> 10 *{margin:0;padding:0;list-style: none;} 11 html,body,#out,#inner{width:100%;height:100%;overflow:hidden;} 12 #inner{display:-webkit-box;-webkit-box-orient:vertical;} 13 </style> 14 </head> 15 <body> 16 <div id="out"></div> 17 </body> 18 <script type="text/babel"> 19 var sty={ 20 sty1:{height:‘50px‘,background:‘orange‘,‘text-align‘:‘center‘,‘line-height‘:‘50px‘}, 21 sty2:{height:‘30px‘,background:‘yellow‘,‘text-align‘:‘center‘,‘line-height‘:‘30px‘,overflow:‘hidden‘}, 22 sty3:{height:‘30px‘,float:‘left‘,width:‘25%‘,‘box-sizing‘:‘border-box‘,border:‘1px solid red‘}, 23 sty4:{background:‘green‘,WebkitBoxFlex: 1} 24 25 } 26 var Demo=React.createClass({ 27 render:function(){ 28 return( 29 <div id="inner"> 30 <Head/> 31 <Nav/> 32 <Con/> 33 <Footer/> 34 </div> 35 ) 36 } 37 }) 38 var Head=React.createClass({ 39 render:function(){ 40 return( 41 <div style={sty.sty1}>react組件頭部</div> 42 ) 43 } 44 }) 45 var Nav=React.createClass({ 46 render:function(){ 47 return( 48 <ul style={sty.sty2}> 49 <li style={sty.sty3}>首頁</li> 50 <li style={sty.sty3}>圖片</li> 51 <li style={sty.sty3}>藝術</li> 52 <li style={sty.sty3}>音樂</li> 53 </ul> 54 ) 55 } 56 }) 57 var Con=React.createClass({ 58 render:function(){ 59 return( 60 <div style={sty.sty4}>內容</div> 61 ) 62 } 63 }) 64 var Footer=React.createClass({ 65 render:function(){ 66 return( 67 <ul style={sty.sty2}> 68 <li style={sty.sty3}>首頁</li> 69 <li style={sty.sty3}>首頁</li> 70 <li style={sty.sty3}>首頁</li> 71 <li style={sty.sty3}>首頁</li> 72 </ul> 73 ) 74 } 75 }) 76 ReactDOM.render(<Demo/>,document.getElementById(‘out‘)) 77 </script> 78 </html>
在做移動端的時候，有時候我們可以把React與mui混合使用，但mui中的classname記得換成className,另外三大框架（vue/react/angular）都可以與bootstrap搭配使用，
在一些簡單的頁面中我們可以使用bootstrap的可視化組件快速搭建原型頁面概圖。工具鏈接：http://www.bootcss.com/p/layoutit/#
React學習小結（二）