第二节——介绍JSX

思考一下这样一种变量声明:

const element = <h1>Hello, world!</h1>;

这个有趣的标签语法既不是字符串也不是HTML，它被称为JSX，是一种对于JavaScript扩展的语法。我们推荐在React中使用它来描述UI应该是什么样子。JSX也许会让你想起模板语言，但是它完全是JavaScript。

JSX创造了React '元素'。我们将会在下一个章节中探讨如何将它渲染到DOM中。接下来，你将学习到JSX的基础部分。

为什么要使用JSX？

React包含这样一个事实，它的渲染逻辑被天生地加在了UI逻辑上：事件如何被处理，状态随时间如何变换，数据如何去为了展示做准备。

取代了通过把标记和逻辑单独地放在不同的文件的方式，React的分离只关注包含了二者的松散的几个被称为组件的单元(期待更好的翻译React speratates conserns with loosely coupled units called “components” that contain both.)。我们将会在未来的章节讲解组件，但是如果把标记放在js中让你觉得不适，这个YouTube上的视频也许会让你觉得信服。(https://www.youtube.com/watch?v=x7cQ3mrcKaY)

对于React而言JSX不是必须的，但是大多数人觉得在js代码中编写UI时它会提供一种视觉上的辅助。同时它也允许React展示更多有用的错误和警告信息。

下面让我们一起开始学习吧!

在JSX中插入表达式

你可以在JSX中通过大括号包裹的形式插入任何javaScript表达式。
例如：2 + 2, user.firstName, 和 formatName(user)等都是有效的表达式。

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

我们把JSX分割成多行的形式进行书写。然而这并不是必要的，当这么做的时候，我们也推荐把它用圆括号包裹起来去避免换行自动添加分号的问题。

JSX也是一个表达式

在编译之后，JSX表达式变为一个常规的JavaScript函数调用，并且返回一个JavaScript对象。

这意味着你可以在JSX中使用if语句，for循环，把它传递给一个变量，把它当作参数进行接收，从函数中将它返回。

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>;

当在属性中插入JavaScript表达式时，不要把引号放在大括号周围。你要么使用双引号(对于字符串)，要么使用大括号(对于JavaScript表达式)，但是不要再一个属性中同时使用二者。

警告：
由于相对于HTML来说，JSX更接近于JavaScript, ReactDOM使用驼峰标识的属性命名习惯代替HTML属性名。
例如：在JSX中class变为className，tabindex变为tabIndex

用JSX指定后代

如果是一个空标记，你可能会用/>立即闭合它，例如XML：

const element = <img src={user.avatarUrl} />;

JSX标记可以包含后代：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX阻止注入攻击

在JSX中插入用户输入是安全的

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

默认的，ReactDOM会隔离任何插入进JSX中的值，在渲染它们之前。因此它确保了你无法注入任何东西，如果这些东西没有在你的应用中明确的写着。任何东西在渲染之前都会被转变为字符串，这将会帮助阻止跨站脚本攻击。

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中。