//导入React相关依赖importReactfrom'react';//创建一个组件classToDoListextendsReact.Component{//构造函数constructor(props){super(props);//this是父组件(类)的一个实例,实例就类似于java里的一个类,创建了这个类型的一个对象,这个对象就是实例this.state={//this.state里可以写一些初始化的数据}}//render渲...
一、拆分组件 首先第一步需要做的是将这个页面拆分成几个组件 首先顶部的输入框,可以完成添加项目的功能,可以拆分成一个Header 组件 中间部分可以实现一个渲染列表的功能,可以拆分成一个List 组件 在这部分里面,每一个待办事项都可以拆分成一个Item 组件 最后底部显示当前完成状态的部分,可以拆分成一个Footer 组件 ...
//两个列表的子组件import React, { Component } from "react"; import TodoListItem from"./TodoListItem"; exportdefaultclass TodoList extends Component {//props 就是我们从父组件传递进来的数据constructor(props) { super(props);//console.log(props); this.s} render() {return( {this.props.title...
}// 清除所以已经完成的任务clearAllDone =() =>{const{ todoList } =this.state;constnewTodos = todoList.filter((item) =>{return!item.done})this.setState({ todoList : newTodos }) }render() {const{ todoList } =this.statereturn(todoList案例<HeaderaddTodo={this.addTodo}/><ListtodoList...
1TodoItem.js代码优化 之前的几篇文章,我们完整地做出了 TodoList 的相关功能。但由于讲解的需要,其中有一些代码并不符合“标准 React编码规范”。 本篇我们对之前的代码进行一些“优化”。 打开TodoItem.js文件,需要优化的点: 为了“性能”,我们一般把与“this 指向绑定”相关的代码都统一放在constructor里边; ...
实现一个 todo list,是最快能熟悉一门语言和框架的。 源码的 GitHub 地址:react-todo-list; demo 演示地址:codesanbox-demo; 原文地址:蚊子的前端博客 1. 准备工作 我们使用官方提供的create-react-app来快速创建一个项目。 $ npx create-react-app my-app ...
"react-app" ] }, 找到babel添加plugins就可以了’ 3.安装antd和mobx 这一步没有什么特别,安装就行 yarn add antd yarn add mobx yarn add mobx-react 4.修改src目录下面的文件 新建todolist.js, mobx。。。 最终目录如下 下面贴代码 mobx/index.js代码 ...
todolist for react redux 学习总结 前言 最近一直在学习react技术栈,相关的理论和概念基本都了解了,之前也用reactjs写了几个demo,切身体会到了函数式编程和组件化开发的强大之处,但因各种主客观原因,事后没有对相关知识点进行梳理和总结,而且工作中也没用到,导致现在复习的时候生疏了,还需要花大部分时间重新理清...
上述代码中,存在以“.jsx”结尾的文件,jsx文件是react脚手架中特有的文件类型,用于区分组件还是普通Js文件。 项目基础结构搭建完毕后,我们在每个组件中,完善基本的Html结构和css App根组件 App.jsx importReact, {Component}from"react";importHeaderfrom"./components/Header";importListfrom"./components/List";impor...
React 是一个用于构建用户界面的 JavaScript 库，主要特点有：声明式渲染：设计好数据和视图的关系，数据变化 React 自动渲染，不必亲自操作DOM组件化：页面切分成多个小部件，通过组装拼成整体页面，利于代码复用本文通过写个简单的 TodoList 实例，不求甚解，熟悉下 React 的开发过程。1. 安装 Node.js Node.js 是...