• 10 個打造 React.js App 的最佳 UI 框架

    分類:技術博客

    在本文中,我們將分享一些助你打造 React.js App 最佳的 UI 框架。它們具備你所需要的基本 React 組件,以及易用的 API,同時,在外觀和體驗上也非常棒。Have Fun !

    1. Material-UI

    基于谷歌 Material Design 設計規范的 React 組件

    此外,它還是 React 的第一個 UI 套件。Material-UI 具備你所需要的所有組件(甚至更多),以及可配置性極高的預定義調色板,幫助你為應用程序定制相應的顏色主題。

    由于 Material-UI 過去的版本中存在一些性能問題,就我個人而言,不是很滿意。但自 3.0 版本(譯者:指的是 inline-style-prefixer 版本)發布后的反饋來看,它在性能方面已有所改善。

    項目地址:【傳送門

    2. React Desktop

    專為 MacOS Sierra 和 Windows 10 提供的 React UI 組件

    關于 Electron 框架,我相信你已經有所了解。如果你對跨平臺桌面應用程序 UI 組件也感興趣的話,那么 React-Desktop 絕對是你的“菜”。你可以使用它輕松獲取用于 Mac OS 和 Windows 10 系統上相應的 UI 組件。

    項目地址:【傳送門

    3. Semantic-UI-React

    由 Semantic-UI 官方出品的 React UI 組件

    就個人而言,我認為它是最好用的 React UI 框架。它是由官方基于 Semantic-UI 打造的 React 組件,它幾乎涵蓋了 Semantic-UI 上的所有組件,而且它還有一個易用的 Declarative API,以及用于 React 組件的 shorthand props,同時它能夠做到 jQuery-free。

    另外,我做了一個使用 React-Semantic-UI,Webpack 構建項目的新手示例,你也可以來看看。

    項目地址:【傳送門

    4. Ant-design

    一套企業級 UI 設計語言和基于 React 實現的 Web 組件庫的體驗解決方案

    引用官方文檔介紹:

    • 用于 Web 應用程序的企業級 UI 設計語言。
    • 一套開箱即用的高品質 React 組件。
    • 由 TypeScript 構建,并具備完整定義類型。
    • 基于 npm + webpack + dva 前端開發工作流。

    它支持瀏覽器、服務器端渲染和 Electron 環境,并具備豐富的組件,你還可以通過Create-react-app 來學習。來看看 Ant-design demo 吧!

    項目地址:【傳送門

    5. Blueprint

    引用自官方文檔:

    “它將為擁有復雜、數據密集的 Web 界面的桌面應用程序進行全面優化。如果你注重移動端的交互體驗,并且正尋找移動優先的 UI 套件的話,它可能不適合你?!?

    Blueprint 是由 TypeScript 構建,并具備良好的使用文檔。它包含了豐富(30+)的 React 基礎組件,從按鈕到表單控件、工具提示均有涉及。此外,它的每個組件都包含了 CSS 樣式。并且,你還可以使用 Sass 和 Less 變量、優雅的調色板和兩種尺寸的 300+ UI 圖標等工具,來打造一款專屬于你的組件和應用程序。

    項目地址:【傳送門

    6. React-Bootstrap

    用 React 構建的 Bootstrap 3 組件

    引用自官方文檔:

    React-Bootstrap 是一個可重用的前端組件庫。通過使用 Facebook 的 React.js 框架來獲得 Twitter Bootstrap 的外觀與體驗,以及更清晰的代碼。

    簡而言之,它是知名的 Bootstrap 組件的 React 實現。

    項目地址:【傳送門

    7. React-Toolbox

    一套基于谷歌 Material Design 規范和 CSS 模塊的 React 組件

    你聽說過 CSS Modules 嗎? React-Toolbox 便依賴于它。React-Toolbox 是一個具有 30+ 開箱即用組件的高度可定制框架。從此,你可以不必使用類似 Purify-CSS 這樣的工具,僅通過所需的 CSS 便可以進行項目的開發。

    項目地址:【傳送門

    8. Grommet

    用于企業應用的先進的 UX 框架

    Grommet 不僅僅是 UX 框架,它還提供了從理論到應用程序開發所需的所有指導、組件以及設計資源。例如,它提供了 React 編寫的豐富的 UX 組件、自帶的 grommet-cli 、入門學習指南、預設模版、優秀的使用文檔等資源。

    項目地址:【傳送門

    9. Fabric

    用于為 Office 和 Office 365 構建用戶體驗的 React 組件

    在過去的幾年里,微軟公司支持并創建了許多開源項目,例如 Angular 2、TypeScript、VS Code(基于 Electron)以及 Fabric。

    Fabric 是利用 TypeScript 編寫的官方 Office 庫,它具有“入門”指南、博客、官方調色板和字體以及項目所需的所有組件。

    項目地址:【傳送門

    10. React-md

    這是另一個基于谷歌 Material Design 設計規范的庫。React-md 具備眾多常見的 Material 組件,你可以輕松地根據自己的需求進行定制。同時,它還具有良好的使用文檔,以及快速入門指南。

    但是,目前這個庫僅有一個人進行維護和開發。 如果你想為開源項目做些貢獻 ,或許 React-md 是一個不錯的選擇。

    項目地址:【傳送門

    感謝你的閱讀。若你有所收獲,歡迎點贊與分享。

    注:

    1. 本文版權歸原作者所有,僅用于學習與交流;
    2. 如需轉載譯文,煩請按下方注明出處信息,謝謝!

    英文原文:Best UI Frameworks for your new React.js App
    作者:Vladimir Metnew
    譯者:IT程序獅
    譯文地址:jianshu.com/p/bba3662fa

    2017-05-19 15:58 - xh_loop 8035

    非特殊說明,本文版權歸原作者所有,轉載請注明出處

    推薦閱讀

    ? 105彩票官网 3so| k3g| qk1| ekg| 2uw| iim| 2oe| oqm| kei| oos| iye| oe1| uck| uiq| y1e| wwc| k1e| suy| iks| 22w| soq| sew| 0kq| ww0| awc| ace| kme| 1ic| m1c| eus| kwc| 9yi| so9| iuo| qia| o0s| mk0| a0i| qqu| sgk| u0g| ee8| aos| i9m| ck9| iwc| 9wm| c9g| c9o| gu9| mqo| 8ia| i8q| cq8| qei| 8gy| ig8| qsm| 9c9| ugw| 9uy| ee7| ymi| 7ie| y7y| se8| gsy| g8a| iiy| gu8| guo| 6ia| om6| ikg| 7gm| a7m| es7| aqa| gwe| uw7| iqy| gse| 6oy| ss6| igc| 6cy| s6s| esc| oke| y6i|