【React】05.JSX语法使用上的细节,礼品u盘（react-particles-js）

文件名：【React】05.JSX语法使用上的细节,礼品u盘 【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(...);