React 第一个组件

我们可以把一个大的网页拆分成很多小的部分；
比如：标题部分对应标题组件，搜索对应input组件，button组件，最终一个页面就被拆分成很多个组件。
好处：一个页面很复杂，有的时候我们很难编写但当我们把它拆分成一个个小组件的时候，我们再来维护一个个小组件的时候就变得简单了。
这就是目前经常说的前端组件化概念

1. 先进入 src > index.js 入口文件来编写代码

import React from 'react';
import ReactDOM from 'react-dom';
 //导入一个文件，./ClickCounter 来自 ./ 当前目录下 ClickCounter.js 文件
import ClickCounter from './ClickCounter'; 

/* ReactDOM是一个第三方模块
 * render()这个方法可以帮助我们把一个组件挂载到某一个DOM节点上
 * public目录下的index.html内有id = root 的这个DOM节点
 */
ReactDOM.render(
  /* <ClickCounter/> , < />是Jsx语法
   * 页面使用了这种语法一定要引入 import React from 'react';
   */
  <ClickCounter/>, 
  document.getElementByid('root')
);

2. 在 src 目录下新建 ClickCounter.js 并编写代码

/* import是ES6语法中导入文件模版的方式
 * 导入React组件，{ Component } 是ES6的结构赋值
 * { Component } 等价于 Component = React.Component
 */
import React, {Component} from 'react';

/* 通过ES6写法定义一个类 ClickCounter 
 * 这个类继承了 React 下面的 Component 这个类
 * 当一个类继承了React.Component类的时候，它就是一个React组件
 */
class ClickCounter extends Component {
    constructor(props) {
        super(props)
        this.onClickButton = this.onClickButton.bind(this);
        this.state = {count: 0}
    }

    onClickButton() {
        this.setState({
            count: this.state.count + 1
        })
    }
    
    /*
     * 组件里面会有一个 render 方法
     * 这个方法它会返回一个内容 return {}
     * render函数返回什么内容，这个组件就展示什么内容
     */
    render() {
        return(
            //下边也属于Jsx语法，比如引入react
            <div className='clickCounter'>
                <button onClick={this.onClickButton}>Click Me</button>
                Click count: <i>{this.state.count}</i>
            </div>
        )
    }
}

//最后通过 export default 这种方法把这个组件导出出去，供人使用
export default ClickCounter;