JSX构建视图的基础知识
JSX：javascript and xml（html）把JS和HTML标签混合在了一起[并不是我们之前玩的字符串标签]
-
1、vscode如何支持JSX语法[格式化、快捷提示…]
创建的js文件，把后缀名设置为jsx即可，这样js文件中就可以支持JSX语法
webpack打包的规则中，也是会对.jsx这种文件，安装JS的方式进行处理的
-
2、在HTML中嵌入"JS表达式"，需要基于 “{} 胡子语法”
JS表达式：执行有结果的 -
3、在 ReactDOM.createRoot()的时候，不能直接把HTML/BODY作为根容器，需要指定一个额外的盒子（例如：#root）
-
4、每一个构建的视图，只能有一个"根节点"
出现多个根节点则报错，
React给我们提供了一个特殊的节点（标签）：React.Fragment 空文档标记标签
<></>既保证了可以只有一个根节点，又不新增一个HTML层级结构
JS表达式：
变量/值 {text}
数学运算 {1+1} -> 2
判断：三元运算符 { 1===1?‘OK’:'NO} ()
循环：借助于数组的迭代方法处理[ map ]
这不算JS表达式
if/switch
{if(1===1){}switch(num){...}}
所有命令式编程的循环[for、for/in、for/of、while等]
{for(let i=0;i>10;i++){}}
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(...
);
