1、第一步下载react.js的两个js文件并引入如下所示
<script src="../../../js/bower_components/react/JSXTransformer.js"></script>
<script src="../../../js/bower_components/react/react.js"></script>
2、第二步 你必须先定义一个div,如下所示:
<div id="box"></div>
3、第三步 写<script>标签时注意一定要写 type="text/jsx",如下所示
<script type="text/jsx"></script>
4、第四步 在第三步的基础上，开始声明一个变量，写入react的代码，如下:
var Box =React.createClass({
render:function(){
return <h1>Hello {this.props.name?this.props.name:'world'}</h1>;
}
});
这句话的意思是
我变量Box通过React创建一个虚拟的Dom,并在h1赋值this.props.name如果存在，我们就把它写成存在的name，如果不存在则直接用world代替
5、第五步 仅仅有一个虚拟的，肯定不行，我们必须把它放到真实的dom里面
React.render(
<Box name="mogui"/>,
document.getElementById('box')
)
6、综上所述，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../../../js/bower_components/react/JSXTransformer.js"></script>
<script src="../../../js/bower_components/react/react.js"></script>
</head>
<body>
<!--第一步-->
<div id="box"></div>
<script type="text/jsx">
var Box =React.createClass({//创建虚拟dom
render:function(){
return <h1>Hello {this.props.name?this.props.name:'world'}</h1>;
}
});
React.render(//将虚拟的dom放在真实dom中就像我们小时候看鬼片，鬼只有魂魄投不了胎一个道理
<Box name="mogui"/>,
document.getElementById('box')
)
</script>
</body>
</html>
