study
/
react
/
36th.html

<!DOCTYPE html>
<html>
<head>
	<title>react-组件</title>
    <meta charset="UTF-8" />
	<script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    var data = {
        name:'lily',
        age:18
    };
    /*1、使用函数定义一个组件 需要显示传递props */
    function Welcome(props){
        var name1='abc';
        return <div >Welcome,{props.msg} {name1}</div>
    }
    /*2、使用ES6来定义一个类的名称   定义组件*/
    class Hello extends React.Component{
        render(){
            return <div>Hello,abc,{this.props.age}</div>
        }
    };
    function App(){
        return (
           <div>
             <Welcome msg={data.name}></Welcome>
             <Welcome msg='xyz'></Welcome>
             <Hello age={data.age}></Hello>
             <Hello age='100'></Hello>
         </div>
        )
    };

     ReactDOM.render(
         <App />,
        document.getElementById('my')
    )
    </script>
</body>
</html>