持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
什么是jsx？
一句话概括：JavaScript+XML,是一个看起来很像XML的JavaScript语法扩展。
看如下代码：
以上就是个JSX,可以看到，可以直接在js中利用前端开发者熟悉的html标签来构建视图，这样的代码结构层非常清晰，也便于维护，上手更便捷。但是在使用JSX的时候，有些问题需要注意：
JSX是JS的语法扩展，但是浏览器并不识别这些扩展，所以需要借助babel.js来对JSX进行编译，使其成为浏览器识别的语法，也就是React.createElement,具体做法如下：
这里有两点需要注意：使用JSX时必须引用babel对代码进行编译，该script标签内的代码需要使用babel编译时，必须设置type='text/babel'。
JSX本身是一个值，这个值是一个ReactElement,而非字符串，在编写的时候一定要注意，如果给一个字符串类型的值时，代码如下：
最终在视图上h1并不会被解析成一个标签，而是解析成文本内容，这里主要是因为JSX在解析的时候会被编译，字符串内容会进行转义，这样在设置innerHTML的时候，就不会被解析标签了。
使用之插值表达式
插值表达式
使用JSX时，需要视图和数据进行绑定，就需要使用插值表达式，也就是在视图中插入数据。写法跟es6中的模板字符串类似，不过用的是{数据}，而非${数据}，例如：
在使用插值表达式时，需要注意以下几个问题：
- {}中，接受一个JS表达式，可以是运算式，变量或函数调用等。表达式的意思就是这个语句一定会有一个值返回，而插值的意思是表达式计算得到的值插入到视图中去。
- {}中，接受的是函数调用时，该函数需要返回值，明确{}中可以放什么样的代码之后，再看一下各种不同类型的数据，在插值之后去渲染视图的表现。
- 字符串、数字：原样输出，eg:
<h1>{"榴莲"}是水果之王</h1>
最后可以得到：
<h1>榴莲是水果之王</h1>
- 布尔值、空、未定义：输出空值，也不会有错误。如：
<h1>hello {undefined}</h1>
最后可以得到：
<h1>hello</h1>
- 数组：支持直接输出，默认情况下吧数组的连接符“，”替换成空，然后直接输出，eg:
输出结果为：
<div>a b c</div>
- 对象：不能直接输出，但是可以通过其他方式，如：Object.values、Object.keys等方法解析对象，转换成数组之后进行输出。eg:
输出结果为：
<div>nameage</div>
