如何开发react组件库

如何开发react组件库

技术栈:React + Webpack + TypeScript + Docz

先上脚手架目录结构

docz:docz文档生成器的配置目录

example:demo目录

lib:打包后生成文件目录

scripts:执行脚本目录

src:测试、组件、文档目录

注意:本脚手架只是基本配置,内部代码比较简洁,主要是起到一个学习引导作用。

组件开发过程中没什么技术难点,主要是样式处理。 全局default.less样式处理借鉴了antd,将常用的样式用变量存储,方便后续主题设置

@wui-prefix: wui;
 
@primary-color: red;
@info-color: #3bb4f2;
@success-color: #5eb95e;
@danger-color: #dd514c;
@warning-color: #f37b1d;
@white: #fff;
@black: #000;
 
@alert-info-bg-color: @info-color;
@alert-success-bg-color: @success-color;
@alert-warning-bg-color: @warning-color;
@alert-danger-bg-color: @danger-color;

mixins/alert.less混合用函数注入变量

.var-alert(@background-color, @border-corlor, @text-color) {
  border: 1px solid @border-corlor;
  background-color: @background-color;
  color: @text-color;
}

然后组件components/alert/index.less中直接引入即可

@import '../style/default.less';
@import '../style/mixins/alert.less';
 
@alert-prefix-cls: ~'@{wui-prefix}-alert';
 
.@{alert-prefix-cls} {
  position: relative;
  padding: 8px 16px;
  margin-bottom: 10px;
 
  &-info {
    .var-alert(@alert-info-bg-color, @alert-info-bg-color, @white);
  }
 
  &-success {
    .var-alert(@alert-success-bg-color, @alert-success-bg-color, @white);
  }
 
  &-warning {
    .var-alert(@alert-warning-bg-color, @alert-warning-bg-color, @white);
  }
 
  &-danger {
    .var-alert(@alert-danger-bg-color, @alert-danger-bg-color, @white);
  }
}

构建过程中,less 文件无需转换为css文件,只需通过脚本遍历文件夹同步到对应目录下即可,build-less.js代码:

const readFiles = async (filePath, name, callback) => {
  const files = fs.readdirSync(filePath)
  files.forEach(file => {
    const filedir = path.join(filePath, file)
    fs.stat(filedir, (error, stats) => {
      if (error) {
        return console.error('stats error:', error)
      }
      if (stats.isFile() && filedir.indexOf(name) > -1) {
        callback && callback(filedir)
      } else if (stats.isDirectory()) {
        readFiles(filedir, name, callback)
      }
    })
  })
}
 
 
const componentsPath = 'src/components'
readFiles(
  path.join(__dirname, '../', componentsPath),
  '.less',
  (file, error) => {
    if (error) {
      return console.error('read files error:', error)
    }
    fs.outputFileSync(
      file.replace(componentsPath, 'lib'),
      fs.readFileSync(file)
    )
  }
)

文档界面:

贴一段Alert组件简易代码

import React, { Component } from 'react'
import classNames from 'classnames'
import { getPrefix } from '../util/method'
import './index.less'
 
interface AlertProps {
  type?: 'success' | 'error' | 'warn' | 'info'
  message: React.ReactNode
  className?: string
}
 
export default class Alert extends Component<AlertProps> {
  render() {
    const { type = 'info' } = this.props
    const prefix = getPrefix('alert')
    const className = classNames(prefix, `${prefix}-${type}`)
    return <div className={className}>{this.props.message}</div>
  }
}

在本地开发及测试完组件后需要发布到仓库测试,不建议发布到npm官方仓库中,因为毕竟是半成品,可以使用verdaccio在本地搭建一个私有仓库进行测试

Image placeholder
前端答疑
未设置
  95人点赞

没有讨论,发表一下自己的看法吧

推荐文章
如何引入react组件库

如何引入react组件库1、通过npm安装antd推荐(Node.js教程)antd是基于AntDesign设计体系的ReactUI组件库,主要用于研发企业级中后台产品。npminstall-Dant

用vscode开发react用哪些插件

用vscode开发react用哪些插件1.代码提示类插件1.1Reactjscodesnippets1.2ReactReduxES6Snippets1.3React-Native/React/Redu

如何写react组件

如何写react组件组件作为React的核心内容,是View的重要组成部分,每一个View页面都由一个或多个组件构成,可以说组件是React应用程序的基石元素。React支持三种方式来定义组件●函数式

如何将样式加入到react组件上

如何将样式加入到react组件上一、使用行内样式想给虚拟dom添加行内样式,需要使用表达式传入样式对象的方式来实现://注意这里的两个括号,第一个表示我们在要JSX里插入JS了,第二个是对象的括号 H

如何封装一个react组件

如何封装一个react组件1、对于reactscript,官方建议我们用JSX(javascriptxml)语法糖,需要引入额外的解析文件去解析。2、render方法:用于给dom元素插入渲染类dom

怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

怎么创建react组件

怎么创建react组件创建react组件有3种方式,分别是无状态函数式组建、es5原生方式、继承React.Component(ES6形式)。一、无状态函数式组建无状态函数式组件,也就是你无法使用St

什么是react组件

什么是react组件组件就是页面上的一部分。我们可以把一个大的网页拆分成很多小的部分。比如标题部分,对应一个组件,就是标题组件。搜索部分,对应的组件就是搜索组件。页面上很多区域也可以拆分成组件,所以页

开源React Native组件库beeshell 2.0发布

2018年,我们开源了ReactNative组件库——beeshell1.0。时隔一年,我们对ReactNative组件库继续优化,实现beeshell2.0升级,开源38个功能。希望更好的服务社区,

《如何开发区块链底层平台》

摘要:2019年11月26日,同济创业谷与PPIOCodeTalks联合举办了《创新X-区块链与创新创业》区块链技术分享会。在本次分享会中,我们有幸邀请到了四位重量级嘉宾来做主题分享。在本期文章中,我

职业规划指南:如何开启你的ML/AI 职业生涯?

无论什么行业,只有不断自我进步的人才有可能保持行业领先地位。技术行业面临着时代变迁的时候更应该如此。随着技术和相关业务的发展,在该领域工作的人必须在必要时更新技能甚至转变职业。在人工智能(AI)机器学

使用$emit传参:如何同时接收父组件和子组件的参数?

需求描述:组件内部发射事件并且有参数传递出来,然后监听该事件时,事件处理程序又同时需要获取组件外面传进来的参数举个例子:tag-input组件监听change事件 methods:{ ...,

分享一款支持多种短信服务商 Hyperf 组件,基于 overtrue/easy-sms 组件改造

一款支持多种短信服务商Hyperf组件1.新增配置文件phpbin/hyperf.phpvendor:publishhyperf-libraries/sms2.修改配置

react中如何使用组件

react中如何使用组件前文我们介绍过了《如何写react组件》(感兴趣的同学可以过去学习),下面我们来说一下如何使用react组件。1、无状态组件的使用方法组件:constApp=(props)=>

美团大规模微服务通信框架及治理体系OCTO核心组件开源

微服务通信框架及治理平台OCTO作为美团基础架构设施的重要组成部分,目前已广泛应用于公司技术线,稳定承载上万应用、日均支撑千亿级的调用。业务基于OCTO提供的标准化技术方案,能够轻松实现服务注册/发现

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

react学习路线图,学习react就是有捷径

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 文章摘自:https://sunmenglei.blog.csdn.net/article/details/108554788

如何使用react开发项目

如何使用react开发项目1、环境搭建开发react项目,环境搭建是第一步,react开发需要搭建nodejs环境,因为使用官方的脚手架搭建项目最为简单,而脚手架和webpack依赖于nodejs。w

app.vue组件如何按需加载?

app.vue组件如何按需加载?按需加载组件,或者异步组件,主要是应用了component的is属性1、template中的代码:这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名

【Kubernetes系列】第5篇 Ingress controller – traefik组件介绍

1.概述为了能够让Ingress资源能够工作,在Kubernetes集群中必须至少有一个运行中的ingresscontroller组件。也就是说如果在kubernetes集群中没有一个ingressc

已配置 4000+ 页面,携程前端组件化探索之“乐高”运营系统

一、前言 市场部活动组主要负责各种运营活动的相关开发,分为常规运营活动和定制运营活动。常规运营活动因为组件(模块)具有复用性,并且配置化需求非常多,因此我们建设了一个可视化页面搭建平台——乐高(leg

Hyperf 发布 Session、极简 DB、zk 配置中心组件和支持 Twig/Plates 视图引擎支持

更新内容 本周更新主要新增极简DB组件,Zookeeper配置中心,和Session组件,以及为视图组件增加了Twig和Plates视图引擎的支持,同时为计划任务组件增加了集群执行的支持。极简DB组件

Hyperf 权限管理组件 hyperf-permission 发布

本人正在申请版主,还望各位多评论,收藏,点赞GITHUB:https://github.com/donjan-deng/hyperf-perm...欢迎star,欢迎pr.Hyperf权限管理组件sp