ReactJS读书笔记一：深入理解JSX

这个系列是读《React 引领未来的用户界面开发框架》的笔记。

JSX语法是react的一大亮点。

之前很不喜欢在js中写模板，因为js字符串换行很麻烦，所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的，特别是当你的网站是前后端分离的时候，如果改一下模板还要找后端的开发，非常浪费时间。

JSX的出现比较完美解决了JS中写模板的问题。简单的说就是JS 和 HTML和混合着写在一起。

一，JSX基本原理

首先我们看一个官方最简单的例子

[css] view plain copy

1. React.render(
2. <h1color="red">Hello,world!</h1>,
3. document.getElementById('example')
4. );

然后他编译出来实际上是这样：

[javascript] copy

React.render(React.createElement("h1",{color:"red"},"Hello,world!"),document.getElementById('example'));