文章目录
概述
JSX全称为 JavaScript XML，它是由react定义的一种类似于XML的JS扩展语法：XML+JS，用来创建react的虚拟DOM对象。
基本使用
<script src="../js/babel.min.js"></script>
<script type="text/babel">
// 创建虚拟DOM
const VDom = "<div id="title">Hello World</div> "
// 挂载到容器
ReactDOM.render(VDom,document.getElementById("root"))
</script>
这里直接创建一个内容为Hello World,id为title的div标签,将其赋给VDom，这就是JSX的基本使用，需要注意的是
1.我们需要babel.min.js文件来解析它
2.script类型为babel
3.它并不是字符串，也不是HTML/XML标签
4.它最终产生的就是一个JS对象
基本语法规则
看似简单的JSX其实也需要遵循一些语法规则，让我们来看下，并一一解析。
- 定义虚拟DOM时，不要写引号
- 标签中混入JS表达式时要用{}
- 样式的类名指定不要用class，要哟个className
- 内联样式，要用 style={{key：value}}的形式去写
- 只有一个根标签
- 标签必须要闭合
- 标签首字母
1.若小写字母开头，则将标签转为html中的同名元素，若html中无该标签对应的同名元素，则报错
2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
1.定义虚拟DOM时，不要写引号
很容易理解，就是我们定义的虚拟DOM并不需要用引号将其包裹
如下写法就是错误的
const VDom = "<div id="title">Hello World</div>"
应该去掉引号
const VDom = <div id="title">Hello World</div>
2.标签中混入JS表达式时要用{}
有时我们想要引入一定的JS代码，这时我们就可以通过{}包裹
如引入声明好的变量
const id="title"
// 创建虚拟DOM
const VDom =<div id={id}>Hello World</div>
3.样式的类名指定不要用class，要哟个className
为了区分类关键字class，标签类名应为className
const VDom =<div className="myclass">Hello World</div>
当然写错了也会友情提醒您：我不懂你的意思，你是在说className吗
4.内联样式，要用 style={{key：value}}的形式去写
const VDom =<div style={{color:"green",fontSize:"16px"}}>Hello World</div>
需要注意的是这里green要用引号包围，不然会被解析为变量未找到。
如果是像字体大小、背景颜色这种组合词的话需要用小驼峰命名法
5.只有一个根标签
也就是说我们在写的所有标签都应该被包裹在一个根标签内，如
const VDom =(
<div id="title">
<span>Hello World</span>
</div>
)
这里根标签是id为title的div标签，且只有一个根标签。
像以下多个根标签则会标错
const VDom =(
<div id="title">
<span>Hello World</span>
</div>
<p></p>
)
报错意思就是说相邻的JSX元素应该包裹在一个封闭的标签中
但如果我们就想这样的形式，又不想再在外面添加一个总的根标签，这时我们可以用React.Fragment包裹
const VDom =(
<React.Fragment>
<div id="title">
<span>Hello World</span>
</div>
<p></p>
</React.Fragment>
)
6.标签必须要闭合
这就很容易理解了，不多赘述
7.标签首字母
1.若小写字母开头，则将标签转为html中的同名元素，若html中无该标签对应的同名元素，则报错
就是标签名的首字母若是小写，则解析时会根据标签名去html标签中对比寻找，找到则解析成对应html，不然直接报错
如以下study标签
<study></study>
2.若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
标签名首字母大写时，会将其解析为组件名，然后去组件中找，没找到则报错
<Study></Study>