整理一下react的知识点之jsx（持续更新）

1. JSX介绍

• React 使用 JSX 来替代常规的 JavaScript。
• JSX：是 JavaScript XML的缩写。
• JSX， 一种 JavaScript 的语法扩展。脚手架中内置了 @babel/plugin-transform-react-jsx 包，用来解析该语法。
• JSX 用于在 React 中描述用户界面。
• JSX 是在 JavaScript 内部实现的。

示例代码：

// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'

// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>

// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))

2. JSX基本使用

1. JSX 中可以使用 JavaScript 表达式。表达式写在花括号 {} 中。

ReactDOM.render(
    <div>
      <h1>{1+1}</h1>
    </div>
    ,
    document.getElementById('root')
);

2. 在JSX 中不能使用 if else 语句，可以使用三元运算表达式来替代。

<h1>{i === 1 ? 'True!' : 'False'}</h1>

3. React 推荐使用内联样式。可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>我的样式</h1>,
    document.getElementById('root')
);

4. 注释需要写在花括号中

 {/*注释...*/}

5. JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [
  <h1>呵呵</h1>,
  <h2>哈哈</h2>,
]
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('root')
)

注意事项:

1. 由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

2. jsx必须要有一个根节点 （虚拟根节点 1.<></>2.<React.Fragment> </React.Fragment> ）

3. 单标签要闭合  （<input> === <input />）

4. 换行建议使用( )包裹

5. 老版本(16.8)先引入react才能使用jsx （老版本中不引入就会报错React must be in scope when using JSX）