CaraYQ的博客

组件封装其实就是扩展性和便捷性的权衡，组件写死的部分多了，便捷性提升了，但是扩展性下降了，组件内很多内容依靠父组件传入，那么扩展性增强了，但是便捷性下降了。

目录如何将TS转换为ES6 modules如何将TS转换为ES6 modules在create-react-app中运行的代码，首先通过tsc将.tsc文件转换为.jsx文件（ES6 modules），关于tsc的配置都写在tsconfig.json中，create-react-app有一个默认的tsconfig.json，但这个tsconfig.json和开发环境相关，而我们使用的tsconfig和最后打包模块相关的，所以我们单独新建tsconfig.build.json：{ "compile

目录需求分析使用Axios发送HTTP请求上传文件的基本方式编码实现上传文件基本流程需求分析upload组件的一些样式：一步步来看，点击“点击上传”按钮后，选择你想上传的文件，然后开始自动上传，展示进度条，进度条满了之后会显示图片名称及绿色的标志，鼠标浮在上面会展示×，删除已上传的文件，若上传失败，展示error.jpg及红色的标志上传一个文件的流程如下，点击“点击上传”按钮后，选择你想上传的文件，然后触发beforeUpload(file)函数，然后开始上传（onProgress(event,

目录组件开发的流程：分析组件的属性一个组件由4部分组成：主题代码、样式文件、stories文件、test文件新建src/components/Input/input.tsx文件，import React, {ReactElement, InputHTMLAttributes} from 'react'import {IconProp} from '@fortawesome/fontawesome-svg-core'type InputSize = 'lg' | 'sm'export

目录目前开发的痛点：（1）create-react-app入口文件不适合管理组件库（2）缺少行为追踪和属性调试功能组件完美开发工具应有的特点：（1）分开展示各个组件不同属性下的状态（2）能追踪组件的行为并具有属性调试功能（3）可以为组件自动生成文档和属性列表综上我们选择storybook在项目终端安装storybook：npx -p @storybook/cli sb init启动：npm run storybookstory：一个单独的UI组件的不同状态的集合称之为一个story让

目录解决图标Icon的问题将我们组件的主题颜色添加进fort awesome解决图标Icon的问题前面我们封装的组件都没图标，这一节我们要解决图标问题。iconfont有很多奇怪的bug，比如，如果没加载好会有出现方框svg完全可控，即取即用本文介绍fort awesome，他底层基于SVG实现的图标库安装fort awesome：npm i --save @fortawesome/fortawesome-svg-core// 安装fortawesome核心库npm i --save @

目录需求分析需求分析Menu组件分为横向、纵向，横向/纵向分为有下拉菜单栏的、没有下拉菜单栏的属性为active的菜单栏是高亮的，其余不高亮菜单项是可以被disabled，disabled会展示特殊样式，点击不会响应点击某一菜单项，可能会弹出下拉菜单栏新建src/components/Menu/menu.tsx，代码如下：import React, { FC, useState, createContext, CSSProperties } from 'react'import cl

目录环境配置环境配置确定安装了typescript、create-react-app终端安装：npx create-react-app ts-with-react --typescriptnpx可以避免安装全局模块，可以调用项目内部安装的模块