1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <!-- react核心库 --> 7 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script> 8 <!-- 提供与dom相关的功能 --> 9 <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script> 10 <!-- 将es6代码转换为es5语法格式 --> 11 <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script> 12 <style> 13 .trest{ 14 color: red; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="container"></div> 20 <script type="text/jsx"> 21 var Hello = React.createClass({ 22 render: function () { 23 <!-- 这里的this表示当前react组件的实例--> 24 <!-- props则是我们自在使用这个组件是，组件上属性的集合 --> 25 <!-- props的key值与return上的key值一一对应，值页一一对应 --> 26 <!-- class样式的三种方式，类名，内联，还有声明 --> 27 <!-- 1、使用类名时，这里的html标签内不能使用class而要使用className，因为在es6中class是一个保留字 --> 28 <!-- return <div className="trest">Hello {this.props.name} {this.props.title}</div>; --> 29 <!-- 2.内联样式 使用双花括号的形式，并且使用驼峰命名的实行写属性名--> 30 <!-- return <div style={{color:'red',fontSize:"55px"}}>Hello {this.props.name} {this.props.title}</div>; --> 31 32 <!-- 3.使用声明变量的形式--> 33 var styleObj={ 34 color:'red', 35 fontSize:'55px' <!--采用驼峰命名的形式--> 36 } 37 return <div style={styleObj}>Hello {this.props.name} {this.props.title}</div>; 38 } 39 }); 40 ReactDOM.render(<Hello name="dongdong" title="Mr"/>, document.getElementById('container')); 41 </script> 42 </body> 43 </html>