JSX构建视图的基础知识
JSX：javascript and xml(html) 把JS和HTML标签混合在了一起「并不是我们之前玩的字符串拼接」
@1 vscode如何支持JSX语法「格式化、快捷提示...」
+ 创建的js文件，我们把后缀名设置为jsx即可，这样js文件中就可以支持JSX语法了
+ webpack打包的规则中，也是会对.jsx这种文件，按照JS的方式进行处理的
@2 在HTML中嵌入“JS表达式”，需要基于“{} 胡子语法”
+ JS表达式：执行有结果的
JS表达式：
变量/值 {text}
数学运算 {1+1} -> {2} {x+y}
判断：三元运算符 {1===1?'OK':'NO'}
循环：借助于数组的迭代方法处理「map」
…..
这不算JS表达式
{
if(1==1){}
switch(num){…}
}
@3 在ReactDOM.createRoot()的时候，不能直接把HTML/BODY做为根容器，需要指定一个额外的盒子「例如：#root」
@4 每一个构建的视图，只能有一个“根节点”
+ 出现多个根节点则报错 Adjacent JSX elements must be wrapped in an enclosing tag.
+ React给我们提供了一个特殊的节点(标签)：React.Fragment 空文档标记标签
<></>
既保证了可以只有一个根节点，又不新增一个HTML层级结构！！
@5 {}胡子语法中嵌入不同的值，所呈现出来的特点
+ number/string：值是啥，就渲染出来啥
+ boolean/null/undefined/Symbol/BigInt：渲染的内容是空
+ 除数组对象外，其余对象一般都不支持在{}中进行渲染，但是也有特殊情况:
+ JSX虚拟DOM对象
+ 给元素设置style行内样式，要求必须写成一个对象格式
+ 数组对象：把数组的每一项都分别拿出来渲染「并不是变为字符串渲染，中间没有逗号」
+ 函数对象：不支持在{}中渲染，但是可以作为函数组件，用<Component/>方式渲染!!
+ ...
@6 给元素设置样式
+ 行内样式：需要基于对象的格式处理，直接写样式字符串会报错
<h2 style={{
color: 'red',
fontSize: '18px' //样式属性要基于驼峰命名法处理
}}>
+ 设置样式类名：需要把class替换为className
<h2 className="box">
import React from 'react'; //React语法核心
import ReactDOM from 'react-dom/client'; //构建HTML(WebApp)的核心
//获取页面中#root的容器，作为“根”容器
const root = ReactDOM.createRoot(document.getElementById('root'));
//基于render方法渲染我们编写的视图，把渲染后的内容，全部插入到#root中进行渲染
root.render(
....
);
需求一：基于数据的值，来判断元素的显示隐藏
let flag = false,
isRun = false;
root.render(
<>
{/!* 控制元素的display样式：不论显示还是隐藏，元素本身都渲染出来了 *!/}
<button style={{
display: flag ? 'block' : 'none'
}}>按钮1</button>
<br />
{/!* 控制元素渲染或者不渲染 *!/}
{flag ? <button>按钮2</button> : null}
<br />
<button>{isRun ? '正在处理中...' : '立即提交注册'}</button>
</>
);
需求二：从服务器获取了一组列表数据，循环动态绑定相关的内容
JSX语法中，所有命令式编程的循环「for、for/in、for/of、while等」都不可用，因为没有返回值，
基本上都用map
let data = [{
id: 1,
title: '哈哈哈哈哈哈'
}, {
id: 2,
title: '呵呵呵呵呵呵呵呵'
}, {
id: 3,
title: '嘻嘻嘻嘻嘻嘻嘻'
}];
root.render(
<>
<h2 className="title">今日新闻</h2>
<ul className="news-box">
{data.map((item, index) => {
/* 循环创建的元素一定设置key属性，属性值是本次循环中的“唯一值”「优化DOM-DIFF」 */
return <li key={item.id}>
<em>{index + 1}</em>
<span>{item.title}</span>
</li>;
})}
</ul>
<br />
{/* 扩展需求:没有数组，就是想单独循环五次 */}
{new Array(5).fill(null).map((_, index) => {
return <button key={index}>
按钮{index + 1}
</button>;
})}
// 这里new Array(5)得到的是稀疏数组，稀疏数组对应的就是密集数组，
// 密集数组：每一项都有值，哪怕值是null
// 使用数组的迭代方法（forEach和map），他们不会去迭代稀疏数组
</>
);
扩展以下命名方法：
驼峰命名法
小驼峰 camelCase 首字母小写，其余每一个有意义单词首字母大写
大驼峰 PascalCase 首字母都要大写
kabab-case 写法：personal-box
