CtripFE 出品,一个专注 Web 移动端的 React Components 库。
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
build
demos
docs
src
tests
.babelrc
.eslintignore
.eslintrc
.gitignore
README.md
index.html
package.json
postcss.config.js
webpack.config.js
webpack.demos.config.js

README.md

IRDC-Components

Documentation | Online Demos

这是什么

这是一个专注 Web 移动端的 React 组件库,类似基于 Vuecube-ui

愿景是沉淀出一套高质量的组件,形成完整的体系,减少重复工作,提高工作效率。

有什么特点

  • 低耦合、少依赖、高复用
  • 数量精简、单一职责的 API
  • 高可靠(High coverage + 长期生产环境验证)
  • 合理的分类 + 详尽的说明文档

一切都是为了业务

组件库即就是我们在平常的开发过程中抽象出来的、和业务无关(或者业务通用)的组件合集。目的是让开发人员将更多的精力放在业务逻辑本身。

维护者会不断优化,并及时处理 Issue。

这是值得的,因为这会促使包括我们自己在内的 React 开发人员,在完成业务需求的同时不断反思、优化代码。

举个栗子

Tabs是已经初步完成的一个简单的布局组件,这是这个组件在我们的项目中的地址 ../src/components/tabs

这个组件本身不包含任何业务逻辑,在保持原有组件功能的情况下,引入 flipsnap 来处理滑动,并且新增 props 开关 slideable可按需引入滑动功能。

目录说明

  • demos 演示
  • docs 文档
  • src 组件
    • Components 组件库目录
    • lib 通用库
    • utils 通用方法
  • test 单测

使用方式

安装

npm install components // Not published yet

引用

import { Tabs, TabNav, TabContent }  from 'components';
...

开发 (For contributors)

npm run demos

上述命令将会打开 webpack-dev-server,然后运行相应的 demos,进行组件调试。

打包 (For contributors)

npm run build

测试 (For contributors)

Jest + Enzyme

npm run test

How to contribute to the document? (For contributors)

  • npm install docsify-cli -g
  • Clone repo https://github.com/CtripFE/irdc-components.git
  • cd ./irdc-components
  • Run docsify serve
  • Edite *md files
  • Push it!

Contact