JSX是一個JavaScript的語法擴充套件，它在React中可以很好的描述UI互動，會讓人第一眼就可以想到它是一個模板。

為什麼使用JSX？

　　直觀原因來看，在 JavaScript 程式碼中將 JSX 和 UI 放在一起時，會在視覺上有輔助作用。它還可以使 React 顯示更多有用的錯誤和警告訊息。

在JSX中嵌入表示式

　　在jsx檔案中，可以直接使用 {} 來嵌入js中的變數或者表示式

const name = 'xiaoMing';
//{name}會被替換成 xiaoMing
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById(
 
'root')
);

　　當然，也可以在 { } 中放入表示式，如：{1 + 1},最終渲染的結果是2.

　　在JSX中，可以通過 引號來給屬性指定字串字面量，也可以使用大括號插入一個JavaScript表示式

<div tabIndex="0">直接插入字串字面量</div>;

<img src={user.avatarUrl}>插入JSX表示式</img>;

使用JSX指定子元素

　　在一個標籤裡沒有內容，你可以使用 /> 來閉合標籤，就像單標籤一樣使用。

　　JSX標籤裡能夠包含很多子元素。如：

const element = (
  
 
<div>
    <h1>Hello!</h1>
    <h2>Welcome to ***.</h2>
  </div>
);

　　React DOM 在渲染所有輸入內容之前，預設會進行轉義。它可以確保在你的應用中，永遠不會注入那些並非自己明確編寫的內容。所有的內容在渲染之前都被轉換成了字串。

JSX表示物件

Babel會把JSX轉譯成一個名為React.createElement()函式呼叫

const element = (
  <h1 className="greeting">
    Hello, world
 
!
  </h1>
);

/******這兩串程式碼完全等效*******/
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);