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

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

一、特性

• 一套完整的UI 組件庫，組件都經過有讚的業務檢驗，實用又靠譜。
• 完善的中英文文檔，每個組件都有詳細的API 說明以及可以運行的範例。
• 內置了TypeScript 類型定義文件。
• Zent支持自定義主題，通過我們提供的工具你可以在不修改代碼的情況下將組件庫的整體色調改成你想要的任何顏色。

• 一套有贊設計師繪製的圖標庫。
• 單測覆蓋率在90% 以上。
• 提供了一個babel插件自動化按需加載代碼，只引入使用到的JavaScript以及CSS文件，減小bundle體積。

二、我們的優勢: 豐富實用的組件

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

時間選擇

做過Web 開發的都知道瀏覽器原生的時間選擇組件不僅不好用，還有各種兼容性問題。為了解決這些問題，Zent 提供了一套自己的時間選擇組件，包括日期選擇、週選擇組件、月選擇以及時間區間選擇。為了適應不同場景的需求，時間區間選擇還提供了兩種不同的交互模式。

顏色選擇器

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

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

微頁面編輯

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

SKU選擇

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

省市區選擇

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

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

展望

Zent還有不少功能沒有完善，例如還沒有動畫基礎設施，很期待得到大家的批評和幫助，一起打造一個更完善、更好用的Zent。

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

本文首發於有贊技術部落格。