JSX 是一种 Javascript 的语法扩展， JSX = Javascript + XML ，即在 Javascript 里面写 XML ，因为 JSX 的这个特性，所以他即具备了 Javascript 的灵活性，同时又兼具 html 的语义化和直观性
有时候，我们使用渲染函数（ render function ）来抽象组件，渲染函数不是很清楚的参见 官方文档 , 而渲染函数有时候写起来是非常痛苦的
其对应的模板是下面：
这显然是吃力不讨好的，这个时候就派上 JSX 上场了。在 Vue 中使用 JSX ，需要使用 Babel 插件 ，它可以让我们回到更接近于模板的语法上，接下来就让我们一起开始在 Vue 中写 JSX 吧
快读创建一个 Vue 项目，直接使用 vue-cli 创建一个项目：
安装依赖：
配置 .babelrc ：
这里展示在 Vue 中书写一些基础内容，包括纯文本、动态内容、标签使用、自定义组件的使用，这些跟我们平时使用单文件组件类似，如下所示：
Attributes 的绑定跟普通的 HTML 结构一样
注意，如果动态属性，之前是 v-bind:placeholder="this.placeholderText" 变成了 placeholder={this.placeholderText}
我们也可以展开一个对象
像 input 标签，就可以如下批量绑定属性
插槽的入门可以看我的另外一篇文章
我们来看下怎么实现具名插槽和作用域插槽
具名插槽 ：父组件的写法和单文件组件模板的类似，通过 slot="header" 这样方式指定要插入的位置。子组件通过 this.$slots.header 方式指定插槽的名称，其中 header 就是插槽的名称
父组件：
子组件：
作用域插槽 ：子组件中通过 {this.$scopedSlots.test({ user: this.user })} 指定插槽的名称是 test ，并将 user 传递给父组件。父组件在书写子组件标签的时候，通过 scopedSlots 值指定插入的位置是 test ，并在回调函数获取到子组件传入的 user 值
父组件：
子组件：
常见的指令如下所示：
函数式组件是一个无状态、无实例的组件，详见 官网说明 ，新建一个 FunctionalComponent.js 文件，内容如下：
父组件中调用如下:
本文主要介绍了为什么要在 Vue 中使用 JSX ，以及如何在 Vue 中使用 JSX
希望对大家有所帮助~
Babel Preset JSX
Vue 官方文档
学会使用 Vue JSX, 一车老干妈都是你的
如何在 Vue 中使用 JSX 以及使用它的原因