【React】05.JSX语法使用上的细节

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(
	...
);