一、index.js

ReactDOM.render(
 
  
 ,
 document.getElementById('root')
);

二、TodoList

1、constructor

constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
      list: []
    }
  }

2、render

 render() {
    return (
      
        

          {/*label标签的作用，扩大点击范围*/}
          输入内容
           this.handleInputChangle(event)}/>
           this.handleButtonVlue(event)}>提交
          

          

            {this.getTodoList()}
          
        
      
    )
  }

3、getTodoList

getTodoList() {
    return (
      this.state.list.map((value, index) => {
        return 
          {/*这块需要强制绑定为父组件的this，否则在子组件中找不到*/}
        
      })
    );
  }

4、事件函数

 /**
   * 监听输入框变化
   **/
  handleInputChangle(e) {
    const value = e.target.value;
    this.setState(() => ({
      inputValue: value
    }))
  }
 
  /**
   * 监听点击按钮
   **/
  handleButtonVlue(e) {
    this.setState((prevStatus) => ({
      list: [...prevStatus.list, this.state.inputValue],
      inputValue: ''
    }))
  }
 
  /**
   * 监听点击item删除
   **/
  handleItemDelete(index) {
    this.setState((preStatus) => {
      const list = [...preStatus.list];
      list.splice(index, 1)
      return {
        list
      }
    });
  }

5、网络请求

使用Charles代理网络，安装证书，设置端口，在手机上面打开网络WIFI，设置代理IP和端口，这样就能监听到手机访问的网络，拦截请求，代理本地地址，返回本地数据。

需要注意的是charles识别不出来localhost，需要在package.json中改成设置：

* "start": "set PORT=3000 HOST=localhost.charlesproxy.com && react-scripts start",

访问时候使用：

http://localhost.charlesproxy.com:3000/

（1）引入axios

yarn yarn add axios 

（2）在componentDidMount进行网络请求

 /**
   * 这块进行网络请求
   */
  componentDidMount() {
    axios.get('api/todolist')
      .then((res) => {
        this.setState({
          list: [...res.data]
        })
      }).catch(() => {
      alert('发生错误')
    })
  }