React之Todolist

软工212钱卢骏

于 2023-01-03 00:27:28 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签： react.js

本文链接：https://blog.youkuaiyun.com/Nathan_Qian/article/details/128524743

这篇博客介绍了如何使用React.js开发一个Todolist应用。首先从效果预览开始，然后通过创建React app，安装Sass来部署项目。接着详细讲解了app、Header、List和Item以及Footer组件的编写。在技术点部分，提到了Array.filter、Array.reduce的运用以及回调函数的概念和应用，阐述了如何将函数作为参数进行传递并适时回调执行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果预览

一.开始部署

- 创建一个react app

npm create-react-app my-app

- 安装sass

npm i sass

- 组件编写

app

import React, { Component } from 'react'
import Header from "./components/Header/index.jsx"
import Footer from "./components/Footer/index.jsx"
import List from "./components/List/index.jsx"

export default class App extends Component {

  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打代码', done: false }
    ]
  }
  //addtodo用于添加一个todo，接受的参数是todo的一个对象
  addtodo = (todoObj) => {
    //获取原todos
    const { todos } = this.state
    //追加一个新的todos
    const newtodos = [todoObj, ...todos]//这里有一个细节，会放在最前方
    //更新状态