JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。虽然还有其它方式可以编写组件，但大部分 React 开发者更喜欢 JSX 的简洁性，并且在大部分代码库中使用它。
- 为什么 React 将标签和渲染逻辑耦合在一起
一开始js和html，css都是分开放的，但是web交互性变得越来越强，逻辑越来越决定页面内容，所以react将渲染逻辑和标签放在一起（组件）
- JSX 与 HTML 有什么区别
JSX语法规则：
只能返回一个根元素
- 为什么？因为JSX最后会编译为render函数，在底层转换为JavaScript对象，而不能在一个函数中返回多个对象，除非用一个数组把他们包起来，所以只能返回一个根元素或者用一个父元素或者Fragment包裹
标签必须闭合
- 自闭合标签如
必须写成
- 只有开始标签的元素需要改写成闭合标签，例如
- 改写成
使用驼峰命名大部分属性
- JSX最终会被转换为JavaScript，JSX属性也会被转换为js对象中的键值对
区别：
-
需要在JSX中返回单个父元素，HTML则可以任意操作
-
可以在JSX中实现js，放在{ ... }中即可，HTML需要脚本标签引入或者外部js文件
-
JSX中所有标签自闭合，也就是说，可以将写成
，将 写成 。HTML 中的自闭合标签可以在右尖括号没有斜线的情况下自闭合，即
可以写成
。但是在 JSX 中，需要加上斜杠。 -
JSX定义class和for属性，要定义为className和HTMLFor属性，因为class和for是js中的保留字
-
JSX中使用驼峰命名写所有HTML属性，例如onclick 要写成 onClick，接近JavaScript
-
JSX将内联对象编写为一个对象，属性采用驼峰命名，值在引号中，内联传给JSX。不建议
内联对象属性需要驼峰命名，例如background-color要写成backgroundColor
const inlineStyle = {
color: "#2ecc71",
fontSize: "26px",
};
return ( <>
<div className="container">
<p style={inlineStyle}>Hi campers</p>
<p>How's coding going</p>
<p>What is up?</p>
{new Date().toDateString()} <br/> <br/> {2 + 5} is seven in word <br/>
<button onClick={sayHI}>ALert Hi</button>
</div>
</>
);
};
export default Article;
