上海《React+redux 高阶实战周末班》课程记录(三)

妙味 React 周末班,学习记录第三弹来啦~不废话,上文档学习吧!(文末有视频彩蛋)

本周课程记录(12 月 9 日)

本次课程要点

  • 利用 React 实现我们的第一个 todoList 程序

  • npm 基本使用

课程时间线

  • 10:00 整喽,老司机开始开车了

    • todoList 练习讲解
      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 结构
    • 组件划分
      1. `<App/>` 主组件
      2. `<Header/>` 头部组件
      3. `<Main/>` 主体组件
      4. `<Footer/>` 底部组件
    • 数据格式分析

      1. data:[
      2. {
      3. id:1,//后期循环要用到的 key 值
      4. title:’这是任务的标题’,
      5. completed:false //控制是否完成
      6. },
      7. {
      8. id:2,
      9. title:’这是任务的标题’,
      10. completed:false
      11. }
      12. ]
    • 展示任务列表功能完善(Main 组件中)

      • 利用 map 循环数据显示
        为了能够在组件之间共享数据,我们通常把数据放置在这些组件的共同父级组件中:App 组件
      • 父 -> 子:通过属性 props
      • 子 -> 父:通过父级传入子级的事件回调

11:05 是时候来一支黄鹤楼 放飞一下自我了


  • 11:20 开始完善添加添加数据的功能
    • 添加一条新的数据 onKeyDown,按下回车(keycode=13),把新的数据通过事件传递给父组件 App,统一修改,可以利用 push 或者扩展运算符
      养成好习惯,所有的数据操作都由父级去完成,子级只读取,如果子级需要对数据进行修改,需要利用事件回调通知父级进行操作
    • 添加是否完成的状态
      • 利用受控组件 checkbox 完成,在 onChange 事件,修改数据中的对应项的 completed—>同步状态—>重新渲染 DOM
        在项目中养成习惯,修改数据,然后通过数据去更新状态
    • 删除单条数据
      • 点击按钮时,调用 App 组件中传入的事件回调,传入当前是第几条数据
      • 利用 filter 过滤掉该条数据—> 同步状态 —> 重新渲染 DOM
    • 全选功能实现
      • 依然利用受控组件 checkbox,onChange 时,修改数据中所有项的 completed,然后进行同步
    • 统计未完成的条数
      • 循环累计 completed 为 false 项的结果,可以利用 filter,然后拿到用数组的 length
    • 清除已完成
      • 过滤掉数据中所有 completed 为 true 的项,然后进行同步

12:20 吃饭饭去


  • 14:00 精神抖擞 我们继续撸码
    • 分类展示功能完善
      • 全部列表,未完成列表,已完成列表,添加 onClick 事件,通过事件回调,同步显示数据
    • 编辑输入框内容
      • 双击的时候,出现输入框可以进行编辑,隐藏文本展示框
      • <Main /> 组件的 componentDidUpdate 周期中,每次组件更新之后通过 refs 获取到 ul 下所有输入框,态判断编辑状态的数组中某一项是是编辑状态时,对应的 input 加 focus 焦点
      • input onblur 时 判断是否更新该条信息
      • 调用 <App /> 传入的事件回调 更新数据 —> 同步
    • 附加功能说明
      • 属性默认值:如果不传参数,默认一个空函数
        1. Header.defaultProps = {
        2. onSubmit:function(){}
        3. }
      • 属性验证:要求输入的内容必须是函数
        1. Header.propTypes = {
        2. onSubmit:PropTypes.func
        3. }
        使用属性验证时,需引入 prop-types.js 文件

  • 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 ,会自动读取依赖,下载安装
  • 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 讨论群


相关推荐

>>上海《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

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

25647892 25647892

25647892

010-57658918

在线微信客服
客服1
客服在线时间

周一至周六上午:9:00~12:00

下午:13:30~18:00

妙味公众号