Vanilla Design,新一代 React UI 库

这几天做需求,一堆 UI 库实在是不知道选哪个,各种角色的同事争论不休;还总有新轮子冒出来,所以我来插一脚,并借此来领悟写代码的哲学:

The best way to write secure and reliable applications. Write nothing; deploy nowhere.

✨ 简介

Vanilla Design 是一个超轻量、超高性能的 React 组件库。Vanilla Design 团队 以体积和性能为抓手,并将 nocode 作为指导思想和方法论给 Vanilla Design 组件库赋能,大大提升了 Vanilla Design 的安全性和可维护性。

📦 安装

你只需执行如下指令,便可在你的 React 应用中使用 Vanilla Design:

bash 复制代码
npm install vanilla-design

🔨 快速上手

Vanilla Design 致力于为开发者提供优越的开发体验。你可以以极小的成本接入 Vanilla Design。

使用 Vanilla Design

首先,我们需要在应用的最外层引入 Vanilla Design 的样式:

tsx 复制代码
import "vanilla-design/styles.css";

接下来,我们便可以愉快地使用 Vanilla Design 提供的所有组件了:

tsx 复制代码
import { div } from "vanilla-design";

import "vanilla-design/styles.css";


function App(){

  return <div>Awesome Vanilla Design!</div>
}

什么?你觉得这不够 React?没关系,我们已经充分考虑到了开发者的习惯。Vanilla Design 提供了另一种引入组件的方式:

tsx 复制代码
import { Div } from "vanilla-design";

import "vanilla-design/styles.css";


function App(){

  return <Div>Awesome Vanilla Design!</Div>
}

wow,这很 React。

按需加载

作为一个高性能的组件库,按需加载是必不可少的。不同于其他 UI 库,Vanilla Design 已经把按需加载做到极致:

css 按需加载

如果你的领导不检查代码量,你可以完全省略引入样式:

tsx 复制代码
import { Div } from "vanilla-design";

// import "vanilla-design/styles.css"; 直接注释掉这一行即可


function App(){

  return <Div>Awesome Vanilla Design!</Div>
}

组件按需加载

同样地,如果你以小写方式使用 Vanilla Design,你甚至不需要做任何引入,你的代码可以被简化为:

tsx 复制代码
// import { Div } from "vanilla-design"; 直接注释掉这一行即可

// import "vanilla-design/styles.css"; 直接注释掉这一行即可


function App(){

  return <div>Awesome Vanilla Design!</div>
}

这是不是很酷呢?

❤️ 谁在使用?

尽管大多数公司都没有声明,但它们都使用了 Vanilla Design,或基于 Vanilla Design 定制化组件库😉:

css 复制代码
Facebook  Google  YouTube  Yahoo  Wikipedia  Windows  Twitter  Amazon  LinkedIn  MSN
eBay  Microsoft  Apple  Pinterest  PayPal  Reddit  Netflix  Stack Overflow ...

这些公司通常会将 Vanilla Design 和 Vanilla JS 一起使用,从而大大提升开发效率。🍦🚀

🕛 何时使用?

很多场景下,使用 Vanilla Design 都是一种极佳的选择:

  • 💡 你的老板非要让你使用 UI 库,并且在不同的 UI 库之间挑三拣四、指点江山时;
  • 💡 你的老板菜的一批,只会检查代码量时;
  • 💡 你的同事和你争论谁是最好的 UI 库,并且说其他库是垃圾时;
  • 💡 你看到有人又在造组件库的轮子时;
  • 💡 ......

你也可以在 这里 获取到关于 Vanilla Design 的更多信息。

组件库基于 WTFPL 开源:github.com/maotoumao/v...,还在犹豫什么,快来试试吧 (doge

相关推荐
森之鸟1 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell1 小时前
GSAP 入门指南
前端·javascript·动效
gnip2 小时前
组件循环引用依赖问题处理
前端·javascript
说私域2 小时前
新零售第一阶段传统零售商的困境突破与二次增长路径:基于定制开发开源AI智能名片S2B2C商城小程序的实践探索
人工智能·开源·零售
Aotman_3 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_6143 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf3 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育4 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失9494 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试