React声明组件的方式有两种：分别是函数式声明组件和类式声明组件；写法很简单，只是刚接触的话，可能还是写的不是很习惯，多写写就ok了！
老样子，我们还是直接新建一个html就好！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>
</html>、
目录
1. 函数式组件
2. 类式组件
题外，复合组件
1. 函数式组件
这个东西很容易编写，先看一个例子！
<script type="text/babel">
const app = document.getElementById('app')
const VDOM = (
<h2>hello</h2>
)
ReactDOM.render(VDOM, app)
</script>页面输出 h2标题 hello，这个没什么问题吧？
既然现在说要进行函数式组件，首先得有个函数吧？那也就是我们得先写一个function！然后在function里面return出来一些标签，最后使用ReactDom.render，这个没毛病吧，那么写法就是如下
<script type="text/babel">
const app = document.getElementById('app')
// 1.创建函数式组件 使用函数定义的组件适用于简单的组件定义
function Goods() {
console.log(this) //此处的this是undefined，因为babel编译后开启了严格模式
return <h2>商品列表</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<Goods/>, app)
</script>页面输出：
没什么毛病，值得注意的是，因为使用的是我们自己定义的组件，那么组件的名字需要首字母大写开头，在ReactDOM.render中的组件标签需要闭合；
我们需要知道，了解一下，ReactDOM.render到底帮助我们做了什么操作？
1. React解析组件标签，找到Goods组件
2. React发现Goods组件是由函数定义的，随后内部调用了Goods方法，将返回的虚拟dom转化为 真实的dom元素，随后呈现在页面之中
2. 类式组件
说起来类式组件，那就得回想一下 es6语法中 class类的知识；
首先呢，React给我们写好了一个父类 React.Component ，后续我们创建类式组件 都需要继承于这个父类，具体写法如下
<script type="text/babel">
const app = document.getElementById('app')
// 1.创建类式组件
class Goods extends React.Component {
render() {
console.log('render中的this', this)
return <h2>我是类定义的组件（适用于复杂的组件的定义）</h2>
}
}
// 2.渲染组件到页面
ReactDOM.render(<Goods/>, app)
</script>页面输出：
值得注意的是，render里面的this，在控制台里面我们打印this，可以看出来this有以下属性
这个时候就需要，我们依靠es6 class类的知识来进行一波分析，我们明明只是定义了一个类Goods继承于React.Component，然后写了一个render的方法返回了一个h2标签，别的什么也没有写，那么this里面这么多的属性从何而来？
当然是从继承的类，也就是React.Component中拿过来的。里面这么多的值最值得我们注意是 props，refs，state，以及context，这个后续再说；
那么我们依然需要去知道了解一下ReactDOM.render在这里帮助我们做了什么操作？
1. React解析组件标签，找到了Goods组件
2. 发现Goods组件是使用类定义的，随后new出来该类的实例，并且通过该实例调用了原型的 render方法。
3. 将render返回的虚拟dom转化为真实的dom，随后呈现在页面之中。
题外，复合组件
我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离
<script type="text/babel">
const app = document.getElementById('app')
function Hello() {
return <h1>hello</h1>
}
function Web() {
return <h1>React</h1>
}
class HelloReact extends React.Component {
render() {
return <div>
<Hello/>
<Web/>
</div>
}
}
ReactDOM.render(<HelloReact/>, app)
</script>页面输出
