Introducing JSX（翻译）

@H_301_0@开始学习React从过一遍官网资料开始。

@H_301_0@introducting JSX原文翻译并不准确，还是看原文好。

JSX介绍

@H_301_0@看下面的代码

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

@H_301_0@这个有趣的连接语法既不是字符串也不是HTML。
它称之为JSX,它是JavaScript的一种语法扩展。我们推荐在React中使用它去编写UI界面的样子。JSX可能会使你想起模板语言，但是它带来的是全套的JavaScript功能。

@H_301_0@JSX生产React「元素」。在下一节我们将探索渲染React元素到DOM的过程。从下面的例子你能够学到JSX的基础知识。

表达式嵌套在JSX中

@H_301_0@你可以将JavaScript表达式通过花括号嵌套在JSX中使用。
例如，2+2 user.firstName,以及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')
);

@H_301_0@当我们书写多行JSX代码时候，为了良好的可读性，虽不是必须，但还是推荐使用括号包裹避免产生JavaScript分号自动插入的问题。

JSX也是一种表达式

@H_301_0@通过编译之后，JSX表达式会编译成为一个普通的JavaScript对象。
这就意味着，你可以在if声明以及for循环中使用JSX，可以将它赋值给变量，将它作为函数参数或者返回值使用。

function getGreeting(user) {
  if (user) {
    return <h1>Hello,{formatName(user)}!</h1>;
  }
  return <h1>Hello,Stranger.</h1>;
}

在JSX中定义属性

@H_301_0@你可以使用引号标注字符串作为属性值；

const element = <div tabIndex="0"></div>;

@H_301_0@你也可以用在花括号中写JavaScript表达式作为属性值；

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

@H_301_0@注意不要给表达式加引号，不然JSX会将该表达式作为字符串处理。所以，你应该要么字符串加引号使用，要么花括号中写表达式，不要两者同时用。

在JSX中定义Children(?)

@H_301_0@如果标签不闭合，可以通过/>关闭标签，就像XML

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

@H_301_0@JSX标签包含子元素

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

警告：JSX语法相比HTML更接近JavaScript，React DOM使用`camelCase`(驼峰命名)属性命名规定代替HTML属性名。
例如：`class`在JSX中是`className`，`tabindex`是`tabIndex`。

JSX可以防止注入攻击（XSS）

@H_301_0@通过JSX传入数据会更安全

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

@H_301_0@默认情况，React DOM在渲染JSX之前会排除嵌入的输入值，因此确保在你的应用中不会注入任何不明确的书面值。任何值在渲染之前都会转换为字符串。这就避免了XSS攻击。

JSX表现为对象

@H_301_0@Babel通过调用React.createElement()来编译JSX
下面两段代码是相同的

const element = (
  <h1 className="greeting">
    Hello,world!
  </h1>
);

const element = React.createElement(
  'h1',{className: 'greeting'},'Hello,world!'
);

@H_301_0@React.createElement()展现了一些检查项来帮助你减少代码bug，但是本质上老说它创建了这样的对象

// Note: this structure is simplified
const element = {
  type: 'h1',props: {
    className: 'greeting',children: 'Hello,world'
  }
};

@H_301_0@这些对象称之为「React元素」.你可以把他们当做你想在界面上看到一种描述。React读取这些对象，然后使用它们去构造DOM元素，并且保持更新。