首先，进行react文件夹及相关配置文件的创建。：
npx create-react-app my-app
这里可以定位到自己创建好的文件夹，放在d盘
先看到package.json里面会有相关的执行命令。其中scripts下会有start命令。通过npm run start启动程序。他会生成一个src目录下的app.js文件，将此文件中的无用部分删去。
代办事项采用 数组循环来进行实现，通过map函数渲染数组
在文本框输入值的时候，后台应该能获取到输入的值进行处理，这里我们选择使用onChange函数实现。给一个参数e，并进行打印。（这里选中参数后，可以使用快捷键。快捷键可以自行查看。在VScode中左下角设置的键盘快捷方式。搜索console.log即可）
Console.log的参数有个target.value属性.通过该属性即能拿到输入的值
接下来，输入的值需要进行存储。所以我们定义一个value 变量，通过react的useState来实现。同时定义一个方法去更新该值（value）。在input每次输入的时候，当他监控到onchange发生变化之后，需要将input 的值更新到value里面
接下来需要将value添加到任务数组里面。为添加按钮增加一个onclick事件，首先创建一个新的数组，它由旧数组加新数据组成，最后在列表中插入span标签，内容为输入的内容item。即可完成添加功能的实现。
完成功能的预想是，点击完成按钮后，相关的待办事项会被划掉。这里在span标签里面插入style。TextDecoration属性为line-through。但是这里需要有一个状态的判定，如果没有状态判定的话，添加的所有内容都会被划掉。
给完成按钮添加一个onclick事件，然后map正好可以通过index来提供数据的位置。拿到是第几个数据后，针对性的实现完成功能。并更新数据。
删除功能与完成功能的实现类似，但是，其中为了实现删除数组数据，采用slice函数进行数据的裁切。等于是重新拼接了一个新的数组。最后更新到新数组，就完成了删除功能。
初学react，这是本菜鸟第一次用react实现功能。编辑功能对我这种菜鸟来说还是理解困难，会继续学习进步。
代码如下：
import './App.css';
import { useState } from 'react';
function App() {
const [value,setValue] = useState('')
const [daiban,setDaiban] = useState([{value:value,status:false}])
return (
<div className="App">
<div>
<input onChange={(e) => {
setValue(e.target.value)
console.log("🚀 ~ file: App.js:17 ~ App ~ e:", e)
return }}/>
<button onClick={() => {
const newDaiban = daiban.concat([{value:value,status:false}])
setDaiban(newDaiban)
}}>添加</button>
</div>
<div>
<ul>
{
daiban.map((item,index) =>
<li><span style={{textDecoration:item.status ?'line-through':null}}>{item.value}</span>
<button onClick={() =>{
const newDaiban = daiban.map((k,i) =>{
if(i ==index){
k.status = !k.status;
}
return k;
})
setDaiban(newDaiban);
}}>完成</button>
<button onClick={() =>{
const newDaiban = [...daiban.slice(0,index,...daiban.slice(index+1))]
setDaiban(newDaiban)
}}>删除</button>
<button>
编辑</button>
</li>)
}
</ul>
</div>
</div>
);
}
export default App;
实现效果如下图
