什么是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")
);