跟随阮一峰的全栈之路

Demo1 - Render JSX

React 中模板语法的高亮叫做JSX。它允许在JSX把HTML标签直接插入JavaScript代码。ReactDOM.render()是转换JSX到HTML的方法,渲染它到指定的DOM节点。

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

注意:你必须使用 <script type="text/babel"> 来标识JSX代码,并且包含 browser.min.js库,这个库是Bable的浏览器版本,能够进入到npm发布的 babel-core@5,实际上在浏览器中执行转换。
在 v0.14 中,React 使用 JSTransform.js来转换 <script type="text/jsx">,它已经被废弃了。

Demo2 - JavaScript in JSX

你也可以在JSX使用JavaScript。它将角括号(<)作为HTML高亮语法的开始,并作为JavaScript高亮语法的开始括号({)。

var names = ['洱海', '长江', '黄河'];

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

注意(踩过的坑):

  • 原因:在 script 标签中没有加 type="text/babel"
  • 报错: 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}

推荐阅读更多精彩内容