组件创建方式一：在main.js里面定义
1、在React中，构造函数就是一个最基本的组件。
2、如果想要把组件放到页面中，可以把构造函数的名称当做组件的名称，以HTML标签形式引入
到页面中即可。
3、React在解析所有的标签的时候，是以标签的首字母来区分的，如果标签的首字母是小写，就
按照普通的HTML标签解析；如果首字母是大写，则按照组件的形式去解析渲染。
4、在组件中，如果想要使用外部传递过来的数据，必须显示在构造函数参数列表中，需要定义
props属性来接收;props是一个形参，只读特性，不可修改
注意：...Obj 这种语法是ES6中的属性扩散，表示把这个对象上的所有属性展开放到这个位置
var name = "wangyf";
var age = 20;
var person = {
name: "wyf",
age: 18,
gender: "男",
adr: "ss",
};
function Rello(props) {
console.log(name);
var res = (
<h1>
hello world,{name}--
{age}--{person.gender}--{props.name}
</h1>
);
return res;
}
ReactDOM.render(
<div>
{/* <Rello name={name} age={age} gender={person.gender}></Rello> */}
<Rello {...person}></Rello>
</div>,
document.getElementById("app")
);
运行结果：
组件创建方式二：将组件抽离成单独的文件
1、新建一个Hello.jsx的文件
2、定义组件
2.1、新建的.jsx组件，依赖react，所以先导入React
2.2、定义一个Hello的function组件，注意必须要return
2.3、需要export default Hello。（需要将组建向外暴露出去）
3、在main.js中导入Hello组件
4、在main.js中渲染组件
语法：ReactDOM.render(myDiv2, document.getElementById("app"))
5、运行结果
