二、JSX的介绍
首先，请考虑下面的变量声明：
const element = hello world
;这个有趣的标签语法，因为它既不是字符串也不是HTML。
它被称为JSX，它是JavaScript的语法扩展。 我们建议使用它和React一起使用，以便描述UI应该是什么样子的。JSX或许看上去像是一个模板语言，但是它具有JavaScript的全部能力。
JSX用来生成React元素。 我们将在下一节中探讨将它们渲染到DOM。 下面，你可以找到JSX的基础知识。
JSX中的嵌入表达式
你可以通过将表达式包含在一个大括号里，以便用来在JSX中嵌入任何JavaScript表达式。
例如，下面代码中的 2 + 2，user.name，还有formatName(user)都是可用的表达式：
function formatName(user){
return user.firstName + user.lastName;
}
const user = {
firstName: 'yatao',
lastName: 'zhang'
};
const Element = (
hello, {formatName(user)}
);
ReactDOM.render(
Element,
document.getElementById('root')
);我们将JSX拆分为多行以提高可读性。 虽然它不是强制性的要求，但当执行此操作时，我们还建议将其括在括号中，以避免自动分号插入而引起不必要的bug。
JSX也是一个表达式
编译后，JSX表达式会成为常规JavaScript对象。
这意味着您可以在if语句和for循环中使用JSX，可以将其赋值给变量或者将其作为参数，然后从函数中返回：
function getGreeting(user) {
if (user) {
return hello, {formatName(user)}!
;
}
return hello, stranger.
;
}使用JSX指定属性
您可以使用引号将字符串文字指定为属性：
const element = ;您还可以使用大括号在属性中嵌入JavaScript表达式：
const element = 
;使用JSX指定子元素
如果标记为空，您可以使用 /> 立即关闭它，例如html：
const element = ;JSX标签也可以包含子元素：
const element = (
hello!
Good to see you here.
);警告
由于JSX比HTML更接近JavaScript，React DOM使用驼峰命名法约定而不是HTML属性名称。
例如，class在JSX中变为className，tabindex变为tabIndex。
JSX防止注入攻击
在JSX中嵌入用户输入是安全的：
const title = response.potentiallyMaliciousInput;
// 要接收到的可能含有危险内容的字符串放入大括号中，这是比较安全的做法
const element = {title}
;默认情况下，React DOM在渲染它们之前转义嵌入在JSX中的任何值。 因此，它确保不能注入那些没有明确写在你的应用程序中的任何东西。 在渲染之前，一切都转换为字符串。 这有助于防止XSS（跨站点脚本）攻击。
JSX表示对象
Babel将JSX编译为React.createElement()调用。
这两个例子是相同的：
const element = (
hello world
);const element = React.createElement(
'h1',
{className: 'greeting'},
'hello world'
);React.createElement()会进行一些检查，以帮助您编写无明显语法错误的代码，本质上，它创建的是一个像这样的对象：
// 提示：这是一个简单对象结构
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'hello, world'
}
};这些对象称为“React元素”。 你可以把它们想象成你想在屏幕上看到的样子。 React读取这些对象，并使用它们构造成为DOM元素同时一直保持其为最新的。