React中文文档之introducing JSX

introducing JSX

思考下面的变量声明：

const element = <h1>Hello world!</h1>;

这个有趣的标签解析，既不是字符串，也不是HTMl。

它叫做 'JSX'，它是对js的一个解析扩展。在React中，我们推荐使用它来描述UI应该是什么样子。JSX可能看着像一个模板语言，但是它具有js的所有能力。

JSX产生 React元素。在下一章节，我们将探讨将它们渲染为DOM。接下来，你可以找到JSX必备的基础知识来开始学习：

embedding expressions in JSX - 在JSX中嵌入表达式

通过将代码包装在 '{}' 中，可以在JSX中，嵌入任何的js表达式

例如，'2 + 2'，'user.name'，'formatName(user)' 都是有效的表达式：

function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'xuemin',
lastName: 'dong'
};
const element = (
<h1>
hello, {formatName(user)}!
</h1>
);
ReactDOM.rend(
element,
document.getElementById('root')
);

我们将JSX代码包裹在 '()' 内，并且为了可读性分割为多行。这也避免了js语法的 '自动插入分号' 的陷阱(如果行尾未添加 ';'，js会自动来判断哪里需要添加 ';')。

JSX is an Expression Too - JSX 也是一个表达式

编译后，JSX表单式变为正常的js对象。
这意味着，你可以在 'if' 语句和'for' 循环中，使用JSX，将它分配给变量，作为参数接收，或者从函数中返回它。
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)!}</h1>;
} else {
return <h1>Hello, Stranger</h1>
}
}

Specifying Attributes with JSX - 使用JSX指定属性

你可以使用引号来指定文本字符串作为属性：

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

你也可以使用 '{}' 在属性中嵌入js表单式：

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

Specifying Children with JSX - 使用JSX指定子

如果一个标签式空的，可以通过 '/>' 立刻结束，就像 XML(其实就是单标签形式，html的块标签内如果没内容，在JSX中也可以这么结束)：

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

JSX标签可以包含子：

const element = (			// JSX包含多行，就得需要使用 '()'
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);

警告：

因为JSX更近似js，而不是HTML，React DOM使用 '驼峰式' 属性命名，替代 HTML 属性命名。例如：

class是 className，tabindex 是 tabIndex。（js语法中：class和for都是保留字，应该使用 className, htmlFor）

JSX Prevents Injection Attacks - JSX阻止注入攻击

在JSX中嵌入用户输入是安全的：

const title = response.name;
const element = <h1>{title}</h1>;	// 这是安全的

默认情况下，在渲染前，React DOM 对插入到 JSX 中的任何值都进行了过滤

JSX Represents Objects - JSX代表对象

Babel编译JSX为 React.createElement() 调用

下面的2个例子是等价的：

const element = (
<h1 className="greeting">
hello world!
</h1>
);
－－－ 等价于 －－－
const element = React.createElement(
'h1',
{className: 'greeting'},
'hello world!'
);

React.createElement() 执行了一些检查来帮助我们写出没有bug的代码，但是最关键的是，它创建了如下的一个对象：

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

这些对象称作 'React elements'，你可以认为它们是你想在屏幕上看到的内容的描述。React读取这些对象，并使用它们来构建DOM以及保持更新。

提示：

我们推荐针对你的编辑器查找一个 'Babel' 语法格式解析，这样 ES6 和 JSX 代码会高亮显示。