1. 程式人生 > >深入淺出react

深入淺出react

super clas ext neu brush this col 化簡 初始化

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

  

深入淺出react