React初体验之-TodoList

今天第一天学习react，写的一个练习。
先上图

创建一个react项目只需三个命令：

1. npx create-react-app myApp
2. cd myApp
3. npm start

App.js代码

import React ,{Component,Fragment}from 'react'
import TodoItem from "./TodoItem";
import  './todoList.css'
class App extends Component{
    constructor(props) {
        super(props);
        this.state={
            list:[
                'learn react',
                'learn English'
            ],
            inputValue:""
        }
        this.handleInputChange=this.handleInputChange.bind(this);
        this.handleBtnClick=this.handleBtnClick.bind(this);
        this.handleDelete=this.handleDelete.bind(this);
    }

    handleBtnClick(e){
        //这里的this指向了触发这个函数的button按钮了。下面要加bind(this)
        //  this.state.list.push('hello world')
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })
    }
    handleInputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }
    handleDelete(index){
        const list=[...this.state.list];
        list.splice(index,1);
        this.setState({list})
    }

    getTodoItems(){
        return(
                this.state.list.map((item,index)=>{
                return <TodoItem
                    handleDelete={this.handleDelete}
                    key={index} content={item}
                    index={index}></TodoItem>
                }
            )
        )
    }

  render (){
      return(
      <Fragment >
          <div className='course'>
              <span>TodoList</span>
              <input className='input' value={this.state.inputValue} onChange={this.handleInputChange}/>
              <button onClick={this.handleBtnClick}>add</button>
          </div>
          <strong>正在进行</strong>
          <ul>
              {this.getTodoItems()}</ul>
      </Fragment>
      );
  }
}

export default App;

TodoItem组件

import React, {Component, Fragment} from 'react'
class TodoItem extends Component{
    constructor(props) {
        super(props);
        this.handleDelete=this.handleDelete.bind(this)
    }

    handleDelete(){
        const {handleDelete,index}=this.props
        handleDelete(index)
    }
    render() {
        const {content}=this.props
        return (
            <Fragment>
                <div onClick={this.handleDelete}><div style={{width:"6px",height:"6vh"}}></div>
                    {content}
                </div>
                <a title="fds" style={{display:"none"}}>sdsd</a>
            </Fragment>

        );
    }

}

export default TodoItem;

CSS代码

*{
    box-sizing: border-box;
}
body{
    background-color: darkgrey;
}
#root{
    background-color: darkgrey;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
input{
    width: 30vw;
    height: 30px;
    border-radius: 5px;
}
#root > strong{
    font-size: 20px;
    margin: 20px 0;
    transform: translateX(-165px);
}
.course{
    font-size: large;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 100%;
    height: 60px;
    background-color: dimgrey;
    color: white;
}
.course > button{
    box-shadow: 1px 1px black;
    border-radius: 2px;
}
.course > span{
    margin: 0 3em 0;
}
.course > button{
    margin: 0 1em 0;
}

ul >div{
    display: flex;
    color: white;
    border-radius: 2px;
    height: 26px;
    background-color: dimgrey;
    margin: 5px 0;
    width: 50vw;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
}
ul >div >div{
    background-color: teal;
    margin: 0 2px 0 0;
    border-radius: 2px 0 0 2px;
}
ul > div:hover{
    background-color: white;
    color: black;
}

笔记
1.react执行的入口文件是index.js
2.组件就是网页中的一部分
3.JSX语法，可以在react中直接使用标签，也可以使用花括号**{}**来写js表达式，只能是表达式，不能是语句（语句会报错）
4.绑定事件onClick={this.handleBtnClick.bind(this)。一定要使用bind修改this
5.对数组的修改不能直接在数组身上修改，而是应该通过react提供的方法，否则react监测不到，就无法修改dom。
6.删除或者修改数组，我们定义一个副本，在副本上改变，再将副本赋值给对象的数组
7.父组件通过属性的形式向子组件传递参数，子组件通过this.props.属性名的方式接收参数
8.子组件向父组件传值，要调用父组件传过来的方法
9.向react中标签添加样式使用style属性。例：style={{background:‘red’,color:’#fff’}}
10.添加样式时不能再使用calss，这是关键字。应该使用className。
11.使用Fragment可以不必在外面包裹div

还是那句话， 路漫漫其修远兮，吾将上下而求索