react简单入门教程(Todolist实现 )

class App extends React.Component{
    render() {
        return (
            <div className="App">
                hello,十月梦想! 第一个react小程序!
            </div>
        );
    }
}
//导出组件
export default App

在入口文件中使用import导入
import App from './App';

class App extends React.Component{
    render() {
        return (

            <div className="App">
            //jsx语法可以使用花括号使用js表达式,但不能使用js语句
                {1+1}
                hello,十月梦想! 第一个react小程序!
            </div>
        );
    }
}

第一种是现在定义一个函数,然后使用click调用

<button
    onClick={this.handlebtnClick.bind(this)}
>Add</button>
第二种可以直接在标签内使用语法
<button
    onClick={
    ()=>{
        alert('哎哟,你点击了我一下')
    }
    }
>Add</button>

在class类之后定义构造函数,
constructor(props) {
    super(props);
    //定义的数据存放为对象形式
    this.state = {
        list: [
            'learn English',
            'learn Math',
            'learn java'
        ]
    }
}

//map进行bainli遍历
    this.state.list.map((item,index)=>{
        return <li key={index}> {item}</li>
    })

父组件传递:使用属性content传给子组件
return <Todoitem key={index} content={item} /> 
子组件使用props.content接收
 return <li > {this.props.content}</li>

//子组件
子组件向父组件传递:使用一个方法向父组件传递
render(){
    
     return <li onClick={this.handleDelete.bind(this)}> {this.props.content}</li>
}
子组件定义的方法
handleDelete(){
        this.props.delete(this.props.index)
    }
 //父组件
 定义一个方法接收子组件的传递
  return <Todoitem key={index} content={item} delete={this.handleDelete.bind(this,index)} index={index} />
  父组件的方法
  handleDelete(index){
        const list=[...this.state.list];
        list.splice(index,1)
        this.setState({
            list
        })
    }