前置知识

tsx和jsx简单理解：
tsx是 支持标签的ts
jsx是 支持标签的js（常用、强大）

image.png

目录结构：
image.png

CSS之 normalize 和 CSS之 reset区别：
normalize是普通化，作用是保证页面在不同浏览器上默认样式相近
reset是重置
一般是先让样式普通化再重置样式

css in js 方案 之 styled-components使用

模板字符串标签 + 样式组合，且再也不用写类名了

单纯安装styled-components包，再安装该包对应的ts支持文件，一般是在其包前加 @types/
如yarn add -dev @types/styled-components

项目实战

项目搭建-起步

react router初体验

Router 有两种模式：history 和 hash
如果没有后台服务器，就只能使用hash
此项目部署前可以开启web服务器，但部署后没有后台服务器故使用hash模式

react暴露webpack配置

背景：react关于webpack 的 配置默认是隐藏的，需要使用eject暴露react 关于 webpack 的各种配置，以便拓展 webpack 配置
注意：使用eject之前需要先git commit 一下
使用 CRA 创建完项目以后，项目在package.json里面提供了这样一个命令：

  1. {
  2.   ...
  3.   "scripts": {
  4.     "eject": "react-scripts eject"
  5.   },
  6.   ...
  7. }

执行完这个命令——yarn run eject
执行完后会将封装在 CRA 中的配置全部反编译到当前项目，生成config文件夹，这样用户就可以完全取得 webpack 文件的控制权

  1. # eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置
  2. config
  3. ├── env.js
  4. ├── jest
  5. │   ├── cssTransform.js
  6. │   └── fileTransform.js
  7. ├── paths.js
  8. ├── polyfills.js
  9. ├── webpack.config.dev.js // 开发环境配置
  10. ├── webpack.config.prod.js // 生产环境配置
  11. └── webpackDevServer.config.js

此外，根目录下还会生成script文件夹，一般不做改动，主要是改动config文件夹中的webpack配置文件

使用SVG sprite loader配置svg文件

在react项目中使用svg图标的方式：
方法一：svg图标当图片image使用
在react项目里使用svg图标，最原始的方法是把图标当作图片使用，但是用img标签的形式的使用有一些限制。比如图标的颜色很难改变，图片缩放比例不保真（不推荐）

方法二：svg Symbol + 下载到本地 + webpack配置，引入loader加载svg（√）
若要支持svg在浏览器正常显示且可自定义配置，则需要使用webpack配置svg，此项目使用svg sprite loader和svgo loader两个加载器

  • svgo loader是优化svg图标的（如删除掉默认自带的多余的fill）
  • svg sprite loader是加载渲染svg图标的（负责将所有引入的svg变成symbol标签，再外层包裹svg标签，然后将svg标签放在body下）

使用：

  1. <svg className="chart" fill='red'>  // 可再自定义添加样式
  2.    <use xlinkHref='#chart'/>  //   #后加svg文件名
  3. </svg>

方法三：svg symbol 在线引用链接
在线引用图标资源

方法四：svg symbol + 引用链接 + 文件拷贝到本地
可以直接拷贝js链接的文件内容到本地文件，直接在全局样式中引用该文件

防止TreeShaking

Tree Shaking中文含义是摇树，在webpack中指的是打包时把无用的代码摇掉，以优化打包结果
webpack5 自带了这个功能，当打包环境为production时，默认开启tree-shaking功能
为了防止需要的代码被 shaking，可以使用 require 引入

SVG图标封装为icon组件

如何require一整个目录

应用场景：
在引入时重复require多个SVG比较麻烦，可以一次性直接引入整个目录的 SVG，可以这样做：

  1. const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  3. try {
  4.     importAll(require.context('.../icons目录', true, /\.svg$/));
  5. } catch (error) {
  6.     console.log(error);
  7. }

require.context的使用
如果require参数含有表达式，会创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入
可以使用 require.context() 方法来创建自己的（模块）上下文，这个方法有 3 个参数：

  • 要搜索的文件夹目录
  • 是否还应该搜索它的子目录，
  • 以及一个匹配文件的正则表达式

解决：找不到__WebpackModuleApi
安装：yarn add --dev @types/webpack-env就可以解决