关于react.js:从零到一搭建React组件库

最近始终在捣鼓如何搭建实用的组件库,至于为什么会产生这个想法,次要是因为组件库对于前端生态来说究极重要,每一个着眼于久远倒退的互联网公司基本上都会量身定制组件库,它的益处不必多说,读者们在应用中或多或少都会领会到一些长处,如果以前做过MVC,那么对于这一点的领会必定更加粗浅。一款组件库如此之重要,作为一名前端工程师应该去深刻的理解,为当前工作开发、职业倒退赋能。

大抵来说,开发一款组件库通常会有以下几点益处:

  1. 对立产品设计体验
  2. 进步团队合作效率
  3. 升高开发成本

性能需要

在做任何一件事件之前都应该捋分明咱们的初衷,也就是咱们的需要是什么,凡事预则立,不预则废。

这里撇开业务上的需要,因为这篇文章没有基于业务场景去思考。只梳理一些性能上需要,也就是如何搭建一个高性能、高实用、高标准的React组件库。

需要清单:

  • 满足ES Module、CommonJS、AMD、CMD模块引入形式
  • 反对按需加载

技术选型~~~~

环境搭建

搭建组件库首先咱们来搭建工程环境,这里咱们不采纳create-react-app脚手架来搭建,因为脚手架封装好了很多货色,而有些货色对于组件库并不实用,用来搭建组件库过于臃肿。因而,我筹备从零到一搭建React组件库。

首先,先创立一个工程文件夹,执行npm init命令生成package.json;执行tsc --init生成tsconfig.json

而后,按如下构造组织工程的目录构造:

pony-react-ui
    - src
        - assets  // 寄存动态文件,比方图片、文字等
        - components // 组件
        - styles // 组件款式
        - index.ts // 主文件入口
        - style.ts // 款式文件入口
    - package.json // 依赖治理
    - tsconfig.json // ts配置
    - webpack.config.js // webpack配置

如何组织组件

在components文件夹下以如下形式组织组件,比方创立一个Button组件

- components
    - Button
        - Button.tsx // 按钮组件
        - index.tsx // 组件入口
    - Dialog
        - Dialog.tsx
        - index.tsx

Button.tsx

import React from 'react';
import classNames from 'classnames';

export interface IButtonProps {
  onClick?: React.MouseEventHandler;
  // 类型
  primary?: boolean;
  secondary?: boolean;
  outline?: boolean;
  dashed?: boolean;
  link?: boolean;
  text?: boolean;
  // 尺寸
  xLarge?: boolean;
  large?: boolean;
  small?: boolean;
  xSmall?: boolean;
  xxSmall?: boolean;
  // 色彩
  success?: boolean;
  warn?: boolean;
  danger?: boolean;
  // 禁用状态
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}

export const Button = (props: IButtonProps) => {
  const {
    className: tempClassName,
    style,
    onClick,
    children,
    primary,
    secondary,
    outline,
    dashed,
    link,
    text,
    xLarge,
    large,
    small,
    xSmall,
    xxSmall,
    success,
    danger,
    warn,
    disabled,
  } = props;
  
  
  const className = classNames(
    {
      'pony-button': true,
      'pony-button-primary': primary,
      'pony-button-secondary': secondary && !text,
      'pony-button-outline': outline,
      'pony-button-dashed': dashed,
      'pony-button-link': link,
      'pony-button-text': text && !secondary,
      'pony-button-text-secondary': secondary && text,
      'pony-button-round': round,
      'pony-button-rectangle': noRadius,
      'pony-button-fat': fat,
      'pony-button-xl': xLarge,
      'pony-button-lg': large,
      'pony-button-sm': small,
      'pony-button-xs': xSmall,
      'pony-button-xxs': xxSmall,
      'pony-button-long': long,
      'pony-button-short': short,
      'pony-button-success': success,
      'pony-button-warn': warn,
      'pony-button-danger': danger,
      'pony-button-disabled': disabled,
    },
    tempClassName
  );
  
  return (
    <button 
      type="button"
      className={className}
      style={style}
      onClick={onClick}
      disabled={disabled}>
      <span className="pony-button__content">{children}</span>
    </button>
  );
}

在index.tsx抛出组件以及该组件的类型申明

export * from './Button';

如何组织款式

- styles
    - 

我把组件的款式都寄存在/src/styles文件夹中,除了寄存各个组件款式之外,另外创立_minxin.scss

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据