10 best UI frameworks to build react.js apps

10 best UI frameworks to build react.js apps

In this article, we'll share some of the best UI frameworks to help you build your react.js App. They have the basic React components you need, as well as easy-to-use APIs, and are great in both appearance and experience. There's fun!

1. Material-ui

React components based on the Google Material design specification

In addition, it is the first UI suite for React. Material-ui has all the components you need (and more), as well as a predefined palette that is highly configurable, and <MuiThemeProvider> helps you customize the appropriate color theme for your application.

As a result of some performance problems in the past versions of Material-ui, I am not very satisfied personally. However, since the release of version 3.0, it has improved in terms of performance.

Project Address: Https://github.com/callemall/material-ui

2. React Desktop

React UI components specifically for MacOS Sierra and Windows 10

On the Electron frame, I'm sure you know something about it. If you are also interested in cross-platform desktop application UI components, then React-desktop is definitely your "dish". You can use it to easily get the appropriate UI components for Mac OS and Windows 10 systems.

Project Address: http://reactdesktop.js.org/

3. Semantic-ui-react

The React UI component, which is officially produced by Semantic-ui

Personally, I think it's best to use the React UI framework. It is an official Semantic-ui-based React component that covers almost all the components on the Semantic-ui, and it has an easy-to-use declarative API and React shorthand for props components, while it can Do Jquery-free.

In addition, I did a novice example of building a project using React-semantic-ui,webpack, and you can also take a look at it.

Project Address: Https://github.com/Semantic-Org/Semantic-UI-React

4. Ant-design

A suite of enterprise UI design languages and experience solutions based on the React implementation of the WEB component library

Refer to the official documentation:

• The enterprise-level UI design language for WEB applications.
• A set of high-quality React components that are out of the box.
• Built by TypeScript and has a fully defined type.
• Development workflow based on NPM + Webpack + DVA front end.

It supports browsers, server-side rendering and Electron environments, and has a rich set of components that you can also learn through Create-react-app. Let's take a look at Ant-design demo!

Project Address: Https://github.com/ant-design/ant-design

5. Blueprint

References from official documents:

"It will be fully optimized for desktop applications that have a complex, data-intensive Web interface." If you focus on the interactive experience of the mobile side and are looking for a mobile-first UI suite, it may not be for you. ”

Blueprint is built by TypeScript and has a good working documentation. It contains rich (React) basic components, from buttons to form controls and tooltips. In addition, each of its components contains a CSS style. You can also use tools such as Sass and less variables, an elegant palette, and two sizes of 300+ UI icons to create a component and application that belongs to you.

Project Address: Https://github.com/palantir/blueprint

6. React-bootstrap

Bootstrap 3 components built with React

References from official documents:

React-bootstrap is a reusable front-end component library. Use Facebook's react.js framework to get the look and feel of Twitter Bootstrap, as well as clearer code.

In short, it is the React implementation of well-known Bootstrap components.

Project Address: Https://github.com/react-bootstrap/react-bootstrap

7. React-toolbox

A set of React components based on Google Material Design specifications and CSS modules

Have you ever heard of CSS Modules? React-toolbox depends on it. The React-toolbox is a highly customizable frame with a fully-out-of-the-box component. From then on, you don't have to use a tool like PURIFY-CSS to develop your project with just the CSS you need.

Project Address: https://github.com/react-toolbox/react-toolbox/

8. Grommet

An advanced UX framework for enterprise applications

Grommet is not just the UX framework, it also provides all the guidance, components, and design resources that are needed from theory to application development. For example, it provides a rich set of UX components written by React, its own grommet-cli, an introductory learning guide, a pre-set template, and excellent use of documentation.

Project Address: Https://github.com/grommet/grommet

9. Fabric

React components for building the user experience for office and Office 365

Over the past few years, Microsoft has supported and created many open source projects, such as Angular 2, TypeScript, VS Code (Electron-based), and Fabric.

Fabric is the official Office library, written with TypeScript, with "Getting Started" guides, blogs, official palettes and fonts, and all the components required for your project.

Project Address: Https://github.com/OfficeDev/office-ui-fabric-react

Ten. React-md

This is another library based on the Google Material design specification. REACT-MD has a number of common Material components that you can easily customize to suit your needs. At the same time, it also has good documentation for use, as well as quick start guides.

However, currently only one person in this library is being maintained and developed. If you want to make a contribution to open source projects, maybe react-md is a good choice.

Project Address: HTTPS://GITHUB.COM/MLAURSEN/REACT-MD

Thank you for reading.

You are welcome to join the Learning Exchange Group if you encounter any problems or want to acquire learning resources in the learning process.
343599877, we learn the front-end together!

If you have something to gain, please feel free to share it.

10 best UI frameworks to build react.js apps