簡介

const element = <h1>Hello!</h1>JSX是一種JavaScript的語法擴展，看起來像是模板語言，事實上它是JavaScript內部實現。JSX用來聲明React當中的元素。

基本語法

在JSX中使用表達式

可以任意在JSX當中使用JavaScript表達式，在JSX當中的表達式要包含在大括號里。

function formatName(user){
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Yanwei',
lastName:'Zhang'
}

const element = (
  <h1>
    Hello, {formatName(user)}!
</h1>
)

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

CodePen結果

JSX屬性

可以使用引號來定義以字符串為值的屬性：

const element = <div tabIndex="0"></div>;

也可以使用大括號來定義以JavaScript表達式為值的屬性

const element = ><img src={user.avatarUrl}></img>;

注意，如果使用了大括號包裹的JavaScript表達式，就不要使用引號報過了。JSX會將引號中的內容識別為字符串而不是表達式。

JSX嵌套

JSX標簽同樣可以相互嵌套

  const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

注意：
JSX 的特性更接近 JavaScript 而不是 HTML，所以ReactDOM使用小駝峰命名來定義屬性名稱，class變成了className

JSX 防注入攻擊

我們可以放心地在 JSX 當中使用用戶輸入。
React DOM 所有的內容在渲染之前都被轉換成了字符串。

React.createElement()方法

Babel 轉義器會把 JSX 轉換成一個名為 React.createElement() 的方法調用。
下面兩種代碼的作用是完全相同的：

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

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement()這個方法首先會進行一些避免bug的檢查，之后會返回一個類似下面的對象：

const element = {
  type:'h1',
  props: {
    className: 'greeting',
    children:'Hello,world'  
  }
}

這樣的對象唄成為“React元素”。代表所有我們在屏幕上看到的東西。React通過讀取這些對象來構建DOM并保持數據內容一致。