新一代vite+react组件库

完美支持React18+TS+Vite，更小的体积，更快的响应，更强的拓展性，让我们一起向未来，拥抱这精彩的code世界！

 

你好，亲爱的读者！我很高兴与你分享我的最新项目——一个轻量级的 React 组件库，专为 React 18、TypeScript 和 Vite 打造。在这篇博客中，我将向你介绍我为何创建这个组件库，以及在这个过程中我学到的一些宝贵的经验。

为何创建这个组件库？

作为一个热爱前端技术的开发者，我一直在关注着前端生态的发展。随着 React 18 的推出，我决定借此机会创建一个全新的组件库，以充分利用 React 的最新功能。而选择 TypeScript 和 Vite，是因为它们能够提供更好的类型支持和更快的开发构建速度。

主要特性

在这个组件库中，我注重了以下几个主要特性：

• React 18 支持： 利用 React 18 中的新特性，如并发渲染和持久化状态。

• TypeScript 强类型支持： 使用 TypeScript 提高代码的可读性和可维护性。

• Vite 极速开发： 利用 Vite 快速的热重载和零配置的开发体验。

• 轻量级且易拓展： 精心设计的组件结构，确保轻量级同时容易拓展。

学到的经验

在创建这个组件库的过程中，我学到了许多宝贵的经验。其中一些重要的收获包括：

• React 18 并发模式的使用： 学会利用 React 18 中的并发模式提高组件的性能。

• TypeScript 高级用法： 发现并掌握 TypeScript 的高级类型系统，使得代码更加健壮。

• Vite 插件编写： 编写自定义 Vite 插件以满足项目的需求，提高开发效率。

组件示例

让我们通过一些组件示例来展示这个组件库的魅力。

import React from 'react';
import { Space, Button } from 'licht-ui';

export default function Demo() {
  return (
    <Space>
      <Button>默认按钮</Button>
      <Button type="primary" icon="m-icon-copy">主要按钮</Button>
      <Button type="success">成功按钮</Button>
      <Button type="warning">警告按钮</Button>
      <Button type="error">失败按钮</Button>
      <Button type="info">信息按钮</Button>
      <Button type="link">链接按钮</Button>
      <Button type="text">文本按钮</Button>
    </Space>
  )
}

愿景与未来计划

我创建这个组件库的初衷是为了提供一个高效、灵活、易用的工具，帮助开发者更轻松地构建 React 项目。在未来，我计划增加更多的组件、改进文档，并持续关注社区反馈，不断改进和优化这个项目。

鼓励参与

最后，我邀请所有的开发者加入我们的行列！你可以在 GitHub 项目页面 参与贡献、提出建议或报告问题。让我们一起共建这个精彩的 code 世界！

组件库官网地址：组件库地址

感谢你的关注，期待与你在开源社区中相遇