大家好，今天我要开始去总结react，帮助自己梳理知识，同时也分享给大家，希望给大家有所帮助。那么今天要介绍的是react的里面的jsx。那么想要认识jsx，我们需要先从react开始了解，为什么要用jsx。
初识react
概念：react是一个用于构建用户界面的 js库，是一个将数据渲染成视图的框架。
特点(学习它的原因): 在原生的js中，操作dom是比较繁琐效率低的，并且浏览器会重绘重排，且没有组件化方案。
- 组件化模式，
声明式编码（简单来说：你想吃东西，直接说 你吃 就可以完成）- 有
react native，通过react的语法，编写移动端的开发- 通过其
虚拟dom和diff算法，减少了真实dom的交互（vue相似）（使用虚拟dom，不用总是直接操作页面的真实dom，做到最小化页面的重绘）
react编程所需要的文件
| 所需文件 | |
|---|---|
| babel.min.js | 由于一些浏览器不能认识箭头函数es6新增属性，此文件可将es6 转 es5。同时将我们今天介绍的主角 jsx 转 js（因为浏览器只认识js） |
| react.development.js | react的核心库，包括核心组件，组件属性，组件生命周期等 |
| react-dom.development.js | react的扩展库，操作dom的库，比如里面有：render()、hydate()等 |
| 注意：引入这些文件的时候，核心库需要先引入，再引入扩展库。 |
初识jsx
简介：一个类似于XML的js扩展语法。本质上来说就是react.createElement的语法糖，用于简化创建虚拟dom。
为什么不用js，而是用jsx。上面我们提到说js它的原生的特点比较繁琐，同时react是通过其 虚拟dom和diff算法。比如，在使用原生的方式去创建虚拟dom是不方便的。
下面我们举一个例子。
// （部分代码 -- js创建：此时创建多个会比较繁琐)
// 创建
const VDom = react.createElement('h1',{id:'title'},react.createElement('span',null,'hello react'))
渲染
reactDOM.render(VDom,document.getElementById('test'))
// （部分代码 -- jsx语法创建：与我们日常html逻辑相同，方便直观）
// 创建虚拟dom
const VDom = <h1><span>hello react</span></h1>
// 渲染虚拟dom
reactDOM.render(VDom,document.getElementById('test'))
简单来说，与react框架配合，jsx更加方便开发者
jsx使用的特点
- 定义虚拟dom的时候，不写引号。
- 标签中使用js表达式 要使用
{ }包着 - 样式的类名指定不要用 class,用
className - 内联样式，用
style = {{key:value}}的形式去写 - 只有一个根标签
- 标签必须要闭合
- 标签首字母：（1）首字母小写：标签改为html同名元素，若html中同名元素，则报错
（2）首字母大写：
组件：<BigFirstWord></BigFirstWord>react渲染对应的组件，若组件没有定义，则会报错
// 创建虚拟dom（一个简单的示范）
const VDom = (
// 使用 className
<div className='text'>
// {}
<h1>{text}</h1>
// style={{key:'value'}}
<span style={{ fontSize:'30px' }}></span>
</div>
)
注意：jsx的特点中的第二条，标签中使用js的表达式，这里是表达式而不是语句。比如arr.map()、a+b等。语句比如if判断等。
