最近看这个中国风的组件在掘金也火了一段时间,看了有几天了,也体验了下,感觉还不错,所以准备来安利下

项目地址:https://github.com/zhui-team/zhui

使用手册请参考:https://inspiring-bardeen-426f2e.netlify.com/

以下为zh - ui 作者的掘金简介文章

1. 很长的前言

大三狗的寒假到了...众所周知,寒暑假是超越别人的最好的时机。然鹅一不小心就会荒废过去,大二暑假去杭州实习了两个月,这个寒假如果不做点什么开学会被满满的负罪感填满...

想了想...发现自己还没有太多接触过组件这方面,于是就想搭建一个组件库,但是又不想和市面上的组件库样式雷同,考察了一段时间发现没有中国风相关的组件,于是下定决心(懒得再想)搭建一款中国风的组件库。一方面可以回顾一下自己的css,另一方面也可以加深自己对React和组件的理解。

2. 最初的梦想

应该不会应用到生产环境:没有专业的设计,怎么把一款组件设计的有中国风真的很难,并且很难做出统一的一套标准——至少对于我而言(不过我遇到了志同道合的小伙伴山鬼帮助我一起设计)。

不会开发太多的组件:凭我的智商是无法把所有组件都转成中国风的。

3. 开发&问题

设计的实现:想要用css来实现好看的中国风有时候是不切实际的,所以许多组件的样式都进行了简化,但我们还是尽量保住了中国风的属性,比如灯笼,画卷,太极,书签,秤等等。。

组件的设计: 讲真的,在接触组件库前,以为自己对组件了解的够多了,但实际开发起来才知道,许多内含看上去简单,但是如果你不接触的话是永远学不到的,这个过程中感谢前端大佬们已经搭好的轮子,让我能够愉快的借鉴哈哈哈哈。

4. 收获

  • 许多css的技巧及偏门的知识
  • 对React组件更深入的理解
  • 一个具有特色的项目
  • 博客的荒废
  • 在公司要尊重强大的设计老哥老姐

5. 结尾

这篇文章没什么干货,因为更多的是记录自己个人的真实感受,另一方面至少在开发组件库这方面我确实是个新人

这里放上GITHUB文档,感兴趣的可以看一下文档,不感兴趣的可以点个star鼓励一下我

项目我会一直坚持完善下去的,她现在还是个孩子,期待她长大的那一天。

另外不接受任何秀优越大佬的点评。

作者:AddOneG
链接:https://juejin.im/post/5c617a355188256299385138
来源:掘金

推荐一款中国风React组件的更多相关文章

  1. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

  2. 给 Web 开发人员推荐的通用独立 UI 组件(二)

    现代 Web 开发在将体验和功能做到极致的同时,对于美观的追求也越来越高.在推荐完图形库之后,再来推荐一些精品的独立 UI 组件.这些组件可组合在一起,形成美观而交互强大的 Web UI . 给 We ...

  3. 强烈推荐优秀的Vue UI组件库

    Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...

  4. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  5. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  6. 推荐15款最好的 Twitter Bootstrap 开发工具

    Twitter Bootstrap 自从2011年最初发布到网上后,迅速成为 Web 领域最流行的响应式前端开发框架之一,是网页设计的优秀实践.Twitter Bootstrap 框架包含了众多的预定 ...

  7. 推荐12款实用的 JavaScript 书页翻转效果插件

    Flipbooks(书页)或者页面翻转已成为在网页设计中最流行的交互动画之一.他们可以用在 Flash,网页或者在线杂志中.使用书页动画或者页面翻转的网页设计效果方便人们展示他们的产品,作品或者其它内 ...

  8. 向 Web 开发人员推荐35款 JavaScript 图形图表库

    图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web 应用和项目的可靠性. 在这篇文章中,我们收集了3 ...

  9. 推荐25款很棒的 HTML5 开发框架和开发工具【上篇】

    HTML5 在不同的领域让网页设计更强大的.快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5.HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站 ...

随机推荐

  1. Python + Tornado 搭建自动回复微信公众号

    1 通过 pip 安装 wechat-python-sdk , Requests 以及 Tornado pip install tornado pip install wechat-sdk pip i ...

  2. 随心测试_软测基础_002_<测试工程师_核心技能体系>

    测试工程师核心技能体系构成 测试基础体系:[对象——>方法——>流程].[测试活动类型——>质量] 测试分析体系:[测试对象分析]——>[测试设计(计划.数据.用例.文档)] ...

  3. debug和release版本的区别

    Debug:调试版本,包含调试信息,所以容量比Release大很多,并且不进行任何优化(优化会使调试复杂化,因为源代码和生成的指令间关系会更复杂),便于程序员调试. Debug模式下生成两个文件,除了 ...

  4. HDU 3901 Wildcard

    题目:Wildcard 链接:http://acm.hdu.edu.cn/showproblem.php?pid=3901 题意:给一个原串(只含小写字母)和一个模式串(含小写字母.?.* ,*号可替 ...

  5. spark-MLlib之协同过滤ALS

    协同过滤与推荐   协同过滤是一种根据用户对各种产品的交互与评分来推荐新产品的推荐系统技术.   协同过滤引入的地方就在于它只需要输入一系列用户/产品的交互记录:   无论是显式的交互(例如在购物网站 ...

  6. Unit 4.css的导入方式和选择器

    一.什么是css CSS是指层叠样式表(Cascading Style Sheets),样式定义如何显示HTML元素,样式通常又会存在于样式表中.也就是说把HTML元素的样式都统一收集起来写在一个地方 ...

  7. Java基础:Java简介及安装配置(1)

    Java简介 Java是Sun公司于1995年推出的高级编程语言,具有跨平台特性,编译后的程序能够运行在多种类型的操作系统平台上. 1.1 Java应用程序版本 Java的3个独立用于开发不同类型应用 ...

  8. DAO 四个包的建立

    一.DAO 四个包的建立,降低代码之间的耦合性? 之前写代码,都是在一个包下.代码耦合性较高,不利于后期的维护. dao(代码分层?) 有利于后期的维护代码,修改方便. com.aaa.dao 存放d ...

  9. 关于oracle sql语句查询时表名和字段名要加双引号的问题详解

    转自:http://www.2cto.com/database/201504/387184.html 作为oracle的初学者相信大家一定会遇到这个问题,如图: 明明就是navicat可视化创建了表, ...

  10. XCTF体验题库 : ReverseMe-120

    ida打开看一下: sub_401000函数是能否输出“correct”的关键 点进去看一下: 可以看到将输入的字符串赋予了byte_414E40这个数组的值,看一下这个数组: 应该是base64的解 ...