React 学习JSX

JSX介绍
考虑一下这个变量的声明：

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

这种既不是字符串也不是HTML。而是JSX。它是javaScript的一种扩展语法。我们推荐在React种使用这种语法来描述UI信息。
为什么选择JSX
React拥抱渲染逻辑与其他UI逻辑固有耦合的事实：事件如何处理，状态如何随着事件变化以及数据如何准备显示。
通过将标签和逻辑放在不同的文件中，而不是人为的分离技术。伴有松散耦合的React单元称为组件。
理解：所谓的标签就是普通的HTML标签。
问题：
1. 组件还不是很明白
2. 松散耦合是什么？
在JSX中嵌入表达式
在下面的例子中，我们声明了一个name的变量，然后在JSX中使用花括号将其括起来。

import React,{ Component } from 'react';
const name = '天下';
class JSX extends Component {
    render() {
        return (
            <div>
                Hello,{ name }
            </div>
        )
    }
}
export default JSX;

在JSX中也可以嵌入函数

import React,{ Component } from 'react';
const name = '天下';

const user = {
    name: '天下',
    age: 18,
}
function formateName(user) {
    return (
        <span>
            { user.name + ' ' + user.age }
        </span>
    )
}
class JSX extends Component {
    render() {
        return (
            <div>
                <div>Hello,{ name }</div>
                <div>Hello, { formateName(user) } </div>
            </div>
        )
    }
}
export default JSX;

JSX也是一个表达式
编译之后，JSX就变成了常规的JavaScript。
这意味上在if语句和for语句中使用JSX，用它给变量赋值，当作参数接受，或者作为函数的返回值。
理解：就是在if或者for语句中可以使用JSX。

import React,{ Component } from 'react';
const name = '天下';
const user = {
    name: '天下',
    age: 18,
}
function formateName(user) {
    return (
        <span>
            { user.name + ' ' + user.age }
        </span>
    )
}

function greeting(user) {
    if(user) {
        return (
            <div>Hello,{ formateName(user) } </div>
        )
    }
    return <div>Hello,World!</div>
}
class JSX extends Component {
    render() {
        return (
            <div>
                <div>Hello,{ name }</div>
                <div>{ greeting(user) } </div>
            </div>
        )
    }
}
export default JSX;

用JSX指定属性值
您可以使用双引号来指定字符串字面量作为属性值。‘

const element = <div dataIndex='0'></div>

您可以用花括号嵌入一个JavaScript表达式作为属性值。

const element = <img src={ img.url } />

用JSX指定子元素
jsx可能包含子元素：

const element = <div>
                    <h1>hello,World!</h1>
                    <h2>我想看见你</h2>
                </div>

JSX防止注入攻击
在JSX嵌入用户输入是安全的：

const title = response.potentialMalicousInput;
const element = <h1>{ title }</h1>

JSX表示对象
问题：
什么是XSS（跨站脚本）攻击？