qq_43592084的博客

  在我们平常写代码的时候，如果找到一种技术的编写套路，就会使许多很绕的脑力工作变成一些复制粘贴的简单体力工作，但这种复制粘贴的工作不但浪费我们的编码时间，在有些时候还会因为一些名字的错误让出现一些奇怪的bug。  所以今天，我来分享一下我在编写react UI 组件时摸出的编写套路，当然呢，这个套路是基于hygen模板生成器的，有了这个套路，组件编写效率刷刷提升，是真的“有手就行”。文章目录一、安装并初始化hygen1. 安装2. 初始化3. 创建component模板编写模板文件新建index.js

查看你目前项目中的React版本，如果版本是v17.x以上的，请将React的版本降低到v17以下，因为新更新的v17版本（）会在一定程度上破坏UI。具体操作打开项目根目录中的package.json文件，找到dependencies中的react字段，将版本改为16.13.1，如图：打开控制台，进入项目根目录，输入以下命令重新安装React，这里推荐使用yarn命令，因为Yarn 会在代码执行之前通过算法校验每个安装包的完整性。yarn install该命令执行完毕后重新启动项目，就能看

安装在项目文件根目录下启动控制台，输入以下命令注：此安装过程很漫长，请耐心等待npx -p @storybook/cli sb init此命令会自动帮我们配置好项目，同时生成一个示例文件启动storybook控制台项目根目录输入npm run storybook...