React实现todolist

最新推荐文章于 2022-05-01 17:41:07 发布

曼～

最新推荐文章于 2022-05-01 17:41:07 发布

阅读量526

点赞数

分类专栏： react demo 项目文章标签： todolist react

本文链接：https://blog.csdn.net/Mary_wmt/article/details/93740643

版权

本文介绍了如何利用React开发一个TodoList应用。首先讲解了React的特点，包括声明式编程和数据驱动UI。接着，详细描述了开发前的准备工作，如安装和运行React项目。文章深入探讨了文件结构，特别是`todo-list`文件夹内的组件组织，强调了组件命名和渲染规则。文中还讨论了组件之间的数据传递，包括父向子和子向父的传递方式。最后，提到了React构造函数的作用以及推荐使用的插件和库。

摘要由CSDN通过智能技术生成

React特点

用于构建用户界面的 js库、框架

声明式：数据改变时，能够有效地更新并正确地渲染组件；以声明方式编写UI，使得代码更可靠，利于调试

准备工作

安装：局部安装 npx create-react-app todo-list

npx–>npm 5.2+附带的package运行工具
运行： npm start 默认在3000端口下运行
删除src文件夹内容，更改为如图下所示

![src](E:\teacher-code\src.png

todo-list文件夹

组件首字母大写

./index.js

→	作为render,渲染入口

import React from 'react'
import {
    render } from 'react-dom'

import App from './App'
render(
    <App />,
    document.querySelector('#root')
)

./App.js

 → 	存放最外层组件，即父组件

引入子组件后，要在render方法中return组件,首字母大写

可以使用或两种方式渲染组件

必须使用闭合标签<></> 、

…包裹

传值，父组件-→后代组件的数据传递，通过属性传递使用特定属性值

import React, {
    Component } from 'react'
//没有./components/index.js文件时，引入子组件的方法
// import TodoHeader from './components/TodoHeader'
// import TodoInput from './components/TodoInput'
// import TodoList from './components/TodoList'

有./components/index.js文件时，引入子组件的方法
import {
   
    TodoHeader,
    TodoInput,
    TodoList
} from './components'

export default class App extends Component {
   

    constructor() {
   
        super()
        this.state = {
   
            title: '待办事项列表',
            subtitle: