Zent - 源自有贊微商城的 React 組件庫

Zent ( \ˈzent\ ) 是有贊 PC 端 Web UI 規範的 React 實現版本，提供了一整套基礎的 UI 組件以及經常使用的業務組件。經過 Zent，能夠快速搭建出風格統一的頁面，提高開發效率。目前咱們有 45+ 組件，其中包括 Design 以及 SKU 等實用的業務組件。這些組件都已經在有讚的各種 PC 業務中普遍使用，咱們會在此基礎上，持續開發更多實用的新組件。

咱們的目標是作東半球最好的 React 組件庫，讓 React 開發更快、更簡單。

1、特性

• 一套完整的 UI 組件庫，組件都通過有讚的業務檢驗，實用又靠譜。
• 完善的中英文文檔，每一個組件都有詳細的 API 說明以及能夠運行的示例。
• 內置了 TypeScript 類型定義文件。
• Zent 支持自定義主題，經過咱們提供的工具你能夠在不修改代碼的狀況下將組件庫的總體色調改爲你想要的任何顏色。
  
• 一套有贊設計師繪製的圖標庫。
• 單測覆蓋率在 90% 以上。
• 提供了一個 babel 插件自動化按需加載代碼，只引入使用到的 JavaScript 以及 CSS 文件，減少 bundle 體積。

2、咱們的優點: 豐富實用的組件

下面是一些組件的簡單展現，另外咱們也提供了一些項目示例，能夠幫助你快速使用 Zent 搭建一個頁面。

時間選擇

作過 Web 開發的都知道瀏覽器原生的時間選擇組件不只很差用，還有各類兼容性問題。爲了解決這些問題，Zent 提供了一套本身的時間選擇組件，包括日期選擇、周選擇組件、月選擇以及時間區間選擇。爲了適應不一樣場景的需求，時間區間選擇還提供了兩種不一樣的交互模式。

顏色選擇器

和時間選擇同樣，顏色選擇在 Web 上也是一個問題，Zent 一樣提供了一個功能強大又方便的顏色選擇組件。

除了經常使用的基礎組件，Zent 還提供了豐富的業務組件，開發者可使用這些組件快速實現業務功能。

微頁面編輯

咱們還開源了有讚的微頁面編輯組件，支持自定義微頁面內的組件，讓你輕輕鬆鬆寫出一個WebApp，讓普通用戶也能夠搭建含動態數據的頁面的。

SKU 選擇

商品規格是商品很重要的一個屬性，Zent 的 SKU 選擇組件封裝了商品規格選擇的邏輯，讓你從複雜的交互中解放出來，有更多精力去優化業務的實現。

省市區選擇

Zent 也提供了地址輸入中經常使用的省市區選擇組件，這個功能是由級聯選擇組件實現的。級聯選擇組件不單單能夠用來實現省市區選擇，不少有層次關係的內容選擇均可以經過這個交互實現，例如店鋪的主營業務類目選擇等。

咱們會繼續開放更多基於 Zent 的實用業務組件，敬請期待。

3、展望

Zent 還有很多功能沒有完善，例如尚未動畫基礎設施，很期待獲得你們的批評和幫助，一塊兒打造一個更完善、更好用的 Zent。

完整代碼請移步 Github，使用指南請移步文檔網站。

本文首發於有贊技術博客。