-
Notifications
You must be signed in to change notification settings - Fork 5k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from xitu/master
fork
- Loading branch information
Showing
34 changed files
with
4,397 additions
and
512 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
144 changes: 144 additions & 0 deletions
144
TODO/10-best-reactjs-ui-frameworks-for-rapid-prototyping.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,144 @@ | ||
| > * 原文地址：[10 Best ReactJS UI Frameworks for rapid prototyping](https://hashnode.com/post/10-best-reactjs-ui-frameworks-for-rapid-prototyping-cit49tqx414z89c53equ4zc5k?utm_source=Feed%20Digest&utm_medium=email&utm_campaign=Hashnode%20Feed%20Digest) | ||
| * 原文作者：[Tom Alter](https://hashnode.com/@tomasp) | ||
| * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) | ||
| * 译者： | ||
| * 校对者： | ||
|
|
||
|
|
||
|
|
||
| I was researching for a few feature rich UI frameworks based on React; that give the power of composability through React components that you can directly plug in into your React project | ||
|
|
||
| Here is a compilation of a few ReactJS based UI frameworks (in no particular order), that I came across. Hope one of these choices will help you rapidly prototype your "ReactJS" ideas. | ||
|
|
||
| * * * | ||
|
|
||
| ## Material UI | ||
|
|
||
| Material-UI is a set of React components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html). | ||
|
|
||
| Out of the hundreds of UI frameworks out there, Material UI is a framework that has the most refined implementation of Material Design. | ||
|
|
||
|  | ||
|
|
||
| [Website](http://www.material-ui.com/) | [Demo](http://www.material-ui.com/#/components/) | ||
|
|
||
| * * * | ||
|
|
||
| ## React-Bootstrap | ||
|
|
||
| Do I even need a description here? Bootstrap is, without a doubt, the most popular UI framework that is out there. | ||
|
|
||
| Bootstrap is one ot the most advanced UI frameworks out there and has got most of the things right. Here is a React implementation of Bootstrap 3. | ||
|
|
||
|  | ||
|
|
||
| [Website](https://react-bootstrap.github.io/) | [Demo](https://react-bootstrap.github.io/components.html) | [GitHub](https://github.com/react-bootstrap/react-bootstrap/) | ||
|
|
||
| * * * | ||
|
|
||
| ## React-Foundation | ||
|
|
||
| [Foundation](http://foundation.zurb.com/) from Zurb is a very feature-rich and easily customizable library. it is one of the most popular UI frameworks that are out there. | ||
|
|
||
| React-Foundation is the implementation of the Foundation UI in the form or react components. | ||
|
|
||
|  | ||
|
|
||
| [Website](https://react.foundation) |[GitHub](https://github.com/nordsoftware/react-foundation) | ||
|
|
||
| * * * | ||
|
|
||
| ## Essence | ||
|
|
||
| Essence is a CSS framework that implements the guidelines from Google Material Design Specification with ReactJS. With Essence you'll be able to make great looking web & mobile interfaces very quickly. | ||
|
|
||
|  | ||
|
|
||
| [Website](http://getessence.io/home) | [Demo](http://getessence.io/core) | ||
|
|
||
| * * * | ||
|
|
||
| ## React-MDL | ||
|
|
||
| React-MDL is the React implementation of the already popular [Material Design Light](https://www.getmdl.io/components/index.html) framework by google. | ||
|
|
||
| MDL is a light weight material design CSS framework which aims on bringing concepts of material design while keeping the UI lightweight. | ||
|
|
||
|  | ||
|
|
||
| [Website](https://tleunen.github.io/react-mdl/) | [Demo](https://tleunen.github.io/react-mdl/components/) | ||
|
|
||
| * * * | ||
|
|
||
| ## Belle | ||
|
|
||
| Belle provides you with a set of React components like Toggle, ComboBox, Rating, TextInput, Button, Card, Select and soon many more. | ||
|
|
||
| All of the components are optimized to work both on mobile & desktop devices. The styles are highly customizable on two levels. You can configure the base styles of all the components as well as _modify_ each one of them individually. | ||
|
|
||
|  | ||
|
|
||
| [Website](http://nikgraf.github.io/belle/) | [GitHub](https://github.com/nikgraf/belle) | ||
|
|
||
| * * * | ||
|
|
||
| ## Elemental-UI | ||
|
|
||
| Elemental-UI is a high quality, modular set of UI scaffolding components and controls for React that are built from the outset to natively implement React patterns. | ||
|
|
||
| Elemental-UI is inspired from many component based UI libraries and is like a enhancement to Bootstrap. it's a must try if you're a fan of that. | ||
|
|
||
|  | ||
|
|
||
| [Website](http://elemental-ui.com/) | [Github](https://github.com/elementalui/elemental) | ||
|
|
||
| * * * | ||
|
|
||
| ## MUI | ||
|
|
||
| MUI is a lightweight CSS framework that follows the Material Design guidelines. MUI is available in CSS/JS only, React and Angular versions. | ||
|
|
||
|  | ||
|
|
||
| [Website](https://www.muicss.com/) | [GitHub](https://github.com/muicss/mui) | ||
|
|
||
| * * * | ||
|
|
||
| ## grommet | ||
|
|
||
| Grommet is based on ReactJS which provides great features in JavaScript for building user interfaces. | ||
|
|
||
| Grommet is developed by the developers from HP(Hewlett Packard) and they claim it to be "The most advanced UX framework for enterprise apps". | ||
|
|
||
|  | ||
|
|
||
| [Website](https://grommet.github.io/) | [Demo](https://grommet.github.io/docs/get-started) | [GitHub](https://github.com/grommet/grommet) | ||
|
|
||
| * * * | ||
|
|
||
| ## React Toolbox | ||
|
|
||
| React Toolbox is a UI library that follows the concepts of Google's Material Design and is built on top of some of the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6\. The library harmoniously integrates with your Webpack workflow and it's easily customizable and very flexible. | ||
|
|
||
|  | ||
|
|
||
| [Website](http://react-toolbox.com/) | [Demo](http://react-toolbox.com/#/components) | [GitHub](http://www.github.com/react-toolbox/react-toolbox) | ||
|
|
||
| * * * | ||
|
|
||
| ## Ant Design of React | ||
|
|
||
| [Bonus] Ant Design of React is a React framework from the Chinese company Ant Design; based on the design specifications they have come up for their projects. It features a "complete" set of beautiful UI components built with React, using Material Design principles. | ||
|
|
||
| They're looking for volunteers to make their english translations better/complete (the time picker component, for instance, needs translation). Take at look at [this issue](https://github.com/ant-design/ant-design/issues/1471), if you're interested. | ||
|
|
||
|  | ||
|
|
||
| [Website](http://beta.ant.design/docs/react/introduce) | [GitHub](https://github.com/ant-design/ant-design) | ||
|
|
||
| ## Conclusion | ||
|
|
||
| This is just a small list of frameworks that I compiled based on my research, hope it helps the community. | ||
|
|
||
| Let me know if I have missed any framework, in the comments. 😊 | ||
|
|
Oops, something went wrong.