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>
