React版本：15.4.2
**翻译：xiyoki **
考虑这个变量声明：
const element = <h1>Hello, world!</h1>;
这个有趣的标签语法既不是字符串也不是HTML。
它被称为JSX，它是Javascript的语法扩展。我们建议使用它与React来描述UI应该是什么样子。JSX可能唤起你对模板语言的记忆，但JSX伴随着Javascript的全部力量。
JSX生成React elements。我们将在下一节中探讨将它们渲染到DOM。
Embedding Expressions in JSX（在JSX中嵌入表达式）
你可以将任何Javascript变量或表达式包裹在花括号中以嵌入到JSX中。
例如2+2，``user.name和formatName(user)都是有效的表达式：
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
我们将JSX拆分为多行以提高可读性。虽然不是必需的，但当执行此操作时，我们还建议将其括在括号中，以避免自动分号插入的陷阱。
JSX is an Expression Too（JSX也是一个表达式）
编译后，JSX表达式成为常规Javascript对象。
这意味着你可以在if语句和for循环中使用JSX，将它分配给变量，接受它作为参数，并从函数返回它：
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
Specifying Attributes with JSX（使用JSX指定属性）
你可以使用引号将字符串文字指定为属性：
const element = <div tabIndex="0"></div>;
你可以使用花括号将Javascript表达式嵌入属性：
const element = <img src={user.avatarUrl}></img>;
在属性中嵌入Javascript表达式时，不要在大括号周围加引号。否则JSX会将该属性视为字符串文字而不是表达式。你应该使用引号（对于字符串值）或花括号（对于表达式），但二者不能在同一属性中。
Specifying Children with JSX（使用JSX指定子项）
如果标记为空，你应当用 /> 立即关闭它，如XML:
const element = <img src={user.avatarUrl} />;
JSX标签可能包含子元素：
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
** 警告: **
由于JSX比HTML更接近Javascript，React DOM使用camelCase属性命名约定而不是HTML属性名称。
例如，在JSX中，class成为className，tabindex成为tabIndex。
JSX Prevents Injection Attacks（JSX防止注入攻击）
在JSX中嵌入用户输入时安全的：
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
默认情况下，React DOM在渲染它们之前转义嵌入在JSX中的任何值。因此，它确保你不能注入任何没有明确写在你应用程序中的数据。在渲染之前，一切都转换为字符串。这有助于防止XSS（跨站点）攻击。
JSX Represents Objects（JSX表示对象）
Babel将JSX编译到React.createElement()的调用中。
这两个例子是相同的：
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
React.createElement()执行一些检查，以帮助你编写无错误的代码，但本质上它创建一个像这样的对象：
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
这些对象被称为‘React元素’。你可以把他们想象成你想在屏幕上看到的内容。React读取这些对象，并使用它们构造DOM，并保持其为最新。
我们将在下一节中探索渲染React元素到DOM。
Tip:
我们建议为你选择的编辑器搜索Babel语法方案，以便正确突出显示ES6和JSX代码。
附：babel-sublime安装
网友评论