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 代码会高亮显示。
转载请注明原文地址: https://ju.6miu.com/read-676541.html
