一、拆分组件 首先第一步需要做的是将这个页面拆分成几个组件 首先顶部的输入框,可以完成添加项目的功能,可以拆分成一个Header 组件 中间部分可以实现一个渲染列表的功能,可以拆分成一个List 组件 在这部分里面,每一个待办事项都可以拆分成一个Item 组件 最后底部显示当前完成状态的部分,可以拆分成一个Footer 组件 ...
2.2 新建React项目 1.新建一个项目文件夹Code,使用VSCode,将Code文件加添加到工作区; 图2.1 2.右击Code文件夹,在选项卡中选择在终端中打开; 图2.2 3.在终端中输入如下命令,新建React项目: create-react-app todo-list 图2.3 4.生成Rreact项目如下 : ...
[编号:react_06] 1 新增 紧接上一篇的代码,我们需要实现需求:在页面 input 框里输入的内容,当点击“提交按钮”时,其内容会被依次放到下边的“列表项”里。 进入TodoList.js 文件:前置知识:《JavaScript 基础——JS 数组:② ES5 数组方法》 《JavaScript 基础——JS 数组:① ES3 数组方法》 import React, ...
//两个列表的子组件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...
TodoList整体作为一个大组件; Header:input添加 List:列表作为一个组件; Item: 列表中的每个列表项(ListItem)作为一个组件 Footer:底部展示和功能作为一个组件 代码编写 App.js 父组件 importReact, {Component}from'react'importHeaderfrom'./components/Header'importFooterfrom'./components/Footer'importListfrom'....
"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代码 ...
1TodoItem.js代码优化 之前的几篇文章,我们完整地做出了 TodoList 的相关功能。但由于讲解的需要,其中有一些代码并不符合“标准 React编码规范”。 本篇我们对之前的代码进行一些“优化”。 打开TodoItem.js文件,需要优化的点: 为了“性能”,我们一般把与“this 指向绑定”相关的代码都统一放在constructor里边; ...
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 是...