TodoList 案例在前端学习中挺重要的,从原生 JavaScript 的增删查改,到现在 React 的组件通信,都是一个不错的案例,这篇文章主要记录,还原一下通过 React 实现 TodoList 的全过程 一、拆分组件 首先第一步需要做的是将这个页面拆分成几个组件 首先顶部的输入框,可以完成添加项目的功能,可以拆分成一个Header 组件 ...
2.2 新建React项目 1.新建一个项目文件夹Code,使用VSCode,将Code文件加添加到工作区; 图2.1 2.右击Code文件夹,在选项卡中选择在终端中打开; 图2.2 3.在终端中输入如下命令,新建React项目: create-react-app todo-list 图2.3 4.生成Rreact项目如下 : ...
}// 清除所以已经完成的任务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...
1.先在App.jsx里面初始化数据 2.把App.jsx里面的todo通过List.jsx组件传给item.jsx以显示列表数据 第三步. 实现新增功能 1.在App.jsx里面写一个添加一个对象的方法addTodo,将addTodo方法给Header.jsx组件,Header.jsx组件通过这个方法拿到input里面的值作为一个对象传为App.jsx 2.子组件中需要判断是否是回车按钮...
App.js 父组件 import React, { Component } from 'react' import Header from './components/Header' import Footer from './components/Footer' import List from './components/List' import './App.css'; export default class App extends Component { state = { todoList: [ { id: 1, name: "吃...
完成版的todolist如上图所示,按照react组件化编程的风格,我大致将todolist分为三个组件,分别是TodoHeader,用来输入任务名称,TodoMain,用来展示任务,TodoFooter,用来全选和清楚选中的任务,我创建的文件,及问价目录如下 三 输入,存储任务 index.js作为webpack打包的入口文件,App作为主要的组件来引用上面三个组件。
这个todo-list 项目,很简单,前端使用 react,后端 nodejs 使用 koa2 进行开发。数据库使用 Mysql。之所以要选择这些框架、数据库,是因为我都不会这些技术,为了学习,所以就使用这些技术进行开发。 在这次的小项目开发中,大概用了1个月的时间吧,平时有空就开始开发或者学习。
3. 实例 TodoApp 主要实现功能有：添加一个待办事项删除一个待办事项勾选复选框标记事项已完成如图所示，总共将页面拆分成了三个组件：TodoApp, TodoList 和 TodoItem。3.1 index.js 入口文件 应该可以类比 java 的 main 方法，在 src 目录新建 index.js 内容如下：// 引入 React, ReactDOMimport React from...
切换到想创建项目的目录create-react-app react-demo 进入项目文件夹cd react-demo 启动项目npm start 注意:创建项目下载依赖要是特别慢,可以换源create-react-app使用yarn创建react项目 public文件夹index.html介绍 二、todoList案例相关知识点 拆分组件、实现静态组件,注意:className、style的写法 ...
React入门实战实例——ToDoList实现,最近学习了一小段时间的React,对一些React开发组件的基础有了一点认识,跟着教学视频,自己实现了一个ToDoList组件的功能,今天把做这个组件的过程记录一下,加深学习印象,给同样的前端入门者做一个参考。...