上海《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 课间休息

利用 npm+webpack 配置 React 环境
- npm i react react-dom 下载 react 和 react-dom
- 在文件中通过 import React from ’react’ 和 import ReactDom from ‘react-dom’引入
- 注意 webpack 并不识别 jsx 的语法，我们需要引入相应的 loader
loader 加载器
Loader 是 webpack 中用于处理任务的核心内容，他是一个文件内容预处理器
- 安装：
  - npm install babel babel-loader babel-core babel-preset-env
  - npm install babel-preset-react
- 配置参数:
  - module- 用于处理 loader，配置各种不同文件的 loader
  - rules，一个规则就是一个对象
  - test，处理文件的类型
  - exclude，不处理的文件
  - use，当碰到符合 test 规则的用以下规则处理
- 具体配置如下:
  - https://doc.webpack-china.org/loaders/babel-loader/
  - https://babeljs.cn/docs/plugins/preset-react/
- css-loader
  - 用于解析 css 文件，用 import 加载，并返回 css 代码
  - 具体配置：https://doc.webpack-china.org/loaders/css-loader/
- style-loader
  - 用于渲染 css，将模块的导出作为样式添加到 DOM 中
  - 具体配置：https://doc.webpack-china.org/loaders/style-loader/
- file-loader
  - 生成文件到指定目录，并根据配置返回访问路径
  - 默认生成新的文件的名称为源文件的 MD5 值
  - 具体配置：https://doc.webpack-china.org/loaders/file-loader
- url-loader
  - 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
  - 具体配置：https://doc.webpack-china.org/loaders/url-loader
插件 plugins
和 loader 类似，也是对打包的内容进行处理，但是和 loader 不一样的地方
- Loader：打包之前处理
- Plugins：打包之后处理
- 具体插件类型：https://doc.webpack-china.org/plugins/
- 举个栗子：UglifyjsWebpackPlugin
  - 用途：压缩文件
  - 命令：npm i -D uglifyjs-webpack-plugin
  - 具体参数：https://doc.webpack-china.org/plugins/uglifyjs-webpack-plugin/
  - 更多的第三方 loader：https://github.com/webpack-contrib/awesome-webpack#loaders

12:30 吃饭啦

14:00 热更新
开启一个本地 web 服务器，自动编译打包，自动刷新
- 有点：
  - 保留在完全重新加载页面时丢失的应用程序状态
  - 只更新变更内容，以节省宝贵的开发时间
  - 调整样式更加快速，几乎相当于在浏览器调试器中直接更改样式
- 安装：npm i webpack-dev-server
- 具体配置: https://github.com/webpack/webpack-dev-server
- 操作步骤如下:
  - Server.js 代码如下:
```
  <code>
  const Webpack = require('webpack');
  const WebpackDevServer = require('webpack-dev-server');
  const webpackConfig = require('./webpack.config');
  const compiler = Webpack( webpackConfig );
  const server = new WebpackDevServer(compiler);
  server.listen(8888, '0.0.0.0', function () {
       console.log('服务器启动成功');
  });
  </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：跳转的路径
```
-object:{
pathname:’/list’,
search:’ ?a=1’,
hash:’#abc’,
state:{stateValue:’value’}
}
```
    - 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 />
  - 前端常用组件和