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

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

本次课程要点

  • 模块化开发
  • webpack构建工具
  • create-react-app 脚手架工具
  • react-router-dom 路由

课程时间线

  • 10:00 开始上课
    • 模块化
      把代码按照一定的功能和规则分成一个个独立的模块,让各模块之间的代码各司其职,互不干扰,又可以通过模块对外暴露的借口进行合作,方便代码的复用以及维护管理
    • 前端代码模块化,容易出现的问题:
      • 命名冲突
      • 文件依赖管理
    • ES5 模块化方案:
      • AMD规范:requireJs - 前置依赖
      • CMD规范:sea.js - 就近依赖
    • ES6 模块化方案:
      • 一个独立的文件就是模块
      • 提供了接口来实现模块的引用和模块数据的导出
        • export 导出数据
          • export var v=100
          • export default 100
        • import 导入
          • import v from “mod” 从 mod 模块中导入默认的 v
          • import {x} from “mod” 从 mod 模块中导入其中一个叫 x 的数据
          • import {x as v} from“mod” 从 mod 模块中导入其中一个叫 x 的数据,并且重命名为 v
          • import * as ns from “mod” 从 mod 模块中导入所有的数据并重命名为 ns
          • import “mod” 导入 mod 模块
    • 浏览器不能直接处理 es6 的模块化语法,需要借助一些工具来实现,我们使用的是当下比较流行的:Webpack – 模块化打包工具
      webpack 会根据 import 和 export 语法分析文件,把需要的依赖文件进行打包处理并生成一个打包后的新文件,项目中实际引入的是打包的文件
    • webpack 安装使用
      • npm install –g webpack 安装 webpack
        • 注意:在指定的位置运行 webpack
        • 在 webpack 命令运行的目录下,创建:webpack.config.js文件,当 webpack、命令执行的时候,会默认调用 webpack 当前运行所在的目录下的这个文件
        • 因为 webpack 基于 node.js,所以这个配置文件也是基于node.js 的
      • webpack.config.js 的配置
        • 通过 module.exports = {} 导出一个对象
        • entry 入口文件
        • output 输出文件
          • path 打包后的文件存放的目录,必须是绝对路径
          • _dirname 返回当前文件所在的绝对路径+‘文件名称’
          • 推荐使用 const path = require(‘path’)
          • const path = require(‘path’)
          • filename 打包后的文件名称
      • 具体配置规则网址如下
      • [webpack配置地址]:https://doc.webpack-china.org/concepts/

11:05 - 11:20 课间休息



12:30 吃饭啦


  • 14:00 热更新
    开启一个本地 web 服务器,自动编译打包,自动刷新
    • 有点:
      • 保留在完全重新加载页面时丢失的应用程序状态
      • 只更新变更内容,以节省宝贵的开发时间
      • 调整样式更加快速,几乎相当于在浏览器调试器中直接更改样式
    • 安装:npm i webpack-dev-server
    • 具体配置: https://github.com/webpack/webpack-dev-server
    • 操作步骤如下:
      • Server.js 代码如下:
        1. <code>
        2. const Webpack = require('webpack');
        3. const WebpackDevServer = require('webpack-dev-server');
        4. const webpackConfig = require('./webpack.config');
        5. const compiler = Webpack( webpackConfig );
        6. const server = new WebpackDevServer(compiler);
        7. server.listen(8888, '0.0.0.0', function () {
        8. console.log('服务器启动成功');
        9. });
        10. </code>
      • 通过 localhost:8888 进行访问
      • 把 index.html 页面的换成 index.js 读取内存中的 js
      • 更改入口文件添加一个:node_moduled/webpack-dev-server/client/index.js?http://localhost:8888
  • create-react-app React 脚手架工具
    脚手架工具,帮助我们创建 react 项目,并自动生成相关的一些配置,维护、调试、打包、项目构建

    • npm i –g create-react-app 安装脚手架
    • create-reate-app name(name:项目名称) 创建项目
    • npm start 运行项目
  • 14:45 react-router-dom 路由
    当应用逐渐庞大、复杂、组件也越来越多,这个时候需要有一种机制来管理和维护我们的应用和组件,使用 url 和组件进行关联对影视一个可行的有效的方式,路由

    • 安装:npm i create-router-dom
    • 使用:
      • import { BrowserRouter } from ‘create-router-dom’
        该组件使用 HTML5 的 history API 来管理视图,使用的时候放置在顶层,BrowserRouter 的 children 是一个单节点
      • import { Route } from ‘create-router-dom’
        Route 组件是路由中最重要的一个组件,通过该组件可以把一个 URl 和一个组件进行绑定
        • path:要匹配的URl,没有 path 属性的时候将匹配任意路由
        • component:要渲染的组件
        • exact:精确匹配
        • strict:严格匹配,考虑路径结尾的/
      • Route props
        • match:当前匹配路由信息对象
        • location:location 对象
        • history:history 对象
      • import { Link } from ‘create-router-dom’
        • to:跳转的路径
          1. -object:{
          2. pathname:’/list’,
          3. search:’ ?a=1’,
          4. hash:’#abc’,
          5. state:{stateValue:’value’}
          6. }
        • replace:是否替换当前记录路径
      • import { NavLink } from ‘create-router-dom’
        • 具有 link 组件的基本属性
        • activeClassName:激活状态下的 class 名称,字符串类型值
        • activeStyle:激活状态下的样式,对象类型值
        • isActive:是否为激活状态,函数类型值,返回 true or false

16:30 休息休息


  • 16:50 继续战斗
    • 路由继续
      • import { Redirect } from ‘create-router-dom’
        • 路由重定向
        • 具有 link 组件基本属性
        • push:是否添加到 history 中
        • from:跳转来源
        • ,可编程路由,render 函数返回对应组件
      • import { Switch } from ‘create-router-dom’
        • 把组件放在 Switch 组件中,当有路由匹配的时候结束后续匹配
      • import { withRouter } from ‘create-router-dom’
        • 如果路由组件包含了其它子组件,那么可以给子组件使用withRouter,子组件就可以跨组件传递三个属性:
          • history
          • match
          • location
        • 接受一个组件作为参数
    • Router 组件:
      • <BrowserRouter />
      • <HashRouter />
      • <MemoryRouter />
      • <NativeRouter />
      • <StaticRouter />
      • 前端常用组件

18:00 回家喽

下次课程预告

  • Redux:管理应用状态,提供可预测的状态管理;

上海《React+redux 高阶实战周末班》课程视频(连载中)

>>5-根据静态文件划分组件
>>6-通过数据完成列表展示
>>7-头部数据添加功能完善
>>8-列表相关操作完善
>>9-footer 组件功能完善(1)
>>10-footer 组件功能完善
(2)
>>11-footer 组件功能完善_(3)

有想一起交流的小伙伴们,可以加我们的 React 技术交流群微信群哦~打开微信扫码入群,和我们一块来学习 React;

妙味 React 微信讨论群

(PS:群人数过多,请加小美微信邀请入群)

妙味 React 讨论群


相关推荐

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

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

妙味公众号