前端学习：React快速入门TodoList实例

$ npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
$ npm config get registry

$ node -v
$ npm -v

$ npx create-react-app my-app
$ cd my-app
$ npm start

registerServiceWorker.js
index.css
App.test.js
App.css
logo.svg

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
import "./style.css"
ReactDOM.render(<TodoList />, document.getElementById('root'));

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem.js';
// 定义一个组件
class TodoList extends Component {
  // 构造函数初始化
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      inputValue: ''
    };
    // 代码优化
    this.handleClick = this.handleClick.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }
  handleClick() {
    this.setState({
      // 展开运算符 es6
      list: [...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleInput(e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  handleDelete(index) {
    // 拷贝一个副本出来，操作副本
    const list = [...this.state.list];
    list.splice(index, 1)
    this.setState({
      list: list
    })
  }
  getItemListByThis(index, item){
    return (
      <li key={index} onClick={this.handleItemClikc.bind(this, index)}> {item}</li>
    )
  }
  getTodoItems(){
      return (this.state.list.map((item, index)=>{
                return (
                  <TodoItem 
                    delete={this.handleDelete} 
                    key={index} 
                    index={index} 
                    content={item} 
                  />
                )
                }))}
  // 必须有render
  render() {
  // 花括号中可以写js表达式
    return (
      // jsx语法，可以直接使用标签结构
      <Fragment>
      <div> 
        <input type="text" value={this.state.inputValue} onChange={this.handleInput.bind(this)}/>
        <button style={{color: 'white'}} className="red-btn" onClick={this.handleClick}>点击</button>
      </div>
      <ul>
          {  this.getTodoItems()  }
      </ul>
      </Fragment>
    );
  }
}
export default TodoList;  //导出才可以导入

import React, {Component} from "react";
class TodoItem extends Component{
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }
    //子组件接受参数props
    handleClick() {
        this.props.delete(this.props.index)
    }
    render() {
        const content = this.props.content
        return (
            <div onClick={this.handleClick}> {content} </div>
        );
    }
}
export default TodoItem;

.red-btn{
    background: red;
}