构建 React.js 应用的十佳 UI 框架，都在这了！

   <p>构建你的下一个 React.js APP，有这些优秀的 UI 框架就够了。</p>    <p><strong>1、 <a href="/misc/goto?guid=4959007488104018325" rel="nofollow,noindex">Material-UI</a> </strong></p>    <p>一套实现 Google Material Design 的 React 组件</p>    <p>同时，它也是 React 的第一批 UI 工具套件之一。Material-UI 包含你需要的所有组件（甚至更多）。 Material-UI 预定义的调色板和 <MuiThemeProvider>  可配置性极高，允许为 APP 自定义颜色主题。</p>    <p>Material-UI 之前的版本个人认为有一些性能问题，但从 3.0 版本的发布来看，性能有所改善。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/bebb545c9e9ef09554e062706173ac50.png"></p>    <p><strong>2、 <a href="/misc/goto?guid=4959748739066956186" rel="nofollow,noindex">React Desktop</a> </strong></p>    <p>MacOS Sierra 和 Windows 10 的 React UI 组件。</p>    <p>如果你对跨平台桌面应用程序的 UI 组件感兴趣，那么 React-Desktop 就是为你而设。你可以在上面找到 Mac OS 和 Windows 10 的均可用 UI 组件。</p>    <p>React-Desktop 可与 <a href="/misc/goto?guid=4958961831253799729" rel="nofollow,noindex">NW.js</a> 和 <a href="/misc/goto?guid=4958875078695602791" rel="nofollow,noindex">Electron.js</a> 完美结合，也可用于任何 JavaScript 驱动的项目。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cef33a3639f144849289dbda6d1d65e0.png"></p>    <p><strong>3、 <a href="/misc/goto?guid=4959748739216931193" rel="nofollow,noindex">Semantic-UI-React</a> </strong></p>    <p>Semantic-UI 的官方 React 组件</p>    <p>就个人而言，我认为这是 React 最好的 UI 框架。</p>    <p>Semantic-UI-React 几乎拥有 Semantic-UI 中所有有用的组件，同时也有一个非常好的 Declarative API ，和用于 React 组件的 shorthand props ，并且 jQuery-Free。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8c6f2814d938496373c4485819fd0df9.png"></p>    <p><strong>4、 <a href="/misc/goto?guid=4959748739302245843" rel="nofollow,noindex">Ant-design</a> </strong></p>    <p>一套企业级的前端设计语言和基于 React 的前端框架实现。</p>    <p>官方文档介绍：</p>    <ul>     <li>一种用于 Web 应用的企业级 UI 设计语言</li>     <li>一套开箱即用的高质量 React 组件</li>     <li>使用 TypeScript 构建，提供完整的类型定义文件</li>     <li>基于 npm + webpack + babel 的工作流</li>    </ul>    <p>它支持所有现代浏览器（IE9 以上），支持服务端渲染和 <a href="/misc/goto?guid=4958875078695602791" rel="nofollow,noindex">Electron</a> 环境，拥有许多组件。</p>    <p><a href="/misc/goto?guid=4959748739393027438" rel="nofollow,noindex">Ant-design demo</a></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/4626c633eedb6173b3741c0980bb4728.png"></p>    <p><strong>5、 <a href="/misc/goto?guid=4959729651028827151" rel="nofollow,noindex">Blueprint</a> </strong></p>    <p>针对构建复杂、数据密集的 Web 界面的桌面应用进行了最优化。如果你重度依赖移动互动，并且正在寻找 mobile-first 的 UI 工具包，它可能不适合你。</p>    <p>Blueprint 同样是用 TypeScript 编写的，有良好的文档。</p>    <p>它包含 30+ 的 React 组件，涵盖几乎所有的通用界面元素，从按钮到表单控件到工具提示等等。 它还包括每个组件的 CSS 样式和使用 Sass 和 Less 变量设计自己的组件和应用的工具，以及一个优雅的调色板和两种尺寸的 300 多个 UI 图标，旨在让你专注于构建产品。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/2773f65a3d9036b524da4d49c6f2b8aa.png"></p>    <p><strong>6、 <a href="/misc/goto?guid=4959748739513268735" rel="nofollow,noindex">React-Bootstrap</a> </strong></p>    <p>React 构建的 Bootstrap 3 组件。</p>    <p>React-Bootstrap 是一个可重复使用的前端组件库。你可以通过 非死book 的 React.js 框架获得 推ter  Bootstrap 的体验，而且有更为清晰的代码。</p>    <p>简而言之，这是老牌的 Bootstrap 组件，用 React 重新编写。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cb74e9cd32e3b860a3a4072ef6584af8.png"></p>    <p><strong>7、 <a href="/misc/goto?guid=4959748739590804186" rel="nofollow,noindex">React-Toolbox</a> </strong></p>    <p>一组使用 CSS 模块实现 Google Material Design 的 React 组件。</p>    <p>你是否听说过 <a href="/misc/goto?guid=4958965462431997440" rel="nofollow,noindex">CSS Modules</a> ? React-Toolbox 依赖于它。它允许你只使用所需的 CSS ，而不用使用像 Purify-CSS 这样的工具。除此之外，React-Toolbox 是具有30 +组件，开箱即用的，高度可定制的框架。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/14014ba642f2933114e027aafeb1c765.png"></p>    <p><strong>8、 <a href="/misc/goto?guid=4959748739710650567" rel="nofollow,noindex">Grommet</a> </strong></p>    <p>用于企业应用最先进的 UX 框架。</p>    <p>Grommet 不仅仅是一个 UX 框架，它所包含的东西要比单纯的 UX 框架多得多。</p>    <p>Grommet = 用 React 编写的一堆 UX 组件和工具 + 自有的 grommet-cli +“入门” 指南 + 预建模板 + 良好的文档+ 与 Sketch 集成 。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/32f6e5ccc1612fafc2e6d3dc61f0587f.png"></p>    <p><strong>9、 <a href="/misc/goto?guid=4959748739800320833" rel="nofollow,noindex">Fabric</a> </strong></p>    <p>用于构建与 Office 和 Office 365 界面相类似的 Web 应用的 React 组件。</p>    <p>在过去几年中，微软支持并构建了许多开源项目 - Angular 2、TypeScript、VS Code 和 Fabric。</p>    <p>Fabric 是用 TypeScript 编写的官方 Office 库，包含“入门”指南、博客、官方调色板和字体，以及构建项目所需的所有组件。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/c288d9923800c8b76d6bf5839ee4ad3e.png"></p>    <p><strong>10、 <a href="/misc/goto?guid=4959748739882238294" rel="nofollow,noindex">React-md</a> </strong></p>    <p>又一个实现 Material Design 的库。React-md 可以轻松地根据自己的需要进行定制，拥有良好的文档和快速上手的“入门”指南，以及许多常见的 Material 组件。</p>    <p>不过现状是，这个库只有一个人在进行维护和开发。如果你想为开源项目做贡献，React-md 可能是一个不错的选择。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/17bc9d7c734feefc971379970dd30d1e.png"></p>    <p>来自：http://www.iteye.com/news/32408</p>    <p> </p>