各位圆友，新年好！！！

使用 React 的网页源码时，首先，最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法，跟 JavaScript 不兼容。凡是使用 JSX 的地方，都要加上 type="text/babel" 。

其次，上面代码一共用了三个库： react.js 、react-dom.js 和 Browser.js ，它们必须首先加载。其中，react.js 是 React 的核心库，react-dom.js 是提供与 DOM 相关的功能，Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，实际上线的时候，应该将它放到服务器完成。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             
10         </div>
11         <script src="./js/react.js"></script>
12         <script src="./js/react-dom.js"></script>
13         <script src="./js/babel.min.js"></script>
14         <script type="text/babel">
15         /*
16          * React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。
17          * React.createClass 方法就用于生成一个组件类。
18          * 注意，组件类的第一个字母必须大写，否则会报错
19          * 件类只能包含一个顶层标签，否则也会报错。
20          */
21           var names = ['Alice', 'Emily', 'Kate'];
22           ReactDOM.render(
23             <div>
24             {
25               names.map(function (name, index) {
26                 return <div key={index}>Hello, {name}!</div>
27               })
28             }
29             </div>,
30             document.getElementById('app')
31             
32           );
33          
34          /* var names = ['Alice', 'Emily', 'Kate'];
35           ReactDOM.render(
36             <div>
37                    {names}
38             </div>,
39             document.getElementById('app')
40             
41           );*/
42         </script>
43     </body>
44 </html>

运行结果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             
10         </div>
11         <script src="./js/react.js"></script>
12         <script src="./js/react-dom.js"></script>
13         <script src="./js/babel.min.js"></script>
14         <script type="text/babel">
15         /*
16          * 注意：添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor 
17          * 这是因为 class 和 for 是 JavaScript 的保留字。
18          */
19          var Mycomponent = React.createClass({
20             render:function(){
21                 return <div>
22                     <h1 className="fontcolortest">2018新年好!!</h1>
23                 </div>;
24             }
25         });
26         
27         ReactDOM.render(
28             <Mycomponent/>,
29             document.getElementById('app')
30         );
31         </script>
32     </body>
33 </html>

运行结果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             
10         </div>
11         <script src="./js/react.js"></script>
12         <script src="./js/react-dom.js"></script>
13         <script src="./js/babel.min.js"></script>
14         <script type="text/babel">
15             /*
16              * 组件的用法与原生的 HTML 标签完全一致，可以任意加入属性，比如 <HelloMessage name="John"> ，
17              * 就是 HelloMessage 组件加入一个 name 属性，值为 John。
18              * 组件的属性可以在组件类的 this.props 对象上获取，比如 name 属性就可以通过 this.props.name 读取。
19              */
20             
21             var HelloMessage = React.createClass({
22               render: function() {
23                 return <h1>Hello {this.props.name}新年好!</h1>;
24               }
25             });
26             
27             ReactDOM.render(
28               <HelloMessage name="2018" />,
29               document.getElementById('app')
30             );
31         </script>
32     </body>
33 </html>

运行结果

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             
10         </div>
11         <script src="./js/react.js"></script>
12         <script src="./js/react-dom.js"></script>
13         <script src="./js/babel.min.js"></script>
14         <script type="text/babel">
15             /*
16              * this.props 对象的属性与组件的属性一一对应。除了this.props.children 属性。它表示组件的所有子节点
17              * 下面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取
18              * 注意， this.props.children 的值有三种可能：
19              *         如果当前组件没有子节点，它就是 undefined ;
20              *         如果有一个子节点，数据类型是 object ；
21              *         如果有多个子节点，数据类型就是 array 。
22              * 所以，处理 this.props.children 的时候要小心。
23              * 
24              * React 提供一个工具方法 React.Children 来处理 this.props.children 。
25              * 我们可以用 React.Children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object。
26              * */
27             var NotesList = React.createClass({
28                 render: function() {
29                   return (
30                     <ol>
31                       {
32                         React.Children.map(this.props.children, function (child) {
33                           return <li>{child}</li>;
34                         })
35                       }
36                     </ol>
37                   );
38                 }
39               });
40               ReactDOM.render(
41                 <NotesList>
42                   <span>祝各位2018新年好!</span>
43                   <span>身体健康</span>
44                   <span>工作顺利</span>
45                   <span>阖家幸福</span>
46                 </NotesList>,
47                 document.getElementById('app')
48               );
49         </script>
50     </body>
51 </html>

运行结果