深入淺出react
阿新 • • 發佈:2018-05-18
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