react學習筆記01

被項目拖了半年的我終於有時間學習react 了

下面是我最近學習的筆記

支持jsx語法

 
ReactDOM.render(
<div>
<h1>hello, word</h1>
<h2>歡迎學習 React</h2>
<p data-myattribute = "somevalue"></p>
</div> , document.getElementById('example')
);

     語法 : ReactDOM.render( dom結構 , 父dom )

 

支持獨立運行

Hello.js
ReactDOM.render(
     <h1>Hello, world!</h1>,
      document.getElementById('example')
);
 
index.html
<div id="example"></div>
<script type="text/babel" src="helloworld_react.js"></script>

 

js表達式

ReactDOM.render(
      <div> <h1>{ 1==1 ? "true" : "false" }</h1> </div> ,  //不支持if else 語句可是支持三元運算符
     document.getElementById('example')
);

 

css樣式

var myStyle = {
　　fontSize: 100,   // number類型  react.js會自動幫你補上px
　　color: '#FF0000'
};
ReactDOM.render(
　　<h1 style = {myStyle}>hello, word</h1>,
　　document.getElementById('example')
);

 

註釋

ReactDOM.render(
     /*註釋 1*/
     <h1>
　　　　hello word
　　　　{/*註釋2*/}    //註釋只能寫在 js中
     </h1>,
    document.getElementById('example'));