妙味 React 周末班,学习记录第三弹来啦~不废话,上文档学习吧!(文末有视频彩蛋)
本周课程记录(12 月 9 日)
本次课程要点
利用 React 实现我们的第一个 todoList 程序
npm 基本使用
课程时间线
10:00 整喽,老司机开始开车了
todoList 练习讲解
功能分析
- 焦点在输入框时(回车键添加)添加一条新的内容
- 展示任务列表
- 改变当前任务状态(已完成 or 未完成)
- 编辑当前任务(双击,修改完成回车或失去光标)
- 删除当前任务(点击)
- 全部改成已完成状态(点击)
- 删除全部已完成(点击)
- 记录未完成任务的条数
- 分类显示 : 全部任务、已完成任务、未完成任务(点击)
- 目录结构划分
- CSS
- JS 组件结构划分,这里进行了模块化处理,每个组件都是一个单独的文件,方便后期我们进行模块化加载
- Header.js —— 所有关于头部组件的 js
- Main.js —— 所有关于 Main 组件的 js
- Footer.js —— 所有关于 Footer 组件的 js
- App.js —— 主组件的 js
- Lib 需要引入的初始的 js 文件
- React.development.js
- React-dom.development.js
- Babel.min.js
- 分析拆解 HTML 结构
- 组件划分
`<App/>` 主组件
`<Header/>` 头部组件
`<Main/>` 主体组件
`<Footer/>` 底部组件
数据格式分析
data:[
{
id:1,//后期循环要用到的 key 值
title:’这是任务的标题’,
completed:false //控制是否完成
},
{
id:2,
title:’这是任务的标题’,
completed:false
}
]
展示任务列表功能完善(Main 组件中)
- 利用 map 循环数据显示
为了能够在组件之间共享数据,我们通常把数据放置在这些组件的共同父级组件中:App 组件 - 父 -> 子:通过属性 props
- 子 -> 父:通过父级传入子级的事件回调
- 利用 map 循环数据显示
11:05 是时候来一支黄鹤楼 放飞一下自我了
- 11:20 开始完善添加添加数据的功能
- 添加一条新的数据 onKeyDown,按下回车(keycode=13),把新的数据通过事件传递给父组件 App,统一修改,可以利用 push 或者扩展运算符
养成好习惯,所有的数据操作都由父级去完成,子级只读取,如果子级需要对数据进行修改,需要利用事件回调通知父级进行操作 - 添加是否完成的状态
- 利用受控组件 checkbox 完成,在 onChange 事件,修改数据中的对应项的 completed—>同步状态—>重新渲染 DOM
在项目中养成习惯,修改数据,然后通过数据去更新状态
- 利用受控组件 checkbox 完成,在 onChange 事件,修改数据中的对应项的 completed—>同步状态—>重新渲染 DOM
- 删除单条数据
- 点击按钮时,调用 App 组件中传入的事件回调,传入当前是第几条数据
- 利用 filter 过滤掉该条数据—> 同步状态 —> 重新渲染 DOM
- 全选功能实现
- 依然利用受控组件 checkbox,onChange 时,修改数据中所有项的 completed,然后进行同步
- 统计未完成的条数
- 循环累计 completed 为 false 项的结果,可以利用 filter,然后拿到用数组的 length
- 清除已完成
- 过滤掉数据中所有 completed 为 true 的项,然后进行同步
- 添加一条新的数据 onKeyDown,按下回车(keycode=13),把新的数据通过事件传递给父组件 App,统一修改,可以利用 push 或者扩展运算符
12:20 吃饭饭去
- 14:00 精神抖擞 我们继续撸码
- 分类展示功能完善
- 全部列表,未完成列表,已完成列表,添加 onClick 事件,通过事件回调,同步显示数据
- 编辑输入框内容
- 双击的时候,出现输入框可以进行编辑,隐藏文本展示框
- 在
<Main />
组件的 componentDidUpdate 周期中,每次组件更新之后通过 refs 获取到 ul 下所有输入框,态判断编辑状态的数组中某一项是是编辑状态时,对应的 input 加 focus 焦点 - input onblur 时 判断是否更新该条信息
- 调用
<App />
传入的事件回调 更新数据 —> 同步
- 附加功能说明
- 属性默认值:如果不传参数,默认一个空函数
Header.defaultProps = {
onSubmit:function(){}
}
- 属性验证:要求输入的内容必须是函数
使用属性验证时,需引入 prop-types.js 文件Header.propTypes = {
onSubmit:PropTypes.func
}
- 属性默认值:如果不传参数,默认一个空函数
- 分类展示功能完善
- 15:30 休息一下,喵^_^
- 15:35 来吧,解决这个 npm
- npm
Node Package Manager:Node包(模块)管理器
主要功能管理 node 包,包括:安装 卸载 更新 查看 搜索 发布等
作用类似于:Pc 中的软件管家,安卓市场,Appstore 等软件安装- node 安装
NPM 基于 node.js,所以要先安装 node.js
地址:nodejs.org/en/download/- Window 选择 msi 版本
- Mac 选择 pkg 版本
- 测试
使用命令行工具—> 菜单->运行-> cmd->输入 node,没有报错就成功了 - 命令行基本操作
- pwd(mac) 打印当前工作的目录
- cd 改变目录
- 盘符 d:
- dir/ls(mac)打印当前目录文件
- npm 使用
- 安装文件
官网:https://www.npmjs.com/ - 安装软件的命令:
npm install
,所有安装软件会在node_module 文件夹下(npm 会自动创建)- 本地安装
npm install *
– 安装在当前目录下(以项目为单位),一般安装的是我们当前项目的依赖文件,如 jQuery, bootstrap 等 - 全局安装
npm install * -g
所有项目都可以使用,一般安装的是工具性文件,如webpack,grunt等 - 写法:
npm install name(包名称)
- 简写:
npm i name
- 指定版本:
npm install name@ 版本
- 更新:
npm update name
注意:这里只更新到主版本的最新版本 - 搜索:
npm search name
- 卸载:
npm uninstall name
- 本地安装
- 安装文件
- package.json
用来描述当前项目(包)的信息,该文件的内容是一个 json 格式的数据- “name”:”miaov” //项目名称
- “version”:”2.2.2” //版本
- “dependencies”:{“jquery”:”^2.2.2”} //项目依赖
- “devDependencies”:{“”:””} //工具
- 通过
npm init
可以创建 package.json 文件 - 可以直接在 package.json 文件中自己书写依赖,利用命令 npm install ,会自动读取依赖,下载安装
- node 安装
- npm
- 18:00 下课了
下次课程预告
webpack 自动化打包工具:模块打包, 模块内容预处理,代码分割, 项目构建辅助
react-router:管理视图, 让 UI 和你的 URL 同步
React 课后练习视频
3-子级向父级传递数据:http://2017.miaov.com/v_show/2089
4-利用生命周期完善整个动画:http://2017.miaov.com/v_show/2090
有想一起交流的小伙伴们,可以加我们的 React 技术交流群微信群哦~打开微信扫码入群,和我们一块来学习 React;
妙味 React 微信讨论群
(PS:群人数过多,请加小美微信邀请入群)
相关推荐
>>上海《React+redux 高阶实战周末班》课程记录(一)
>>上海《React+redux 高阶实战周末班》课程记录(二)
广而告之:
Vue 系统修炼与精彩实战-周末班
学习路径始于“初阶” > 迈入 “晋级” > 逐渐 “深入” > 陷于 “沉迷”
- 初阶:Vue 语法从零到熟练;
- 晋级:vue-cli 脚手架创建无痛 webpack 配置目录结构;
- 深入:vue-router 单页应用的前端路由管理利器;
- 沉迷:vuex 集中式应用状态管理器;
详情了解:http://miaov.com/index.php/news/newsDetail/nid/284
妙味(2017 年 12 月底)JavaScript 实体班 - 即将开课
详情了解:http://www.miaov.com/index.php/course/coursedetail/cid/34
课程咨询:
咨询QQ:2852509866
微信咨询:miaov-class
电话咨询:010-57269690
