react-jsx

react04

jsx语法 - 01

基础知识： jsx == javascript + xml(html) 把js和heml标签混合到一起
react视图编写及构建的简要流程 ：

如何在react中使vs code支持格式化和快捷键提示：1,

2,修改文件后缀为jsx，因为webpack的打包规则中可以解析下方的所有后缀文件

react中在html标签中嵌入js表达式，需要基于 { } 语法

• 所谓js表达式：具有明确返回值（执行结果）的表达式
  • 变量 ： {name}
  • 数学运算 : { 1+x } ====> 会把运算的结果渲染出来
  • 判断： 只有三目运算符可以 { true ? ok : no} if判断不行
  • 循环： 命令式循环都不可以： for、forin、forof、while ，因为可能只进行某写处理而无返回值 通常实现循环会借用数组的具有返回值的迭代方法、map…

在ReactDOM.createRoot()时，不能直接使用body 或 HTML直接作为页面的根元素
每一个构建的视图只能有一个”根结点“，否则会报错，如需多个根结点，需在最外层提供一个特殊节点 <></> 起名为 react.fragment 空文档标记标签，保证只有一个根结点，渲染后不会占据渲染层级