[翻译]怎么写一个React组件库(二)
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27434018,喜欢本文的就去知乎点个赞支持下吧~
引言
该系列文章将通过创建一个组件库来引导你学习如何构建自己的组件库。
这是该系列的第二部分。如果你还没有阅读 Part 1,我推荐你先阅读它。另外,我们将会讨论有关原子设计的内容。如果你不熟悉相关概念,阅读一些相关内容 (这儿)_ 将对你很有帮助。_
在该部分我们将讨论:
通过
styled-components
使得我们的组件变得可配置性更强添加一个调色板到我们的库
使用一些
polished
的功能使用
npm link
,babel
和eslint
的高效开发流程将原子设计原则应用到我们的组件库结构
原子设计 & 组件
现在我们已经完成许多初始化配置,接下来我们将花时间思考如何构建一个实用的组件库。
为了实现这目标,我们将借用 Brad Frost 的原子设计的一些概念。这本书绝对值得一读,你可以购买它如果你想了解更多的相关内容。但为了简洁起见,我们将只了解一些高维抽象概念。Brad 将web UI分为五个独立的部分:原子(atoms),分子(molecules),实体(organisms),模版(templates),页面(pages)。
我们的组件库将由原子和分子组成。开发者可以通过组件库快速构建实体,模版和页面。
Source: http://bradfrost.com/wp-content/uploads/2013/06/atomic-design.png
原子(Atoms) -> 元素(Elements)
原子是构成UI中最小的不可分割的单位。想想按钮,链接,输入框等等。在本教程中,我们统称为它们为元素。
还记得我们创建了按钮组件然后将其放入 /elements
目录么?
[翻译]怎么写一个React组件库(二)的更多相关文章
- [翻译]怎么写一个React组件库(一)
本文同步发布于知乎专栏 https://zhuanlan.zhihu.com/p/27401329,喜欢本文的就去知乎点个赞支持下吧- 引言 该系列文章将通过创建一个组件库来引导你学习如何构建自己的组 ...
- 如何快速构建React组件库
前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- 七个不可错过的React组件库与开发框架
React是如今最火爆的前端技术,而React最棒的一个特点就是有大量功能丰富的组件库和开发框架可用.从按钮到卷轴到工具条,应有尽有,而且这些组件可以各行其是,也可以组装成复杂的UI,你也可以把UI分 ...
- Vue3语法快速入门以及写一个倒计时组件
Vue3写一个倒计时组件 vue3 beta版本发布已有一段时间了,文档也大概看了一下,不过对于学一门技术,最好的方法还是实战,于是找了一个比较简单的组件用vue3来实现,参考的是vant的count ...
- js单行写一个评级组件
单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); -----------------------------------分隔符- ...
- 表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这种写法就是把组件嵌套改为配置方式
表单配置项写法,表单写成JSON数组套对象,一行是一个数组单位,一列是一个对象单位,然后再写一个公共组件读取这个配置,循环加载slot,外层载入slot的自定义部分,比如input select等,这 ...
- react学习笔记(二)编写第一个react组件
继续上一节课的内容,打开App.js:会看到如下代码: import React, { Component } from 'react'; //在此文件中引用React,以及reat的组件类 imp ...
- 【万字长文】从零配置一个vue组件库
简介 本文会从零开始配置一个monorepo类型的组件库,包括规范化配置.打包配置.组件库文档配置及开发一些提升效率的脚本等,monorepo 不熟悉的话这里一句话介绍一下,就是在一个git仓库里包含 ...
随机推荐
- ES5 forEach()用法和提前终止遍历
forEach()方法从头到尾的遍历数组,为每个元素调用指定的函数,第一个参数接收的是一个函数,第二个参数是可选的,如果有第二个参数,则调用的函数被看作是第二个参数的方法(第二个参数可以作为第一个调用 ...
- [瞎玩儿系列] 使用SQL实现Logistic回归
本来想发在知乎专栏的,但是文章死活提交不了,我也是醉了,于是乎我就干脆提交到CNBLOGS了. 前言 前段时间我们介绍了Logistic的数学原理和C语言实现,而我呢?其实还是习惯使用Matlab进行 ...
- Nginx 反向代理&负载均衡
1.反向代理 当我们请求一个网站时,nginx会决定由哪台服务器提供服务,就是反向代理. nginx只做请求的转发,后台有多个tomcat服务器提供服务,nginx的功能就是把请求转发给后面的服务器, ...
- 最大流算法之EK(最短路径增广算法)
这是网络流最基础的部分--求出源点到汇点的最大流(Max-Flow). 最大流的算法有比较多,本次介绍的是其中复杂度较高,但是比较好写的EK算法.(不涉及分层,纯粹靠BFS找汇点及回溯找最小流量得到最 ...
- Web 版 PowerDesigner (Canvas) 技术
什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形. ...
- C#中对于变量的声明和初始化
C#变量初始化是C#强调安全性的另一个例子.简单地说,C#编译器需要用某个初始值对变量进行初始化,之后才能在操作中引用该变量.大多数现代编译器把没有初始化标记为警告,但C#编译器把它当作错误来看待. ...
- 【2017-05-17】WebForm
ASP.NET分为:ASP.NET WebForm和ASP.NET MVC 运行机制:C/S(客户端应用程序)代码在客户端执行,仅仅去服务器上的数据库存取数据 B/S(网站应用程序)程序代码在服务器上 ...
- 【收藏】15个常用的javaScript正则表达式
1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP ...
- 高效工作的秘诀——Doit.im使用总结报告
从上次购买doit.im pro账户到现在已经快一年了,从摸索到现在的熟悉,目前这款软件已经成为我工作生活中最为重要的效率工具,在此之前也用过很多软件进行时间管理,综合起来评价,doit应该算是最棒的 ...
- python求职Top10城市,来看看是否有你所在的城市
前言 从智联招聘爬取相关信息后,我们关心的是如何对内容进行分析,获取用用的信息. 本次以上篇文章“5分钟掌握智联招聘网站爬取并保存到MongoDB数据库”中爬取的数据为基础,分析关键词为“python ...