1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/babel.min.js"></script> 10 </head> 11 <body> 12 <div id="test1"></div> 13 <div id="test2"></div> 14 </body> 15 </html> 16 <script type="text/babel"> 17 //1,定义组件 18 //方式1，工厂函数组件（简单组件） 19 function MyComponent1(){ 20 return <h1>定义组件方式一</h1> 21 } 22 23 //方式2，ES6类组件（复杂组件） 24 class MyComponent2 extends React.Component{ 25 render(){ 26 console.log(this);//MyComponent2的实例对象 27 return <h1>定义组件方式二</h1> 28 } 29 } 30 //2,渲染组件标签 31 ReactDOM.render(<MyComponent1/>,document.getElementById("test1")); 32 ReactDOM.render(<MyComponent2/>,document.getElementById("test2")); 33 34 </script>
