JSX

什么是JSX

1 jsx不是一门新的语言，是一种新的语法糖。让我们在js中可以编写像html一样的代码。

2 允许XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面

为什么使用JSX

1 以前用html代表内容，css代表样式，js定义交互行为。分三种语言在三种不同文件。根据同一件事的代码应该有高耦合性设计原则，用jsx可以在同一个文件里实现。

2 jsx语法可以更直观的看到组件和dom结构。不直接允许浏览器，先转化为js代码。无性能问题。

jsx语法

ReactDom.render(
  <h1>
    Hello react
  </h1>,
  document.getElementById("container")
);

//转换：
ReactDom.render(
  React.createElement("h1","Hello react"),
  document.getElementById("container")
);

//在jsx中运行js
var text = "ni hao"
ReactDom.render(
  <h1>
    {text}
  </h1>,
  document.getElementById("container")
);