JSX是一种Javascript的语法扩展，即具备了Javascript的全部功能，同时又兼具html的语义化和直观性。它可以让我们在JS中写模板语法：上面这段代码既不是 HTML 也不是字符串，被称之为 JSX

组件不能作为JSX组件使用，出现该错误有多个原因：返回JSX元素数组，而不是单个元素。从组件中返回JSX元素或者null以外的任何值。使用过时的React类型声明。

从源码中，我们可以看到 createElement 函数接收三个参数: type(标签类型)、config(标签中的属性)、children(子标签)但是，在编写 JSX 的时候，一个标签通常会包含多个子标签

很多模版语言的框架（比如 Vue、Angular ）都会内置一些条件语法，比如 ng-if、v-if 等，但是在 React 的 JSX 里面，没有这样的指令，它提供给我们更灵活的选择，但是这种灵活也会带来很多问题

遵循单一目的组件哲学，避免过于复杂的多行组件，并尽可能地将组件分解。请记住，在父组件内部完成条件判断操作总是比在组件本身内部完成更为干净。

Vue.js 具有简单的 API 和几个选项，可用于在我们的组件中定义HTML模板。我们可以使用<template>标签选项，在根组件实例上定义template属性，或者使用单文件组件。上面的选项很棒并且可以完美地工作

这被称为 JSX，是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX，JSX 可以生成 React “元素”，而且JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

JSX语法是React.createElement的简写语法，要使用它需要汇入(import)react函式库，并且要透过babel工具编译才可以

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.

不仅仅是在React（或受JSX启发模板），对于在各种框架中进行模板化，JSX是如今一个非常受欢迎的选择。然而，如果你不喜欢使用JSX，或者你的项目想避免使用它，又或者只是受好奇心驱使

脚手架工具：选用React官方推荐的脚手架工具create-react-app，安装npm install create-react-app -g。项目初始化步骤：

react中基本都使用JSX来开发，但JSX其实是javascript的一种语法糖。语法糖就是提供了一种全新的方式书写代码，但是其实现原理与之前的写法相同。

最近选用的框架iview表单组件的render写法让人有点不习惯，尤其是在写比较复杂的逻辑的时候，还是感觉模 板式的写法比较方便且可读性较强。而render函数除了支持配置写法外，还支持jsx的写法。由于之前有用过react，因此对jsx并不陌生，可以直接上手。

本文会先解释一下JSX的工作原理，再介绍一下如何用不寻常的方式来使用JSX。