React中JSX语法

脚手架里可以删掉的东西如下：

• 根目录里的东西不能删也不能挪地方
• src里可以删掉的东西：只留下index.js其他都可以删掉，App是最外层包着的那个组件，我们基本也不删除
• public里logo可以删除，favicon.ico图标也不影响运行，它是左上角的标，没有他服务器会报错，但没有影响。manifest.json里面的是缓存文件，也不要删了。index.html不要删除了

 <div id="root"></div>
 <!--id是root的div必须有，因为React规定html里必须有一个div，这样才能把VDOM渲染到真实DOM里-->

• index.js文件里只留下引入react和react-dom/client以及App.js
• JSX作用：就是生成虚拟DOM。目的是为了更方便的来写虚拟DOM，而不是为了再浏览器或引擎中实现。
• 用webpack打包完之后，jsx代码就转成了js代码，浏览器里运行的也是js代码，而不是jsx。
• XML叫可扩展标记语言，以前主要用它存储和传递数据。它是用来封装数据的它所有的标记的名字都是自定义的，标记之间放的是一组数据，数据是什么，标签名就可以定义为什么，而且必须是双标记。

创建虚拟DOM的两种方式

1、jsx语法(推荐使用该方法)

const VDOM=<h1>hello</h1>   //使用（）作为整体可以换行书写，不写其实也可以换行
function App(){
  return <h1>hello world</h1>//这是jsx创建虚拟DOM的创建方法
}
export default App

2、React原生方式

const VDOM=React.createElement("h1",{id:test}."hello")

JSX语法

1. 全称：Javascript XML
2. React定义的一种类似于XML的扩展语法js+XML
3. 本质是React.createElement(component,pros,...children)方法的语法糖
4. 作用：用来简化创建虚拟DOM
   • 写法：const VDOM = <h1></h1>
   • 注意：1：它不是字符串，也不是html/xml标签
   • 注意：2：它最终产生的是一个js对象
5. 标签注意：html标签或其他标签

JSX语法规则：

1. 定义虚拟DOM，不要写引号
2. 标签中混入表达式，要用{}把表达式括起来
3. 样式的类名指定不要用class关键字，要用className
4. 内联样式，要用style={{“color”：“#f00”}}的形式，连接属性要用小驼峰命名
5. 虚拟DOM必须只能有一个根标签
6. 标签必须闭合
7. 标签首字母 若小写字母开头，则会把标签转为html同名元素，若无该标签对应的元素，会报错 若大写字母开头，React将其识别为组件，就去渲染对应的组件，若没有该组件，会报错