1、ClickCounter计数器Demo

创建一个项目，默认包含如下文件：

1、src：源码

2、public：

3、README.md

4、package.json

5、node_modules

src/index.js文件是入口

实现一个点击按钮计数组件：

index.js文件如下：

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

import ClickCounter from "./ClickCounter";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <ClickCounter />
  </React.StrictMode>,
  rootElement
);

ClickCounter.js文件如下：

import "./styles.css";
import React, { Component } from "react";

export default 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 (
      <div>
        <button onClick={this.onClickButton}>Click me</button>
        <div>Click Count : {this.state.count}</div>
      </div>
    );
  }
}