React框架采用的是MVC体系，Vue框架采用的是MVVM体系
MVC:model数据层+view视图层+controller控制层
-
我们需要按照专业的语法去构建视图（页面）：React中是基于jsx语法来构建视图的
-
构建数据层：但凡在视图中，需要“动态”处理的(需要变化的，不论是样式还是内容)，我们都要有对应的数据模型
-
控制层：当我们在视图中(或者根据业务需求)进行某些操作的时候，都是去修改相关的数据，然后React框架会按照最新的数据，重新渲染视图，以此让用户看到最新的效果！ 数据驱动视图的渲染
与MVVM模型的区别就是MVC是“单向驱动”,MVVM模型是“双向驱动（v-model）”
JSX构建视图的基础知识
- JSX:就是把js and xml(html)把js和html标签混合在了一起。
- 在HTML中嵌入“JS表达式”，需要基于“{} 胡子语法”，JS表达式：执行有结果的
- 每一个构建的视图，只能有一个“根节点”
- React给我们提供了一个特殊的节点(标签)：React.Fragment 空文档标记标签， <></>，既保证了可以只有一个根节点，又不新增一个HTML层级结构！！
- {}胡子语法中嵌入不同的值，所呈现出来的特点：
+ number/string：值是啥，就渲染出来啥
+ boolean/null/undefined/Symbol/BigInt：渲染的内容是空
+ 除数组对象外，其余对象一般都不支持在{}中进行渲染，但是也有特殊情况： JSX虚拟DOM对象
+ 给元素设置style行内样式，要求必须写成一个对象格式 {{fontSize:"16px"}}(属性名小驼峰写法)
+ 数组对象：把数组的每一项都分别拿出来渲染「并不是变为字符串渲染，中间没有逗号」
+ 函数对象：不支持在{}中渲染，但是可以作为函数组件，用<Component/>方式渲染!!
+ 设置样式类名：需要把class替换为className
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( .... );
