构建一个有交互性的组件

其实，React是非常适合构建用户交互的组件的。

一、观察create-react-app创建的目录结构

在开发过程中，主要关注src目录下的内容，所有的源代码都在这里。
create-react-app所创建的应用的入口都是src/index.js，这里渲染了一个名叫App的组件，App组件在同目录下的App.js里定义，是用类定义来定义的。

App.js

二、创建一个记录点击数的交互性的组件

• React规定，组件的名称首字母必须为大写，用以区分是自定义组件
• 参照着App.js的风格，在src/目录下创建一个名字为ClickCounter的代码文件ClickCounter.js:

// JSX语法会用到React，而定义新组件要继承 Component 
import React, { Component } from 'react'

// 使用ES6的类来定义组件ClickCounter 
class ClickCounter extends Component {
    // ES6的类构造器
    constructor(props) {
        // 继承父类的属性
        super(props)
        // 绑定事件onClickButton，this的作用域
        this.onClickButton = this.onClickButton.bind(this)
        // 类中的属性，count初始化值为0
        this.state = {count: 0}
    }
    // 方法名要遵守驼峰规则
    // 点击按钮事件，触发一次事件发生，则类的属性count加1
    onClickButton() {
        this.setState({count: this.state.count + 1})
    }
    // React的Component中的方法，生命周期之一，创建类
    render() {
        return (
            <div>
                <button onClick={this.onClickButton}>Click Me</button>
                <div>
                    Click Count：{this.state.count}
                </div>
            </div>
        )
    }
}

三、在入口文件中修改，渲染出来

• 观察一下原来的index.js
  index.js
• 根据原来的，模仿着改写：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import ClickCount from './ClickCounter'
import registerServiceWorker from './registerServiceWorker';

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

大功告成