React之组件简介

这一篇大概介绍一下React中的组件，那么首先我们要了解什么是组建。
在一个HTML页面当中所有的模块我们都可以理解为一个组件，在React中只要被渲染出来的都是组件。例如一个按钮，一个文本框，都是一个组件，而这些组件在React中是如何具体体现的呢？下面我们就来通过代码示例来介绍组件。
1. 新建一个demo.js，然后输入以下代码

import React, { Component } from 'react';

class Demo extends Component {
  render() {
    return (<div>你好</div>);
  }
}
export default Demo;

上面的代码中导入了一个{ Component }，这个是导入React的组件类，而下面的Demo继承了Component，这就表示这个类是一个组件了，但是一个组件必须有两个特征，第一就是上面说的要继承Component，第二就是在这个类里面必须要有render() 这个函数，这个函数的作用就是用来把渲染的内容给前端的。下面的export是把Demo这个组件类暴露给其他的js使用的。(注意组件类开头字母一定要大写，如：Demo)
2. 在index.js里面导入刚才写好的Demo组件类，来渲染给前端，看一看具体的效果是什么样子的。代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Demo from './Demo.js';

ReactDOM.render(<Demo />, document.getElementById('root'));

代码中的<Demo />其实就表示<div>你好</div>，并且这里必须是大写开头，而document.getElementById('root')这个表示刚才的组件渲染到该html标签下面。那么我们看一下效果吧

好了以上就是简单的组件介绍了，其实组件也有复合组件，就是很多个标签组合在一起构成的符合组件。具体的在后面练习的时候我们再具体展开介绍。