react新手入门方法

一、安装

1. npm i create-react-app -g

2. create-react-app 项目名称

3. cd 项目

npm start

二、元素渲染

1.文本渲染

2.HTML渲染

 

3.条件渲染

 4.列表渲染

 三、事件

 四、响应式数据

// react 响应式数据state

// 导入React 和Component方法 imrc + TAB

import React, { Component } from 'react';

// 创建一个App类 基础了Component方法 ccc+Tab

class App extends Component {

  // 构造函数

  constructor(props) {

    // 执行父类方法

    super(props);

    // 响应式状态

    this.state = { num:1 }

  }

  // 更新num

  addNum(n){

    this.setState({num:this.state.num+n})

  }

  // 渲染方法

  render() {

    // 返回一个节点

    return (<div>

      <h1>函数类</h1>

      <button onClick={()=>{

        //更新num值为原来的值加1

        this.setState({num:this.state.num+1})

      }}>{this.state.num}</button>

      <button onClick={ this.addNum.bind(this,2)}>{this.state.num}</button>

    </div>);

  }

}

export default App;

// 更新state状态 this.setState({key:valu})

// bind 创建一个新的函数，改变this

// state状态（数据）理解为vue里面的data