一、创建项目
查看react官方文档
https://reactjs.bootcss.com/docs/create-a-new-react-app.html
npx create-react-app my-app
cd my-app
yarn start
二、精简代码
刚刚开始接触react,创建完react项目以后,感觉文件好多,好复杂,这个时候我们把不需要的文件删掉,对于这个项目来说,我的src文件夹里面就剩下index.js入口文件,App.js文件,其他全部删掉,包括在index.js 和 App.js文件中的相关引用,也全部清除,这样,这个项目就精简了很多,并且对我们的todolist毫无影响,为了我们很快认识react的项目
1.将App.js重命名为Todolist.js,以及index.js中引入的App替换成Todolist
2.下文中TodoItem.js是个子组件
Todolist.js
import React from 'react';
import TodoItem from './TodoItem'
/**
* Todolist是父组件
* TodoItem 是子组件
* 父组件向子组件用属性来进行传值
* 子组件通过props来接收父组件传过来的参数
* 子组件想和父组件通信。直接调用父组件的方法即可 eg: this.props.delete()
*
* * */
class Todolist extends React.Component {
//初始化
constructor(props){
super(props)
this.state = {
list:[],
value:''
}
//优化
this.handleClick = this.handleClick.bind(this)
this.changeInput = this.changeInput.bind(this)
this.removeItem = this.removeItem.bind(this)
this.deleteItem = this.deleteItem.bind(this)
}
handleClick(){
this.setState({
list:[...this.state.list,this.state.value],
value:''
})
}
changeInput(e){
this.setState({
value:e.target.value
})
}
removeItem(index){
const list = [...this.state.list]
list.splice(index,1)
this.setState({
list
})
//这种方法虽然可以实现删除功能,但不建议直接操作state里面的值,会影响调试且性能低下
// this.state.list.splice(index,1)
// this.setState({
// list:this.state.list
// })
}
deleteItem(index){
const list = [...this.state.list]
list.splice(index,1)
this.setState({
list
})
}
getList(){
return (
this.state.list.map((item,index) =>{
// 组件拆分之前
// return <li key={index} onClick={this.removeItem.bind(this,index)}>{item}</li>
// 组件拆分之后
return <TodoItem content={item} key={index} index={index} delete={this.deleteItem}/>
})
)
}
render() {
return (
<div>
<input type="text" placeholder="请填写要添加的内容" onChange={this.changeInput} value={this.state.value}/>
<button onClick={this.handleClick}>add</button>
<ul>
{
this.getList()
}
</ul>
</div>
)
}
}
export default Todolist;
TodoItem.js
import React from 'react'
class TodoItem extends React.Component{
constructor(props){
super(props)
this.remove = this.remove.bind(this)
}
remove(){
this.props.delete(this.props.index)
}
render() {
//解构赋值
const {content} = this.props
return (
<li onClick={this.remove}>{content}</li>
)
}
}
export default TodoItem
这个网址会更加详细的讲解以上内容
https://www.imooc.com/video/17566