imooc_React16 快速上手 实现TodoList

react简介以及语法基础

react Fiber // React 16 之后的版本对应的框架

redux

react 环境搭建

React 脚手架工具 create-react-app

1npx create-react-app todolist  # create-react-app
2cd todolist
3yarn start  # npm run start
什么是组件

component

简单的jsx语法

项目代码

1├── src
2│   ├── TodoItem.js
3│   ├── TodoList.js
4│   ├── index.js
5│   ├── serviceWorker.js
6│   └── style.css

Index.js

Index.js 是项目的入口

1import React from 'react';
2import ReactDOM from 'react-dom';
3import './style.css';
4// 组件，大写字母开头   s
5import TodoList from './TodoList';
6
7
8ReactDOM.render(<TodoList />, document.getElementById('root'));

所有的组件都是大写字母开头的， 引入React是为了识别大写字母开头的组件

TodoList.js

组件, ES6语法规范下的一些新的写法

 1import React, {Component, Fragment}from 'react';
 2import TodoItem from './TodoItem';
 3
 4// 组件需要继承 React.Component, 才能具有组件的方法以及生命周期
 5class TodoList extends Component {
 6
 7  // constructor(props){
 8  //   super(props);
 9  //   this.state={
10  //     list:[
11  //       'learn react',
12  //       'learn english'
13  //     ]
14  //   }
15  //this.handleDelete=this.handleDelete.bind(this) 
16  // }
17
18  state = {
19    list: [],
20    inputValue: ''
21  }
22
23  handleAdd=()=> {
24    // this.state.list.push("hello world")   这样写是不工作的
25    this.setState({
26      list: [...this.state.list, this.state.inputValue],
27      inputValue: ''
28    })
29
30    console.log("add new item: " + this.state.list)
31  }
32
33  handleInputChange(e) {
34    this.setState({
35      inputValue: e.target.value
36    })
37  }
38
39  handleDelete(index) {
40    // 如果要对state 中的数据进行操作，最好通过副本去操作
41    const list = [...this.state.list]
42    list.splice(index,1)
43    // this.setState({
44    //   list:list
45    // })
46    this.setState({list})
47  }
48
49  getItems(){
50    return(
51      this.state.list.map((item, index) => {
52        return <TodoItem key={index} 
53        handleDelete={this.handleDelete.bind(this)}
54        content={item} 
55        index={index}/>
56      })
57    )
58  }
59
60  render() {
61    // jsx 语法
62    // 父组件通过属性的方式向子组件传递参数
63    // 子组件通过props的方式接受父组件传递的参数
64    return (
65      <Fragment>
66        <div>
67          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}></input>
68          {/* <button style={{background:'red', color:'#fff'}} onClick={this.handleAdd.bind(this)} >add</button> */}
69          <button className='red-btn' onClick={this.handleAdd} >add</button>
70        </div>
71        <ul>
72          {
73            // this.state.list.map((item, index) => {
74            //   return <TodoItem key={index} 
75            //   handleDelete={this.handleDelete.bind(this)}
76            //   content={item} 
77            //   index={index}/>
78            //   // return <li onClick={this.handleDelete.bind(this, index)} key={index}>{item}</li>
79            // })
80            this.getItems()
81          }
82        </ul>
83      </Fragment>
84    );
85  }
86}
87
88export default TodoList;

TodoItem.js

 1import React from 'react'
 2
 3class TodoItem extends React.Component{
 4    // 子组件如果要和父组件通信要调用父组件传递过来的方法实现传值
 5    handleDelete(){
 6         // 子组件向父组件传值
 7        this.props.handleDelete(this.props.index)
 8        console.log(this.props.index)
 9    }
10
11    render(){
12        const {content} = this.props;
13        return(
14          <div onClick={this.handleDelete.bind(this)}>
15              {/* {this.props.content} */}
16              {content}
17          </div>  
18        )
19    }
20}
21
22export default TodoItem;