React

本文来自于官网
按照官网里面融合了自己的思想，希望对读者理解react有一点帮助。
JSX介绍

const element = <h1>Hello,World!</h1>；

这种类似于HTML的写法，就是所谓的JSX语法。如果单独的拿出来某一个部分的话，我们可以具体分析一下：

<h1>Hello,World!</h1>

这个毫无疑问，当然是HTML了。
但把它赋给一个变量的话，它就是所谓但JSX。

import React,{ Component } from 'react';

const name = '天下';
const  element = <h1>Hello,World!</h1>;
class JSX extends Component {
    render() {
        return (
            <div>
               element
            </div>
        )
    }
}
export default JSX;

运行结果显然是：

element

因为这里的element并不是一个变量，是一个字符串而已。

如果是这样呢？

import React,{ Component } from 'react';

const name = '天下';
const  element = <h1>Hello,World!</h1>;
class JSX extends Component {
    render() {
        return (
            <div>
               { element }
            </div>
        )
    }
}
export default JSX;

运行结果就是：

Hello,World!

因为这里的element是变量。遵从JSX语法。
为什么选择JSX？
React拥抱渲染逻辑和其他UI逻辑固有耦合的事实：事件如何处理，状态如何随时间变化以及数据如何准备展示。
通过将标签和逻辑放在单独的文件中，而不是认为的分离技术，伴有松散耦合单元的React称为组件（components）。

在JSX中嵌入表达式

import React,{ Component } from 'react';

const name = '天下';
const  element = <h1>Hello,World!</h1>;

const user = {
    name: '天下',
    age: 18,
}
function formateName(user) {
    return user.name +''+user.age;
}

class JSX extends Component {
    render() {
        return (
            <div>
               Hello,{ formateName(user) }
            </div>
        )
    }
}

export default JSX;