1 Reactjs JSX 介绍

考虑一下这个变量的声明：

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

这就是 JSX ，他是 JavaScrip 的一种扩展语法。我们推荐在 React 中使用这种语法来描述 UI 信息。

JSX 中嵌入表达式
你可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。

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

用 JSX 指定属性值
您可以使用双引号来指定字符串字面量作为属性值：

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

您也可以用花括号嵌入一个 JavaScript 表达式作为属性值:

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

如果是空标签，您应该像 XML 一样，使用 />立即闭合它：

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

用 JSX 指定子元素
JSX 标签可能包含子元素：

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

JSX 表示对象
Babel 将JSX编译成 React.createElement() 调用。
下面的两个例子是是完全相同的：

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

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