//1. 创建函数式组件(代码和资源的集合)
        function MyComponent(){ //注意： 首字母必须大写
            console.log(this); //此处的this是undefined, 因为babel编译后开启了严格模式
            return <h1>函数式组件编程, 适合简单的组件编程</h1>
        }
        //2. 渲染组件到页面
        ReactDOM.render(<MyComponent/>,document.getElementById("test"));
        /*
            执行了ReactDOM.render(<MyComponent/>,document.getElementById("test"));...之后，发生了什么
            1. React解析组件标签， 找到了MyComponent组件
            2. 发现组件是使用函数定义的， 随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中
        */
  //2. 创建类式组件
        class MyComponent extends React.Component{
            //render是放在哪里的？-- 类MyComponent的原型对象上，供实例使用
            render(h) {
                //render中的this是谁？--MyComponent实例对象//MyComponent组件实例对象
                console.log("render中的this",this);//MyComponent{}
                return <h2>我是用类定义的组件(适用于复杂组件的定义)</h2>
            }
        }
        ReactDOM.render(<MyComponent/>,document.getElementById("test"))
        /*
            执行了ReactDOM.render(<MyComponent/>,document.getElementById("test"));...之后，发生了什么
            1. React解析组件标签， 找到了MyComponent组件
            2. 发现组件是使用类定义的， 随后new出来该类的实例，并通过该实例调用到原型上的render()方法
            3. 将render返回的虚拟dom转换为真实dom，随后呈现在页面中

        */
        //React 元素也可以是用户自定义的组件：
        const element = <Welcome name="Sara" />;

const element = <Welcome name="Sara" />;