下面的代碼即不是HTML，也不是JavaScript，而是JSX：

const element = <h1>Hello, world!</h1>;

JSX語言允許在常規(guī)JavaScript語句中直接插入HTML的語言。JSX語言中的HTML代碼段叫做JSX表達(dá)式，經(jīng)編譯后，它就是一段JavaScript對象。

因為JSX表達(dá)式本質(zhì)是JavaScript對象，所以它可以用于任何語句中，如if、for：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>; // 在if語句中使用JSX表達(dá)式
  }
  return <h1>Hello, Stranger.</h1>;
}

JSX的HTML標(biāo)簽時，也可以再插入JavaScript。如：

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

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}! // 插入函數(shù)調(diào)用
  </h1>
);

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

上述代碼，通過在HTML元素內(nèi)使用{}來插入JavaScript代碼。

和普通的HTML一樣，JSX表達(dá)式中的標(biāo)簽可以指定特性（attributes） 。需要注意，這些特性以駱駝法（camelCase）命名。

const element = <div tabIndex="0"></div>; // 直接賦值
const element = <img src={user.avatarUrl}></img>; // 嵌入JavaScript賦值

一個HTML標(biāo)簽可以包含若干個子標(biāo)簽：

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

JSX表達(dá)式被編譯后，成為一段生成一個對象的JavaScript代碼：

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

// 編譯后的代碼
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 生成相當(dāng)于如下的對象
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

這個由JSX表達(dá)式生成的對象，叫做React元素（Element）。

什么是組件？什么是State？什么是Props？

好，這一節(jié)就到這里。后續(xù)我將逐步介紹React技術(shù)細(xì)節(jié)，來慢慢解答上述問題。

想學(xué)計算機(jī)技術(shù)嗎？需要1對1專業(yè)級導(dǎo)師指導(dǎo)嗎？想要團(tuán)隊陪你一起進(jìn)步嗎?歡迎加我為好友！微信號：iTekka。