React前端工程师，必须要知道的JSX基础知识

最近React是相当火爆，目前前端最流行的框架是React和VUE，很多前端学习React技术，必须要了解ES6和JSX，目前大部分浏览器只能执行ES5标准的JS代码，所以JSX需要通过babel编译后才能执行。

React

初看JSX语法你可能也会觉得它像一种模板引擎语言。事实上不是，它就是基于 JavaScript，在 React 当中的一种语法扩展的实现。

JSX 其是一个语法扩展，它既不是单纯的字符串，也不是 HTML，虽然长得和 HTML 很像甚至基本上看起来一样。但事实上它是 React 内部实现的一种，允许我们直接在 JS 里书写 UI 的方式。

JSX 被用来创建 React 当中的 Elements，React 当中的元素。然后 React 再通过一些方法，把 JSX 创建的元素，渲染成我们在浏览器当中看到的 DOM元素。

JSX 尽管使用了非常多的类似 HTML 的标签语法，但 JSX 只是一种在 JavaScript 当中书写 UI 的实现（其实就是JS和HTML混写），所以你在理解的时候不要把 HTML 的相关知识先入为主地代入。不要问为什么可以这样写，怎么能这么写，怎么和 HTML 不一样？一类的问题，因为本来就不是同一种东西，另外也不要觉得 JSX 奇怪，不要觉得不适应，你写写就适应了。而且相信我，JSX 已经是书写 UI 最高效还保持了良好可读性的一种实现了。

开始之前，大家自行百度搜索如何搭建React编译执行环境，本文就不再介绍了。

JSX原理

我们想要在浏览器里直接运行采用 JSX 语法的 JavaScript 显然暂时是不可能实现的，在实际的生产过程中，我们需要利用 Babel 一类的转译器来将我们的 JSX 语法或者 ES6 语法转译成浏览器可以直接运行的 JavaScript，事实上 JSX 在经过转译之后，会变成 React 创建Element 的一个方法：

ReactDOM.render(
<p>Hello world!</p>,
document.getElementById('container')
)

编译之后就会变成下面这样：

ReactDOM.render(
React.createElement('p',null,`Hello world!`),
document.getElementById('container')
)

JSX 基本语法

JSX 元素

const title = <h1>React Learning</h1>

我们用JSX创建的元素对象一般来说是不变的，所以通过 const 关键字来声明一个 React元素，而不是我们以往经常使用的 var

为了能让我们的 JSX 元素在页面上渲染出来预览查看，我们还需要添加两段代码：

在 HTML 窗格里添加：

<div id="root"></div>

在JS窗格的最底部添加：

// 这是将 JSX元素渲染成 DOM 的方法
ReactDOM.render(title,document.getElementById('root'))

我们通过 ReactDOM 的 render 方法，将 title 元素渲染至 id 为 root 的页面容器当中。

JSX 属性

JSX 的标签同样可以拥有自己的属性：

const title = <h1 id="main">React Learning</h1>

但它和 HTML 又不是完全相同的，例如我们想要为 JSX标签添加 class 的时候需要：

// 注意是 className 而不是 class
const title = <h1 className="main">React Learning</h1>

所有支持的 HTML属性 大家可以自行百度搜索查询API文档。

JSX 嵌套

JSX 的标签也可以像 HTML 一样相互嵌套，一般有嵌套解构的 JSX 元素外面，我们习惯于为它加上一个小括号：

const title = (
<div>
<h1 className="main">React Learning</h1>
<p>Let's learn JSX</p>
</div>
)

需要注意的是，JSX 在嵌套时，最外层有且只能有一个标签，否则就会出错哟：

// 这是一个错误示例
const title = (
<h1 className="main">React Learning</h1>
<p>Let's learn JSX</p>
)

JSX表达式

在 JSX 元素中，我们同样可以使用 JavaScript 表达式，在 JSX 当中的表达式需要用一个大括号括起来：

function sayhi(name) {
return 'Hi,' + name;
}
const title = (
<div>
<h1 className="main">React Learning</h1>
<p>Let's learn JSX. <span>{sayhi('you')}</span></p>
</div>
)