JSX语法

    JSX是一个JavaScript的语法扩展，它在React中可以很好的描述UI交互，会让人第一眼就可以想到它是一个模板。

为什么使用JSX？

　　直观原因来看，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

在JSX中嵌入表达式

　　在jsx文件中，可以直接使用  {}  来嵌入js中的变量或者表达式

const name = 'xiaoMing';
//{name}会被替换成 xiaoMing
const element = <h1>Hello, {name}</h1>;

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

　　当然，也可以在 { }  中放入表达式，如：{1 + 1},最终渲染的结果是2.

　　在JSX中，可以通过 引号来给属性指定字符串字面量，也可以使用大括号插入一个JavaScript表达式

<div tabIndex="0">直接插入字符串字面量</div>;

<img src={user.avatarUrl}>插入JSX表达式</img>;

使用JSX指定子元素

　　在一个标签里没有内容，你可以使用   />  来闭合标签，就像单标签一样使用。

　　JSX标签里能够包含很多子元素。如：

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Welcome to ***.</h2>
  </div>
);

　　React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。

JSX表示对象

Babel会把JSX转译成一个名为React.createElement()函数调用

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

/******这两串代码完全等效*******/
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);