Webpack + React 開發 02 JSX 語法

 

HTML 語言直接寫在 JavaScript 語言之中，不加任何引號，這就是 JSX 的語法，它容許 HTML 與 JavaScript 的混寫；

render(<h1>Hello World</h1>, document.getElementById('helloworldDiv'));

JSX 的基本語法規則：遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。

var names = ['Alice', 'Emily', 'Kate'];

render(
  <div>
  {
    names.map( name => {
      return <div>Hello, {name}!</div>
    })
  }
  </div>,
  document.getElementById('helloworldDiv')
);

JSX 容許直接在模板插入 JavaScript 變量。若是這個變量是一個數組，則會展開這個數組的全部成員；

var arr = [
  <h1>Hello world!</h1>,
  <h2>React is awesome</h2>,
];
render(<div>{arr}</div>,  document.getElementById('helloworldDiv'));

上面代碼的arr變量是一個數組，結果 JSX 會把它的全部成員，添加到模板；