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>
