Concis组件库
文章平均质量分 73
一套自研React UI库
sorryhc
全栈爱好者,专注于React、Node、Midway方向
展开
-
关于我给dumi2.0提pr的完整记录
博主最近一年时间在工作业余都在写开源组件库concis,其中文档站点生成框架采取了dumi,前几天不久dumi2.0正式发布,博主也是顺势而为直接把项目升级(dumi1->dumi2)由于dumi2的站点设计比原来好看太多了,这是最吸引我的一点,附图:不过在升级过程中还是踩了不少坑的,如果你也在使用dumi而concis因为自定义了很多站点样式,因此为了不进行破坏性的升级,直接是通过链接中"拷贝源代码"的方式去迁移的,原concis。原创 2022-11-25 00:53:42 · 930 阅读 · 0 评论 -
手写一个埋点SDK吧~
至此,Track组件写完了,业务方可以结合Track组件在需要上报的时机进行数据收集,这其实是concis给业务端做出的收集层的便捷,由于上报的业务场景太多,本来是想在组件内部一起做完的,最后还是决定组件层只做数据收集,分析和上报留给业务方。如果你对concis组件库感兴趣,欢迎点个star支持一下我们~Github官方文档。原创 2022-11-13 00:00:49 · 969 阅读 · 2 评论 -
谈谈前端工程化
看过博主最近半年文章的小伙伴都知道,博主都在投入于一个开源项目——concis react组件库。这篇文章博主想从一个组件库项目的角度,谈一谈自己对于前端工程化的理解和实践。原创 2022-10-17 21:55:48 · 1833 阅读 · 6 评论 -
React组件库Concis | 组件突破50+,移动端concis起步,新增英语文档,持续更新中...
其实博主之前也是一名github非活跃用户,自从有了写组件库的想法以后对开源的那种分享创作心情越来越狂热。希望社区的小伙伴有兴趣的可以通过github的issue给我留言,我会主动并积极联系。如果觉得这个仓库还不错,可以给我一个star或是告诉自己的朋友,我需要它让更多人看见。虔诚做事,心怀感恩。原创 2022-10-13 15:31:52 · 300 阅读 · 0 评论 -
cimi——全自动发布NPM包的工具
博主最近的时间一直投入concis组件库的开发工作,每次改完bug或者是新增完一些组件功能后都需要去发包、更新线上文档,这样一步步下来其实是比较麻烦的。手动修改中的version.git add .、生成一个提交.推送到远端.在github中打一个新tag.将代码提交到NPM.是不是很麻烦?这就是cimi的由来。cimi是博主最近开始做的一个轮子,目前功能简单,也会在实际项目中获取新的灵感,代入到cimi中,也是欢迎大家体验。最后,希望大家可以给concis和cimi。原创 2022-09-05 22:33:22 · 772 阅读 · 2 评论 -
React组件库设计 | 关于我一边写Concis一边给字节组件库arco design提pr的分享
看过我最近的一些文章的小伙伴应该都知道,博主最近半年时间一直在写自己的React组件库Concis,其实这也是从造轮子 -> 学习的目的去做这件事的,博主很多时间的屏幕都是这样的:或者是这样:是的,这很真实,因为写组件库单单从业务需求来说,就需要去参考,因此避免不了长时间翻阅的官方文档,去看组件提供的api能力和一些demo因此,博主一边开发Concis,一边给贡献的旅程就开始了。...原创 2022-08-08 18:21:08 · 882 阅读 · 2 评论 -
Concis组件库 | 暗黑模式设计
自上文发布以来,作者收到了很多的私信,也很高兴。组件库设计|React组件库Concis开源探索过程中的一些心路历程大致内容有都是对作者的鼓励,心中十分感激,同时Concis收到了很多的pr,贡献者也突破了5个…至少作者不会写着写着突然有一种迷迷糊糊很迷茫的感觉了,这点非常开心。作者不断的在思考下一步Concis该做些什么,简单参考了一些成功的项目,最终花了三天时间做了暗黑模式。...原创 2022-07-22 00:32:38 · 492 阅读 · 3 评论 -
组件库设计 | React组件库Concis开源探索过程中的一些心路历程
React组件库Concis作者半年开源之路的一些总结分享原创 2022-07-19 05:00:48 · 517 阅读 · 4 评论 -
组件库设计 | 让你的React组件获得代码补全和属性提示功能
从0到1开发一个vscode插件的全过程,结合博主自身组件库项目案例带来详细讲解。原创 2022-07-19 04:03:15 · 1449 阅读 · 0 评论 -
基于Vue源码中e2e测试实践
基于尤雨溪在Vue中的e2e测试方法,在Concis组件库中实践。原创 2022-07-17 03:25:26 · 889 阅读 · 3 评论 -
基于lerna重构Concis组件库
博主最近在开发React组件库——Concis,目前针对PC端已经开发了30+组件,未来是期望可以转换出一套轻量的Mobile组件来支持React移动端项目,而博主原来的项目结构是这样的:其实这只是一个普通项目,在src中包含了一系列支持PC的React组件,而既然想要扩充,不妨使用lerna将多个子项目整合在一个大项目中。在本地全局安装lerna安装完成后执行 看下是否能够正确的输出 的版本号。接下来进入到Concis中,在项目根目录初始化初始化之后会发现项目根目录多了目录和接下来在packag原创 2022-07-13 02:24:41 · 596 阅读 · 2 评论 -
React组件库Concis,寻求社区有兴趣的小伙伴加入...
对于不熟悉这个项目的小伙伴们做个简单的介绍,Concis是一个基于React+TypeScript开发的一款轻量级组件库,全面拥抱React生态,支持React新特性(hooks/redux)追求轻量的组件体积,简单的使用方式,最小的思维负担。Github官方文档通过github的commit记录可以知道,其实从Concis init commit到现在,只有博主一己之力在进行迭代开发,并且都是利用工作之外的时间去维护和开发这个仓库。其实目前Concis如下还有很多的地方可以完善,博主希望可以在社区中找到原创 2022-07-12 17:23:05 · 672 阅读 · 10 评论 -
五分钟告诉你React全局配置项目主题色是怎么实现的
博主最近在自研Concis组件库,全局配置项目主题色的大体意思其实和antd一样,可以通过一款色系来全局配置Concis中所有组件的主题色,比如Concis默认的色系是蓝色(#1890FF),如果公司业务的主题色是绿色、黄色,一个个去给单独组件加样式是很麻烦的,因此就有了需求的来源,效果图是这样的:抛开Concis不谈,单从create-react-app来讲,其实思路很简单,在入口组件为它再包裹上一层createContext hook,把我们所需要定制的主题色向下传给所有子组件,在子组件中做一些兼容性处原创 2022-07-12 03:46:39 · 1900 阅读 · 4 评论 -
React从0到1封装一个Form表单
博主最近在做组件库封装开发的工作,Form表单比较复杂,包含非受控表单和受控表单,特此记录一下。封装好的Form表单涵盖了布局、非受控、受控、校验、重置等功能。首先我们先做一个架子,也就是简单的非受控表单,也就是生成基础布局,不做表单内容(状态)的处理,我是一共写了两个组件,分别为Form和Form.Item,基本的使用代码是这样的:效果是这样的:其实props也很好分了,Form的props用来做整体的一些控制,如这里的layout就是布局,以及style整体样式;Form.Item的props则对单行原创 2022-07-09 04:20:39 · 1296 阅读 · 4 评论 -
Concis组件库整体内容更新~
React-View-UI组件库介绍原创 2022-07-06 01:46:38 · 500 阅读 · 0 评论 -
Concis组件库封装—— Notification通知提醒框
React通知提醒框组件封装原创 2022-07-05 03:25:22 · 765 阅读 · 0 评论 -
Concis组件库封装——Button
Button 按钮使用以及文档如图:封装代码如下:import React, { useEffect, useMemo, FC, memo } from 'react';import './index.module.less';interface ButtonProps { //自定义button接口 /** * @description 按钮主题 * @default primary */ type?: String; /** * @descri原创 2022-03-31 04:33:12 · 2183 阅读 · 0 评论 -
react+dumi+typescript搭建个人组件库Concis
dumi为我们创建个人组件库提供了很好的平台,开箱即用,可以把专注度放在组件业务部分的编写上。搭建步骤:1.创建文件夹并初始化脚手架mkdir my-appcd my-app$ npx @umijs/create-dumi-lib # 初始化一个文档模式的组件库开发脚手架# or$ yarn create @umijs/dumi-lib$ npx @umijs/create-dumi-lib --site # 初始化一个站点模式的组件库开发脚手架# or$ yarn cr原创 2022-03-26 02:31:13 · 2525 阅读 · 2 评论 -
Concis组件库封装——Layout自适应布局
Layout 快速布局快速成型常见网页布局组件库文档如图:封装代码如下:Layout.tsximport React, { useMemo, memo, FC } from 'react'import style from './index.module.less'interface layoutProps { children?: any /** * @description 自定义样式 * @default {} */ extraStyle原创 2022-03-31 04:42:08 · 2460 阅读 · 3 评论 -
Concis组件库封装——Divider分割线
Divider 分割线组件库文档图片如下:封装代码如下:import React, { FC, useMemo, memo } from 'react';import './index.module.less';interface dividerProps { /** * @description 字体大小 */ fontSize?: Number; /** * @description 分割线颜色 * @default #cccccc */原创 2022-03-31 04:36:55 · 2118 阅读 · 0 评论 -
Concis组件库封装——Pagination分页器
分页器组件,文档页面如下:组件封装代码如下:import React, { useState, useEffect, FC, useMemo, memo } from 'react';import { EllipsisOutlined, LeftOutlined, RightOutlined, DownOutlined } from '@ant-design/icons';import { Select } from '..';import style from './index.module原创 2022-04-01 02:00:37 · 1555 阅读 · 0 评论 -
Concis组件库封装——Input输入框
输入框组件文档如下:源代码如下:import React, { FC, useState, useMemo, memo } from 'react';import { CloseOutlined, EyeOutlined, UpOutlined, DownOutlined } from '@ant-design/icons';import style from './index.module.less';interface InputProps { /** * @descript原创 2022-04-17 20:36:15 · 2057 阅读 · 0 评论 -
Concis组件库封装——LazyLoad懒加载
懒加载组件,支持任意元素进行延迟加载,可以在SPA单页应用首页渲染时减少非可视区的DOM渲染,加快首屏渲染效率,大致用法:<LazyLoad> <div> <span>需要被懒加载的一些元素</span> ....... </div></LazyLoad>这一期的文档比较简单,主要就是支持懒加载包裹元素,没有很多的API,如下:............原创 2022-05-01 00:51:35 · 1368 阅读 · 1 评论 -
Concis组件库封装——Select选择器
选择器组件,文档如下:组件封装代码如下:import React, { FC, useMemo, createRef, useEffect, useState, useCallback, memo } from 'react';import { DownOutlined, LoadingOutlined, CloseOutlined } from '@ant-design/icons';import style from './index.module.less';interface Op原创 2022-04-13 02:08:38 · 1387 阅读 · 0 评论 -
Concis组件库封装——Tree选择器
Tree选择器结构比较特殊,类似于数据结构中的树,因此设计对于优化有很多的关系。先看一下组件库文档:设计中主要用到的思路是递归,先看一下基础渲染吧:const treeData = [ { title: 'parent1', value: '0-0', children: [ { title: 'parent 1-0', value: '0-0-1', }, { title: 'par原创 2022-05-27 03:29:54 · 1415 阅读 · 0 评论 -
rollup从0到1将react组件库打包发布npm
前段时间一直在更新react组件库的每一个组件,今天来测试一下在实际业务中使用组件库~我使用了rollup来打包组件库1.搭建库打包脚手架:首先我们安装一下rollup:npm i rollup -g我的组件库项目目录是这样的,所有组件都在index.ts中暴露出去代码写好以后,最基础的rollup.config.js版本可以这样配置:// rollup.config.jsexport default { input: 'src/index.ts', output: {原创 2022-04-24 00:46:19 · 3274 阅读 · 3 评论 -
Concis组件库封装——Menu导航菜单
Menu菜单是提供给网站的路由跳转主菜单(通常),组件文档如图所示:组件源码如下:import React, { FC, useState, useEffect, memo, useCallback, useMemo } from 'react';import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons';import style from './index.module.less';interface Men原创 2022-04-21 02:36:49 · 2305 阅读 · 2 评论 -
Concis组件库封装——Rate评分
Rate评分组件官方文档如下:源码如下:import React, { FC, useState, useEffect, memo, useCallback } from 'react';import loadsh from 'loadsh';import './index.module.less';interface rateProps { /** * @description 星星个数 * @default 5 */ num?: number; /**原创 2022-05-26 04:12:41 · 1386 阅读 · 0 评论 -
Concis组件库封装——TreeView树形控件
上一篇文章实现了Tree选择器,本文将介绍TreeView树形控件的实现。其实在笔者进行TreeData的配置项,原本一直在纠结于树结构的递归,进行封装,但仔细想想,其实可以把他改造成一个双向链表,每个节点在children的基础上(子节点),加入prev(父节点),并且当前节点和prev指向同一个内存地址,进行更快速的中间查询和修改,所以树形控件其实是设计了一个链表的数据结构,如图:在组件内部进行二次封装Tree结构,变成了这样:对于二次封装,多了prev这一部分,具体的实现如图所示:Tr原创 2022-05-30 03:09:59 · 1605 阅读 · 3 评论 -
Concis组件库封装——DatePicker日期选择器
DatePicker时间选择器的设计文档如下:主体分为了单日选择器和时间区间选择器~单日选择器:时间区间选择器:组件的源码如下:DatePicker.tsx:import React, { FC, memo, useState, useEffect, useCallback } from 'react'import RangeDatePicker from './rangeDatePicker'import { FieldTimeOutlined, CloseOutlined, Che原创 2022-04-26 23:49:29 · 2015 阅读 · 0 评论 -
Concis组件库封装——Radio 单选框
Radio组件的封装一共封装了两个组件——RadioGroup和Radio,RadioGroup为父组件,主要用于控制单选组的状态,而Radio作为一个个选项使用。RadioGroup.tsx:import React, { FC, useState, useEffect, memo, useCallback } from 'react';import Input from '@/Input';import style from './index.module.less';interface原创 2022-04-19 01:25:07 · 1974 阅读 · 0 评论 -
Concis组件库封装——Steps步骤条
前些时间有点忙…也是没来得及更新组件库,今天写了一个PC/Mobile兼容的步骤条组件,组件文档如下:这个主要是一个UI组件,在业务中用的比较多的,源码如下:Steps外层组件:import React, { FC, memo, useEffect, useCallback } from 'react';import { CheckOutlined } from '@ant-design/icons';import './index.module.less';interface stepsP原创 2022-05-24 14:04:05 · 1774 阅读 · 1 评论 -
Concis组件库封装——CheckBox多选框/多选组
很高兴今天看了下npm的数据,周下载量竟然有700+,也是很感谢不论是使用和学习都是对我的一种支持…贴一下npm的地址~ https://www.npmjs.com/package/react-view-ui多选框的组件文档如下:组件源码如下:import React, { FC, memo, ReactNode, useState, useCallback, useMemo, Fragment } from 'react'import { CheckOutlined } from '@an原创 2022-05-31 01:45:03 · 1512 阅读 · 0 评论 -
前端埋点实现
组件库的链接在这里主要思路还是采用的代码埋点,在每个组件的页面挂载的时候注入埋点,进行数据收集、最后提交给后端来进行长保存。1. 实现自定义hook,监测组件代码如下:usePageListener hook主要有两个阶段:2. 收集数据我这里主要收集了两类数据,个人相关信息的收集函数getUserIp如下:这里是借助了搜狐的第三方接口来获取用户的IP地址和所在城市。浏览器原生的数据方法getNativeBrowserInfo如下:这里是收集了设备、运行环境以及页面加载内存性能相关的数据,也是可以原创 2022-06-14 02:23:01 · 5783 阅读 · 5 评论 -
Concis组件库封装——Popover气泡卡片
气泡卡片…顾名思义,移动到或点击某块区域,出现一个气泡卡片dialog,组件库文档如下:主要支持的有移动或点击触发,以及不同方向的气泡卡片,并提供了气泡卡片宽度,内容为调用端的DOM,样式也在调用端所控制。API能力如下:源码如下:React-View-UI组件库文档:http://react-view-ui.com:92/#/common/popovergithub~:https://github.com/fengxinhhh/React-View-UI-fsnpm:https://www原创 2022-06-04 01:08:54 · 1811 阅读 · 3 评论 -
Concis组件库封装——List列表
列表组件的封装其实和Table有一定的相似,都是数据一列一列展示,因此列表组件也用到了懒加载和虚拟列表对大数据量时提供了解决方案。组件库文档:List.tsx:Item.tsx:最后留一下React-View-UI组件库线上地址吧~React-View-UI组件库线上链接:http://react-view-ui.com:92/#/github:https://github.com/fengxinhhh/React-View-UI-fsnpm:https://www.npmjs.com/pack原创 2022-06-18 03:22:54 · 1572 阅读 · 0 评论 -
Concis组件库封装——Badge徽标
先看一下组件库的文档吧~组件的API能力如下:组件的源码如下:基本props中都是来配置徽标显示的,比如文本徽标、数字徽标、最大值配置这些的。最后留一下React-View-UI组件库线上地址吧~React-View-UI组件库线上链接:http://react-view-ui.com:92/#/github:https://github.com/fengxinhhh/React-View-UI-fsnpm:https://www.npmjs.com/package/react-view-ui开源不原创 2022-06-16 02:08:23 · 2340 阅读 · 0 评论 -
Concis组件库封装——Message 全局提示
封装一个React消息提示组件。原创 2022-06-30 23:50:12 · 1154 阅读 · 4 评论 -
全网最细:Jest+Enzyme测试React组件(包含交互、DOM、样式测试)
Jest是目前前端工程化下单元测试火热的技术栈,而Enzyme的支持提供了Jest测试React业务、组件的能力,下面来介绍一下React组件测试的一些实际场景。2. 测试环境搭建由于enzyme的配置在每次需要测试组件时都需要加入,因此配置setup.js后在每次测试组件中提前引入是不错的选择。setup.js:jest.config.js配置:3. 组件基础渲染测试在为组件添加prop传值之前,可配置一个基础的 mountTest.tsx 来对组件进行一个基础渲染挂载测试,测试通过后在进行复杂原创 2022-06-20 03:35:29 · 3360 阅读 · 0 评论 -
Concis组件库封装——Table表格
React-View-UI表格组件提供了展开行、单选、多选、排序以及对大数据的处理方案,有虚拟列表、懒加载、分页,官方文档如下:所提供的API能力如下:虚拟列表主要使用了固定列高(15条数据 * 每条高度)+ 总列高(总数据 * 每条高度),在总高度滚动时根据滚动值不断改变显示的数据,而不改变DOM。懒加载则是滚到底了,继续加载一部分数据。分页比较常规,就不说了。具体源码如下:React-View-UI组件库线上链接:http://react-view-ui.com:92/#/common/原创 2022-06-11 01:25:18 · 1425 阅读 · 0 评论