React中JSX的使用注意事项

1、什么是JSX

1、jsx是JavaScript的一种语法扩展，它跟模板语言很接近，但是它充分具备JavaScript的能力。

2、Facebook公司给JSX的定位是JavaScript的扩展（直接决定了浏览器并不会像天然JavaScript一样地支持JSX，需要通过babel转译）

3、JSX会被babel编译为：React.createElement()，React.createElement()将返回一个叫作“ReactElement”的JS对象。

2、如何使用JSX

let view = <header>
  <div>1</div>
  <hr />
  <div>2</div>
</header>;



ReactDOM.render(
  view,
  document.querySelector("#root")
);

3、使用JSX的注意事项

• 必须有,且只有一个顶层的包含元素
  • React.Fragment 文档碎片用于充当包含容器，并不会在 DOM 解析出来
  • <></>
• JSX 不是html，也不是字符串，很多属性在编写时不一样
  • className
  • style
• 列表渲染时，必须有 key 值
• 在 jsx 所有标签必须闭合
• 组件的首字母一定大写，标签一定要小写