Demo1 - Render JSX

在 React 中模板語法的高亮叫做JSX。它允許在JSX把HTML標(biāo)簽直接插入JavaScript代碼。ReactDOM.render()是轉(zhuǎn)換JSX到HTML的方法，渲染它到指定的DOM節(jié)點(diǎn)。

ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('example')
);

注意：你必須使用 <script type="text/babel"> 來標(biāo)識(shí)JSX代碼，并且包含 browser.min.js庫，這個(gè)庫是Bable的瀏覽器版本，能夠進(jìn)入到npm發(fā)布的 babel-core@5，實(shí)際上在瀏覽器中執(zhí)行轉(zhuǎn)換。
在 v0.14 中，React 使用 JSTransform.js來轉(zhuǎn)換 <script type="text/jsx">，它已經(jīng)被廢棄了。

Demo2 - JavaScript in JSX

你也可以在JSX使用JavaScript。它將角括號(hào)（<）作為HTML高亮語法的開始，并作為JavaScript高亮語法的開始括號(hào)（{）。

var names = ['洱海', '長(zhǎng)江', '黃河'];

ReactDOM.render(
  <div>{
      names.map(function (name, index) {
          return <div key={index}>welcome, {name} !</div>
      })
  }</div>,
document.getElementById('example')
)

注意（踩過的坑）：

• 原因：在 script 標(biāo)簽中沒有加 type="text/babel"
• 報(bào)錯(cuò)： Uncaught SyntaxError: Unexpected token <
• 解決：添加type

• 警告：
  Warning: Each child in an array or iterator should have a unique "key" prop. Check the top-level render call using <div>. See https://fb.me/react-warning-keys for more information.
• 解決： 核心代碼 key={index}