JSX 語法

jsx 是Facebook專門為react發明的一種新的類似於XML格式的語言，它是JavaScipt的語法拓展。它使用XML標記的方式去直接聲明界面，然后再利用編譯器轉換成JS語言。

jsx 的優點：

• jsx 在渲染的時候輸出的虛擬dom，所以jsx執行更快
• 類型安全，在編譯過程中就能發現錯誤
• 使用jsx編寫模板更加快速
  
  

JSX 基本語法

1. 定義標簽時，只允許被一個標簽包裹

2. 標簽一定要閉合

3. 在HTML中，注釋寫成 <!-- 注釋 -->這樣的形式，在JSX中依然可以使用這個方法使用注釋，但要注意的是，在一個組件的子元素位置使用注釋要用 {} 包起來

        {/* 注釋 */}

        {
          //單行注釋
        }

4. DOM 元素的屬性是標准規范屬性，但有兩個例外——class 和 for，這是因為在 JavaScript 中這兩個單詞都是關鍵字。因此，我們要將class屬性改為className，for 屬性改為HTMLFor。

5. 如果在輸入框中輸入HTML標簽，不想被轉義，可以這樣做：

import React,{Component} from 'react';

class App extends Component {
  render(){
    let content = "<h1>內容</h1>"
    return (
      <div dangerouslySetInnerHTML={{__html: content}}></div>
    );
  }
}
export default App;

6. JSX 中使用JavaScript表達式，表達式寫在花括號 {} 中

7.JSX 綁定屬性值

8. JSX 綁定style屬性

9. JSX占位符：在JSX中返回的內容都必須包含在一個大的標簽內，所以我們必須在最外邊套一層div，如果我們不希望頁面渲染這層div的話就要使用占位符Fragment

import React,{Component, Fragment} from 'react';

class App extends Component {
  render(){
    return (
      // jsx 占位符
      <Fragment>
        {/* JSX綁定style屬性 */}
        <div style={{color:'red', margin:'0 auto'}}></div>
        {/* JSX綁定屬性值 */}
        <img src={imgUrl}></img>  
      </Fragment>
    );
  }
}
export default App;

注意：

• 使用JSX一定要引入react
• 組件的首字母一定要大寫