本周课程记录(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 模块
- export 导出数据
- 浏览器不能直接处理 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 规则的用以下规则处理
- 具体配置如下:
- 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
- Server.js 代码如下:
- 有点:
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:是否替换当前记录路径
- to:跳转的路径
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
- 接受一个组件作为参数
- 如果路由组件包含了其它子组件,那么可以给子组件使用withRouter,子组件就可以跨组件传递三个属性:
- 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+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
