摘要
在做react开发的时候，我们知道最后要通过render方法来将React元素挂载到真实的DOM上。而创建一个React元素，可以通过两种方式创建。
（1）通过JSX方式
（2）通过React.createElement()方法创建
而JSX的方式，最终也会被babel转换，变成通过React.createElement()方法进行创建。
之所以这样子，是因为JSX能够很大程度的方便开发，可以少写很多代码。
而本篇文章就是讲解一下如何在React中使用JSX。
1.在JSX中使用{ }
例如当我们通过JSX创建一个React元素：
let a = 1
const div = <div></div>
而在这个div中想使用变量a，我们就可以通过{}来对变量进行引入。
（1）引入变量
const div = <div>{
a}</div> //变量
当然，除了引入变量这种，还有很多中方式可以在{}中进行编写。
（2）引入对象属性
let empty = {
a: 1,
b: 2
}
const div = <div>{
empty.a}</div> //对象属性
（3）引入计算表达式
const div = <div>{
empty.a + empty.b}</div> //计算表达式
（4）引入函数
const fn = ()=>{
return 2
}
const div = <div>{
fn()}</div> //函数
（5）引入逻辑表达式
const div = <div>{
fn() === 2 ? 1 : 2}</div> //逻辑表达式
（6）引入数组
const div = <div>{
[1,2,3,4,5]}</div> //数组
OK，除了上面写在大括号里的，还有几种数据类型没有引入。这里需要注意，大括号里虽然可以解析数组，但是不能解析对象（有一种特例后面会说）。
如果在大括号里面放入了对象，那么React就会报错。
同样的，如果在大括号里的是一个方法，也会报错（也有一种特例）。
如果在{}里面，引入了布尔类型，undefined，null这三种数据类型。React虽然不会报错，但是并不会渲染到真实DOM上。
2.在JSX中嵌套标签
在正常的HTML里面，标签是可以任意嵌套的。如果在React中，可以看下面的代码：
class Em extends React.Component {
render(){
return <div></div>
}
}
const div = (<div>
<Em>
<p>123</p>
</Em>
</div>)
通过上面的方式，是没办法实现出想要的效果的。因为它不符合JSX的使用规范，对于Em组件，是没有收到p标签的，所以也不会对它进行展示。
正确写法如下：
class Em extends React.Component {
render(){
return <div>{
this.props.children}</div>
}
}
const div = (<div>
<Em>
<p>123</p>
</Em>
</div>)
这种方式，主要是通过props.children拿到了P标签，并且在Em组件里面渲染。
说到这里，可以说一下另一个用到{}的地方，当我们给React组件绑定属性的时候，可以通过…的方式：
let props = {
a:1,b:2}
const div = <div {
...props}>123</div>
请记住，这里的{…props}和Es6的解构并不是一回事！
也就是这种写法只能出现在JSX里面，不能在HTML里面这么写。因为在这里babel已经对它进行了处理所以才可以这么写。
3.{}中的样式和事件处理
刚才说{}里面不应该有对象和函数，但是有个别的特例，就是style样式，和事件处理。
在JSX中给标签添加样式是这么写的：
const div = <div style={
{
fontSize:'14px',aaa:'2'}}></div>
也就是{}里面的，是该标签的样式对象。值得注意的是里面的key都是用小驼峰命名的。而且必须有效，不然是无法渲染到真实DOM的标签上的。
在JSX中给标签添加事件是这么写的：
const div = <div onClick={
() => {
console.log(123)}}>123</div>
同样，事件名也是小驼峰式命名的。
4.在JSX中使用语句
在jsx中是可以通过语句来对React元素进行处理的。例如
条件判断语句：
let div = [<div>123</div>];
if(1+1 === 2){
div.push(<div>true</div>)
}else{
div.push(<div>false</div>)
}
循环语句：
let div = [1,2,3,4,5].map((item,index) => {
return <li key={
index}>{
item}</li>
})
关于JSX的一些使用就先说这么多，后续有新内容会继续补充。