引言

首先我们先来看下下面这个变量的声明

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

这个有趣的语法既不是一个字符串也不是一个HTML标签。

这种语法被称为JSX，是Javascript的一种扩展语法。我们推荐在React中使用JSX去编写我们的UI界面。也许你会觉得JSX很像是模板语言，但是它具有JavaScript的全部功能。

JSX创建了React的元素，在下一节我们会探讨如何将JSX渲染到真是DOM上。接下来，你将学到关于JSX的基础知识。

为什么要使用JSX

React信奉渲染逻辑与UI逻辑是天然耦合的：如何处理事件，状态如何随着时间变化以及数据如何显示在页面上。React用被称为“组件”的松散的耦合单元（同时包含标签代码与逻辑代码）来代替手动地将标签与代码逻辑分散在不懂的文件里。我们将会在接下来的介绍里介绍组件。

React不强制要求使用JSX，但是大部分开发者在开发时发现将UI标签放在JavaScript代码里对观察代码渲染十分有帮助。当然，使用JSX能在开发时向开发者显示更多游泳的错误和警告信息。

在JSX嵌入表达式

在下面的例子里，我们声明了一个name变量并且在JSX中通过一个花括号引用了它。

var name="于一";
var greeting=<h1>Hello {name}</h1>;

ReactDom.render(
    greeting,
    document.getElementById('root')
);

你可以在JSX中通过花括号引用任何有效的JavaScript表达式。比如2+2，user.firstName或formatName(user)，以上这些都是有效的JavaScript表达式。

在下面的例子里，我们在<h1>标签里引用了一个JavaScript函数formatName(user)。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'YUYI',
    lastName: 'WU'
};

const element = (
    <h1>
        Hello,{formatNameuser}!
    </h1>
)

ReactDom.render(
    element,
    document.getElementById('root')
);

为了便于阅读，我们把JSX分成了几行，你在编写代码时可以不这样做。同样我们推荐在使用JSX时将他们包裹在圆括号内以防止编译时被自动插入分号。

JSX也是表达式

在编译之后，JSX表达式就变成了常规的JavaScript的函数调用并且等价于一个JavaScript对象。

这也就意味着你可以在if语句和for循环中使用JSX，你也可以把JSX赋值给变量或者作为一个参数传入函数中，或者把它作为一个函数的返回值。

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>
}

为JSX指定属性

你可以使用引号引用一个字符串去指定属性：

const element = <div tabIndex="0"></div>;

你也可以在属性中使用花括号应勇一个JavaScript表达式：

const element = <img src={user.avatarUrl}></img>;

当你使用花括号引用JavaScript表达式作为属性时千万不要把他包裹在引号内，在属性中你只能使用引号和花括号其中的一个，不能两个同时使用（不信可以动手试试）。

注意：由于JSX相比于HTML更接近JavaScript，因此ReactDOM使用驼峰命名发来代替传统的HTML属性命名。比如在JSX中，class变成了className，tabindex变成了tabIndex。

为JSX指定子元素

如果标签没有子元素你可以像使用XML标签一样使用/>来结束它。

const element = <img src={user.avatarUrl} />;

JSX标签中也可以包含子元素：

const element=(
    <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
);

JSX可以有效阻止注入攻击在JSX中嵌入用户输入是安全的：

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

默认地，ReactDOM在渲染之前，会将嵌入到JSX的任何值进行转义。因此这能够确保你无法通过非显式声明的方式来注入任何值。所有的值在被渲染之前都会被转换成字符串形式，所以它能够避免XSS攻击。

JSX其实是对象

Babel会把JSX编译成对React.createElement()的调用。

下面两个例子是等价的：

const element=(
    <h1 className="greeting">
        Hello, world!
    </h1>
);

const element=React.createElement(
    'h1',
    {className:'greeting'},
    'Hello, world!'
);

React.createElement()会检查你的代码，减少bug的出现，但本质上它会将你写的JSX编译成下面这样的一个对象：

const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world!'
    }
};

这些对象被称为“React元素”，你可以把它想象成是对你想要编写的页面的描述。React通过使用它们来创建DOM并实时更新。

提示：我们推荐在你的编译器中使用“Babel”语言定义，来显示高亮的ES6和JSX代码。

[译]React核心概念1：JSX简介

引言