React 入门（二）

JSX介绍

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

以上述代码为例，React 中推荐使用 JSX 来描述用户界面。
JSX 是一种 Javascript 的语法扩展，是一种嵌入式的类似 XML 的语法。 它可以被转换成合法的 JavaScript，尽管转换的语义是依据不同的实现而定的。
JSX 最终会被转化成 javascript 对象，因而我们可以在 if 或者 for 语句里使用 JSX，赋值给变量，最为函数参数或者作为函数返回值。

在JSX中使用javascript表达式

JSX 中支持使用 javascript 表达式，使用｛｝括住。例如：

function checkNameExits(name) {
  return name?name:"world";
}
const name = "abc";
const element = (
  <h1>
    Hello, {checkNameExits(name)}!
  </h1>
);

JSX 定义节点属性

在JSX中可以为需要创建的html节点设置默认属性值，使用引号来定义以字符串为值的属性，使用大括号定义以javascript为值的属性。

const element = <div id="div1"></div>;
const element = <div id={user.id}></div>;

JSX 嵌套

JSX 可以定义一段准备渲染的完整 html 片段。

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