深入浅出react

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545; min-height: 14.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
span.s1 { font: 12.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
span.s3 { color: #e4af0a }

1，新建项目

为了方便安装一个初始化简单的react组件，我们可以先通过npm 来安装create-react-app

npm install --global create-react-app

create-react-app first_react_app

注意：create-react-app默认的是npm镜像  由于npm属于国外镜像，有时候安装会很慢。解决办法

通过换源：npm config set registry https://registry.npm.taobao.org  默认设成淘宝镜像

检验是否换源成功：npm info express或者npm config get registry

启动项目

npm start

1.2增加一个新的 React组件

import React, { Component } from ‘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() {
    const { count } = this.state
    return (
      <div>
        <div>
          <button onClick={this.onClickButton}>大师马快点我</button>
        </div>
        <p>
          你点了{count}次
          </p>
      </div>

    )
  }
}
export default ClickCounter

原文地址：https://www.cnblogs.com/mawn/p/9056954.html