[React] Hello world（2）

1. 简单的Hello world示例

ReactDOM.render()是React的最基本方法用于将模板转为HTML语言，并插入到指定的DOM节点内。（这里是id为root节点）

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

2. JSX 语法

JSX， 一种 JavaScript 的语法扩展。
在编译之后，JSX 其实会被转化为普通的 JavaScript 对象。
2.1 你可以任意地在 JSX 当中使用 JavaScript 表达式，但要包含在大括号里。

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

2.2 用引号来定义以字符串为值的属性，用大括号来定义以 JavaScript 表达式为值的属性。

const element = <div tabIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

2.3 如果 JSX 标签是闭合式的，那么你需要在结尾处用 />, 就好像 XML/HTML 一样。JSX 标签同样可以相互嵌套。

const element = <img src={user.avatarUrl} />;
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

2.4 因为 JSX 的特性更接近 JavaScript 而不是 HTML , 所以 React DOM 使用 camelCase 小驼峰命名 来定义属性的名称，而不是使用 HTML 的属性名称。

例如，class 变成了 className，而 tabindex 则对应着 tabIndex。

const element = (
  <div>
    <h1>Hello world!</h1>
    <p>{ new Date().toString() }</p>
  </div>
);