一，JSX語法：

1. 顧名思義：是一個看起來很像 XML 的 JavaScript 語法擴充套件
2. 一種 JavaScript 的語法擴充套件，完全是在 JavaScript 內部實現的。
3. 標籤內的語法
   1. 表示式用{},例如：<h1>{1+1}</h1>
   2. 沒有if和else，可以用三目運算子，例如：<h1>{i == 1 ? 'True!' : 'False'}</h1>
   3. 建立react元件用大駝峰，react元件例項化和html標籤用小駝峰
      1. 小駝峰：var myDivElement = <div className="foo" />;
      2. 大駝峰：var MyComponent = React.createClass({/*...*/});
      3. 小駝峰：var myElement = <MyComponent someProperty={true} />;
   4. Babel 轉譯器會把 JSX 轉換成一個名為 React.createElement() 的方法呼叫

      1. 下面兩種程式碼的作用是完全相同的：
         
         const element = (
           <h1 className="greeting">
             Hello, world!
           </h1>
         );
         
         
         const element = React.createElement(
           'h1',
           {className: 'greeting'},
           'Hello, world!'
         );
          
         

          

   5. 註釋：
      1. 在標籤內部的註釋需要花括號
      2. 在標籤外的的註釋不能使用花括號

      3. ReactDOM.render(
             /*註釋 */
             <h1>孫朝陽 {/*註釋*/}</h1>,
             document.getElementById('example')
         );

          

4. 標籤外的語法
   1. 行內樣式:
      1. 屬性是小駝峰，有聯想，例如backgroundColor：'red'
      2.  

         1.  <div style={{fontSize: '40px',color:'green'}}>
             
            

             

   2. 頁內樣式：
      1. 屬性是小駝峰，沒有聯想,例如backgroundColor：'red'
      2. ​​​​​​​

         1. import React, { Component } from 'react';
            export default class States extends Component {
                render() {
                  return (
                      <div style={{myStyle}}>哈哈</div>
                   
                  )
                }
            }
            
            var myStyle = {
              fontSize: 50,
              color: '#FF0000'
            };

             

   3. 行內樣式和頁內樣式共用

      1. import React, { Component } from 'react';
         export default class States extends Component {
             render() {
               return (
                   <div style={{myStyle,fontSize: '40px',color:'green'}}>哈哈</div>
               )
             }
         }
         
         var myStyle = {
           fontSize: 50,
           color: '#FF0000'
         };

          

   4. 外部樣式：屬性是小橫線連線，有聯想
      1. 例如： background-color：'red'
      2.  

二，元件

1. 函式定義元件

   1. 定義：
      function HelloMessage(props) {
          return <h1>Hello World!</h1>;
      }
      
      使用：
      {HelloMessage()}

       

2. const使用元件

   1. 定義：
      function HelloMessage(props) {
          return <h1>Hello World!</h1>;
      }
      const element = <HelloMessage />
      
      使用：
      {element}

       

3. class類定義元件

   1. 定義：
      class Welcome extends React.Component {
        render() {
          return <h1>Hello World!</h1>;
        }
      }
      使用：
      < Welcome />