第一步

1.創(chuàng)建一個(gè)文件夾來存放項(xiàng)目文件
2.打開cmd窗口進(jìn)入到剛創(chuàng)建的文件夾目錄
3.在cmd窗口輸入 $ npx create-react-app my-app 
3. 文件下載完成在窗口中輸入 cd my-app 進(jìn)入到文件內(nèi)去 
4. 在cmd窗口輸入 npm start 此刻項(xiàng)目文件會自動啟動打開瀏覽器的http://localhost:3000端口下運(yùn)行
5.在項(xiàng)目文件中刪除一些官方自帶的文件

第二步

1.創(chuàng)建index.js文件
2.引入項(xiàng)目的依賴
3.創(chuàng)建App.js文件
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

這里要另外安裝axios依賴儒鹿，這個(gè)用來發(fā)送Ajax請求的
首先要安裝yarn,自行百度

import React, { Component } from 'react';
import Todolist from './Todolist';
import axios from "axios";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputvalue :  "",
      List : []
    }
    this.remove = this.remove.bind(this);
    this.addClick = this.addClick.bind(this);
    this.handerloChange = this.handerloChange.bind(this);
    
  }
  render() {
    return (
      <div>
        <div>
            <input type="text" placeholder="請輸入待辦事項(xiàng)" value={this.state.inputvalue} onChange={this.handerloChange}></input>
            <button onClick={this.addClick}>提交</button>
        </div>
        <ul>
            {this.getTodoItem ()}
        </ul>
      </div>
    );
  }
  componentDidMount() {
    axios.get('http://yapi.demo.qunar.com/mock/38353/app')
    .then((res) =>{ console.log(res.data);
      this.setState(() =>{
          return {
            List : res.data
          }
      });
    })
    .catch(() =>{alert('erro')})
  }
  getTodoItem () {
    return  this.state.List.map((item,index) =>{
      return(
            <Todolist
             key={index} 
             content={item} 
             index={index} 
             delet={this.remove}
             />
      )
    })
  }
  handerloChange (e) { 
    const value = e.target.value;
    this.setState(() => ({
        inputvalue : value
    }));
  }
  addClick () {
    this.setState((prevState) =>({
      List : [...prevState.List,prevState.inputvalue],
      inputvalue : ""
    }))
  }
  remove (index) {
 
    this.setState((prevState) => {
      const List = [...prevState.List];
      List.splice(index,1);
      return {List}
    });
  }
}

export default App;

第三步

創(chuàng)建Todolist 組件
新建一個(gè)Todolist .js文件
代碼如下：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Todolist extends Component {
    constructor(props) {
      super(props);
      this.state={
       }
      this.handelClick = this.handelClick.bind(this);
    }
    shouldComponentUpdate(nextProps,nextState) {
        if(nextProps.content !== this.props.content) {
            return true;
        }else{
            return false;
        }
    }
    render() {
        const {content} = this.props;
        
        return (
            <div onClick={this.handelClick}>{content}</div>
        )
    }


    handelClick() {
        const {delet,index} = this.props;
        delet(index);
    }
}
Todolist.propTypes = {
    content : PropTypes.oneOfType([PropTypes.string,PropTypes.number]),
    delet : PropTypes.func,
    index : PropTypes.number
}
export default Todolist;

最后

npm run start 來運(yùn)行項(xiàng)目