标签：
和AngularJS相比，上手React简单到让人震惊。
在引入React库之后，开发API就通过React对象暴露出来了。我们要做的、能做的，就是：
在虚拟DOM上创建元素，然后将它们渲染到真实DOM上。
在示例代码中使用了React对象的两个方法：
参数type用来指定要创建的元素类型，可以是一个字符串或一个React组件类型。当使用 字符串时，这个参数应当是标准的HTML标签名称，比如：p、div、canvas等等。
参数props是可选的JSON对象，用来指定元素的附加属性，比如样式、CSS类等等。 我们在示例中简单的设置为null。
从第三个参数children开始的所有参数，都被认为是这个元素的子元素。考虑到 虚拟DOM好歹也是DOM，容易理解React需要通过这些子元素参数，让我们可以构造虚拟DOM树：
这个时候上述的方法只是一个虚拟的dom，怎么吧这个虚拟的Dom渲染到真实的Dom上，我们需要调用render这个方法，这个方法里面有三个参数（element,container,callback）
参数element是我们使用createElement()方法创建的React元素，注意，不是HTML元素！
参数container是真实DOM中的HTML元素，作为渲染的目标容器，它的内容将被render()方法 的执行改变。
callback参数是可选的函数，当渲染完成或更新后被执行，通常我们不用它。(这个方法一般我们不会调用)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello React!</title>
<!--1.引入React库-->
<script src="js/react.min.js"></script>
<style>
p{font:italic bold 50px verdana;}
</style>
</head>
<body>
<!--2.在真实DOM上定义容器-->
<div id="content"></div>
<script>
// 第一个参数就是普通的html元素，也可以是React组件。第二个参数可以是json数据，第三个参数就是这个元素的子元素
//var el2 = React.createElement("p",null,"HELLO FXR");
//3.在虚拟DOM上创建p元素
//var el = React.createElement("p",null,"Hello React!");
var el2 = React.createElement(
"table",
null,
React.createElement("tr",null,"ID"),
React.createElement("tr",null,"NAME"),
React.createElement("tr",null,"SEX"),
React.createElement("br",null,""),
React.createElement("tr",null,"1"),
React.createElement("tr",null,"airycode"),
React.createElement("tr",null,"男")
);
//4.将虚拟DOM上的p元素渲染到真实DOM上的#content容器
//React.render(el,document.querySelector("#content"));
React.render(el2,document.querySelector("#content"));
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/airycode/p/5738766.html
