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 代码会高亮显示。