各位圆友，新年好！！！
使用 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>
运行结果
