组件
如果代码多了之后，不可能一直在render方法里写，所以就需要把里面的代码提出来，定义一个变量，像这样：
const app = <h1>欢迎进入React的世界</h1>
ReactDOM.render(
<div>
{ app }
</div>
document.getElementById('root')
)
函数式
这里我们定义的方法实际上也是react定义组件的第一种方式-定义函数式组件，这也是无状态组件。
方式一：函数式组件
const 组件名(首字母大写)=（props）=>{
return jsx表达式
}
const App = (props) => {
return (
<h1>函数组件</h1>
)
}
ReactDOM.render(
// React组件的调用方式
<App/>,
document.getElementById('root')
)
这样一个完整的函数式组件就定义好了。但要注意！注意！注意！组件名必须大写，否则报错。
class组件
ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用的类的继承ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，看以下代码：
class 组件名 extends React.Component {
render(){ //render是必不可少的钩子函数
return jsx表达式
}
}
<body>
<div id="app">
</div>
<script type="text/babel">
class App extends React.Component{
render(){
return (
<h1>class组件</h1>
)
}
}
ReactDOM.render(
<App/>,document.getElementById("app")
)
</script>
</body>