这是我参与「第四届青训营」笔记创作活动的第7天。

这是React系列入门的第二篇笔记。在上一篇笔记中，我们介绍了React，安装并且运行了React的hello world程序。在本篇笔记中，我们介绍React使用的开发语言——JSX。

JSX语法

1. 什么是JSX语法？

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换到纯 JavaScript ，最后再由浏览器执行。

当然了，React使用JSX语法的优点和缺点都有：

• JSX语法的优点：在实际开发中，JSX 在产品打包阶段都已经编译成纯 JavaScript，不会带来任何副作用，反而会让代码更加直观并易于维护。 编译过程由Babel 的 JSX 编译器实现。
• JSX语法的缺点：对于初学者而言，需要学习新的语言和语法。这也是 Vue的上手难度比React低很多的原因之一。

就我而言，当我深入了解JSX之后，觉得它还是非常好用的，虽然刚开始学的时候会有点不习惯。

2. 通过例子学习JSX原理

要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构。

我们看下面的DOM结构：

<div class='app' id='appRoot'>
    <h1 class='title'>欢迎加入React的世界！</h1>
    <p>
        React.js 是一个帮助你构建页面 UI 的库
    </p>
</div>

其实，上面这个HTML代码的所有信息我们都可以使用JavaScript对象来表示：

{
    tag: 'div',
    attrs: { className: 'app', id: 'appRoot'},
    children: [
        {
            tag: 'h1',
            attrs: { className: 'title' },
            children: ['欢迎加入React的世界！']
        },
        {
            tag: 'p',
            attrs: null,
            children: ['React.js 是一个构建页面 UI 的库']
        }
    ]
}

但是，全用JavaScript来写这样的页面实在是太长了，而且结构上也不是很清晰，不如HTML的方式方便。

于是 React就融合了两种语言的优势，在JavaScript 的语法基础上进行了扩展，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译时，会把类似 HTML 的 JSX结构自动转换成 JavaScript 的对象结构，无需我们操心。

我们通过JSX来重写上述HTML:

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render () {
        return (
            <div className='app' id='appRoot'>
                <h1 className='title'>欢迎加入React的世界！</h1>
                <p>
                    React.js 是一个构建页面 UI 的库
                </p>
            </div>
        )
    }
}

ReactDOM.render(
    <App />,
    document.getElementById('root')
)

经过编译后的js代码为：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render () {
        return (
            React.createElement(
                "div",
                {
                    className: 'app',
                    id: 'appRoot'
                },
                React.createElement(
                    "h1",
                    { className: 'title' },
                    "欢迎加入React的世界！"
                ),
                React.createElement(
                    "p",
                    null,
                    "React.js 是一个构建页面 UI 的库"
                )
            )
        )
    }
} 

ReactDOM.render(
    React.createElement(App),
    document.getElementById('root')
)

React.createElement 会构建一个 JavaScript 对象来描述我们的 HTML 结构的信息，包括标签名、属性、 还有子元素等, 语法为：

React.createElement(
    type,
    [props],
    [...children]
)

整个过程为：

• JSX —使用react构造组件，bable进行编译—> JavaScript对象 — ReactDOM.render() —>DOM 元素 —>插入页面