# 引入 JSX
考虑这个变量声明：
~~~
const element = <h1>Hello, world!</h1>;
~~~
这个有趣的标记语法既不是字符串，也不是 HTML 。
它称为 JSX ，是一个 JavaScript 的语法扩展。我们建议使用它编写 React 来描述 UI 的外观。JSX 可能使你想起一个模板语言，但是它却有完整的 JavaScript 的能力。
JSX 生产 React 元素。我们将在下一节探索渲染它们到 DOM 中。下面，你可以找到找到使用 JSX 的基础的需求，来开始学习它。
## 在 JSX 中嵌入表达式
在 JSX 中可以嵌入任何 [JavaScript 表达式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions)，通过 花括号包起来。
例如， 2+2 ，uesr.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')
);
~~~
[在 CodePen 中打开它](http://codepen.io/gaearon/pen/PGEjdG?editors=0010)。
分隔 JSX 为多行可以更加易读。但这并不是强制的，当这样做时，我们还建议放在括号中以避免[自动补全分号](http://stackoverflow.com/q/2846283)的陷阱。
## JSX 也是表达式
编译之后，JSX 表达式变成常规的 JavaScript 对象。
这意味着你可以使用 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>;
~~~
## JSX 中的 子元素
如果一个标签是空的，你可以立即关闭它，使用 `/>`，就像 XML：
~~~
const element = <img src={user.avatarUrl} />;
~~~
JSX 标签可以包含子元素：
~~~
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
~~~
>[warning] 警告：
由于JSX 相较 HTML 要更接近 JavaScript，React DOM 使用驼峰属性命名惯例，而不是 HTML 属性的名称形式。
比如， 在 JSX 中， class 属性成为 className，tabindex 属性成为 tabIndex 。
## JSX 防止注入式攻击
在 JSX 中嵌入用户输入是安全的：
~~~
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
~~~
默认， React DOM 在渲染它们之前将转义任何嵌入到 JSX 中的 值。因此它确保你不会被注入任何你应用中没有明确指出的内容。任何内容在被渲染之前都被转换成字符串。这有助于阻止[ XSS 攻击](https://en.wikipedia.org/wiki/Cross-site_scripting)。
## 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 的代码，但是本质上它像这样创建一个对象：
~~~
// Note: this structure is simplified
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world'
}
};
~~~
这些对象被称为 React 元素。你可以当它们是你希望在屏幕上看到的内容的描述。React 读取这些对象并使用它们构成 DOM 并保持它们最新。
下一节我们将探索渲染 React 元素到 DOM 中。
> 贴士：
我们建议为你的编辑器搜索一个 "Babel" 语法插件，那么 ES6 和 JSX 代码都能正确的高亮显示。
