React18 03. JSX

一、语法使用上的细节
JSX构建视图的基础知识
JSX：JavaScript and xml(html) 将js与html标签混合到一起

1. 如何快速让VScode支持JSX语法，格式化，快键提示？

• 创建的js文件，将后缀名设置为jsx即可
• webpack的打包规则中，会对.jsx按照js的方式进行处理

2. 在html中嵌入“js表达式”，需要基于{}胡子语法
   js表达式---执行有结果，如：
   变量/值：{text}、
   数学运算：{x+y}、
   判断:（三元运算符）{1?'ok':'no'}、
   循环: 借助数组的迭代方法处理，map
3. 在ReactDom.createRoot()的时候，不能直接把HMTL/BODY作为根容器，需要指定一个额外的盒子,如：#root
4. 每一个构建的视图，只能有一个“根节点”，可以用空文档标记标签<></>（React.Fragment）来保证只有一个根节点又不会增加html层级结构
   
   
5. {}胡子语法中嵌入不同的值，所呈现出来的特点
   1）num/string：直接渲染
   2）boolean/void/undefined/null/Symbol/BigInt: 渲染空
   3）普通object/正则表达式/new XX()/ function(){}：报错
   4）数组Object: 数组将每一项都分别渲染，中间没有逗号，对象数组也报错
   5）函数Object：不支持在{}中渲染
6. 给元素设置样式
   *行内样式，需要使用对象的格式
   
   驼峰命名法： 小驼峰：camelCase 大驼峰：PascalCase kabab-case写法： personal-box xxx_xxx写法：personal_box
   *样式类名： 将class替换成className
   <p className="text">{item.text}</p>
   剩余的案例可以参考这篇咯~ https://www.cnblogs.com/jocelyn11/p/18615483

稀疏数组与密集数组 通过fill将稀疏数组改为密集数组

      {/* 没有数组，单纯循环5次 */}
      {new Array(5).fill(null).map((_, index) => {
        return <button>按钮：{index + 1}</button>;
      })}