小编Ed *_*gan的帖子

试图学习React,在他们的官方文档中有一节说明:

"大多数React开发人员使用一种称为JSX的特殊语法,这使得编写这些结构变得更容易."

然后我检查给定的例子:

React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for ",
    props.name
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    ),
    React.createElement(
      "li",
      null,
      "Oculus"
    )
  )
);

29行和470个字符.如何优先使用10行和170个字符的普通常规HTML结构.

<div className="shopping-list">
  <h1>
    Shopping List for {props.name}
  </h1>
  <ul>
    <li>Instagram</li>
    <li>WhatsApp</li>
    <li>Oculus</li>
  </ul>
</div>

JSX版本似乎更复杂,包含所有逗号和引号.是不是因为html的结束标签？