创建你的第一个React组件创建你的第一个React组件 react中的组件分为函数式组件和类式组件下面我们来分别进行

创建你的第一个React组件

当页面功能多样且复杂时，我们会采用组件化开发，来分割局部功能的代码及资源样式等等，以此来实现代码复用，简化项目编码，提高运行效率

react中的组件分为函数式组件和类式组件

下面我们来分别进行创建

我们通过function来定义函数，那么组件也类似，但要注意前面提过，组件中包含其结构样式资源等等，我们需要将其合理安排写入。

所以第一步我们先创建函数外壳：function MyCpn(){}

注意： 组件的首字母要大写，若小写则浏览器会自动将其解析为html标签而不是组件

结构内容可通过函数的return进行返回：

function MyCpn(){
    return <span>Hello!</span>
}

调用ReactDOM的render方法将组件渲染至页面，注意这里组件要写成或的形式(闭合态)

ReactDOM.render(<MyCpn/>,document.getElementById('app'));

调用该函数后，React解析组件标签，找到对应的MyCpn组件，发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转换为真实DOM，再呈现在页面中。

这样我们的第一个简单的函数式组件就完成啦！

既然是类式组件，那么我们从创建类开始，创建类式组件，要继承react下的Component类：

class MyCpn extends React.Component{}

继承之后，需要重写render方法，在返回值里面写组件内容：

class MyCpn extends React.Component{
    render(){
        return <span>hello!</span>
    }
}

同样，也是调用render方法：

ReactDOM.render(<MyCpn/>,document.getElementById('app'));

渲染过程：

大功告成！