React的JSX构建视图的基础知识

JSX:javascript and xml(html) 把JS和HTML标签混合在了一起（并字符串拼接）

import React from 'react'; //React 语法核心

import ReactDOM from 'react-dom/client'; //构建HTML（WebApp）的核心

//获取页面#root容器，作为‘根’容器

const root = ReactDOM.createRoot(document.getElementById('root'));

//基于react方法渲染我们编写的视图，把渲染后的内容，全部插入到#root中进行渲染

root.render(

<React.StrictMode>

{/* 渲染的内容 */}

<App />

</React.StrictMode>

);

vscode如何支持JSX（语法格式化、快捷提示）    创建的js文件，我们把后缀名设置为jsx即可，这样js文件中就可以支持JSX语法了+ webpack打包的规则中，也是会对.jsx这种文件，按照JS的方式进行处理的

 在HTML中嵌入’JS表达式 ‘，需要基于{} 实现 或 JS表达式:执行有结果的

在ReactDoM.createRoot()的时候，不能直接把HTML/BODY做为根容器，需要指定一个额外的盒子(例如: #root)

每一个构建的视图，只能有一个“根节点”( 出现多个根节点则报错 Adjacent JSX elements must be wrapped in an enclosing tag.)

React给我们提供了一个特殊的节点(标签):React.Fragment空文档标记标签<></>

既保证了可以只有一个根节点，又不新增一个层级结构!!