点击上方蓝字关注“小郑搞码事”，每天都能学到知识，搞懂一个问题！

从写React项目开始，我们熟悉了一种语法，叫JSX，它很好的将逻辑和模板融合在一起。当然，有一点我们应该很清楚，在React项目开发的时候，我们可以使用JSX来编写代码，也可以使用纯JavaScript来编写代码，这样的话，即使不学JSX也可以正常开发React项目。

然而，facebook官方推荐我们使用JSX来写React代码。为什么呢？下面从四个方面介绍，带你学会使用JSX。

一、JSX如何区分React组件和HTML标签

HTML类型的标签第一个字母用小写来表示，React组件标签第一个字母用大写来表示。

比如：

上面代码是一个HTML类型的标签定义，需要知道两点：

第一，当一个标签里面内容为空的时候，可以直接使用自闭和标签;

第二，因为JSX本身是JavaScript语法，所以一些JavaScript中的保留字要用其他的方式书写，就像上面class要写成className。

这里写的是一个React组件，注意名字第一个字母大写。

二、JSX中JavaScript表达式如何定义

标签对标签（或组件名），{}对JS代码，无属性默认为true

什么意思了？就是说在JSX语法中，当遇到标签的时候就解释成组件或HTML标签，当遇到{}包裹的时候就当成JavaScript代码来执行。

比如：

上面代码中，{}内会当表达式处理，isLoggIn为true时输出组件<Nav/>否则输出<LoginForm/>

当省略一个属性的值的时候，如<Nav isDisable/>。JSX会自动把它的值认为是true（isDisable=true）。

三、JSX注释如何写

在子组件中写注释的时候要用{}

比如：

四、多属性如何定义

用“三点”操作符来简化多个属性的编写。举个例子：

显然，上面这种写法，当出现更多属性的时候，会显得很难看。下面看一个更优雅的写法。