Collection of posts from those who build Dashbouquet
From experience, working with open source projects is something of great significance to developers, and with the large number of React JS based libraries available on Github, we are spoilt for choices. Despite the large options available, it would be nice to narrow down to a couple of frameworks and libraries. So, this article discusses the top ten react libraries on GitHub, the libraries discussed are arranged in order of the number of stars on their various repositories. Without wasting time, let’s get into the thick of things.
Material UI is a library for implementing Google’s material design by making use of React components. It makes for easy web development, creation of great user interfaces and development of Single Page Applications.
When using Material-UI with server rendering, the developer must use the same environment for the server and the client.
Material UI can be installed using the npm command:
npm install material-ui
Ant-Design is a react based library for adding lovely designs to your react applications. Created especially for designing desktop applications, providing an enjoyable development experience which in turn leads to a better experience for the user too.
It is a Chinese library. However, it has been properly translated by volunteers making it easy to use for English speaking developers.
You can easily install Ant-design using the npm command:
npm install antd
Backend development has become easier with the help of frameworks such as Meteor and Firebase. React Storybook is a library that is made to create the same effect for frontend developers.
React Storybook allows you to build and design the UI components of your react application outside the application by providing its own UI development environment, this makes it easier for other people in the development team to work with the UI components in their own projects.
You can install react storybook easily using the npm command:
npm i -g @storybook/cli
After the installation, you can then get to run React storybook using:
npm run storybook
Gatsby is a fast static site generator built on the React JS framework. With Gatsby, you can get to transform plain text to into great websites without spending a lot of time on code.
A lot of websites have begun using static site generators for building quality websites. With Gatsby, the generated website can easily be maintained thereafter, allowing for easier extension of web functionalities.
If you as a developer have spent enough time working with the React framework, then working with Gatsby creates a better development experience.
You can easily install using the npm command:
npm install gatsby
It also comes with a command line tool that can be installed using:
npm install --global gatsby-cli
It does this by imitating jQuery’s API for DOM manipulation and traversal such as find, simulate etc and provides an option for different types of rendering such as shallow, mount and static.
Other testing libraries such as Mocha, Expect, Chai, Jasmine can be used together with Enzyme without any side effects.
Enzyme is very much easy to use and install as well:
npm install enzyme
Blueprint is a UI based react toolkit for the web, very efficient for building complex web interfaces for desktop applications using a great code and encouraging reusability.
It can easily be installed using the npm command:
npm install blueprint
Spectacle is a React based library for creating quality and dynamic slides for web presentations. You can very easily make the presentations using React components.
Creating presentations is much easy with spectacle, as it comes with out-of-the-box components like <Slide> and <BlockQuote>, that make building presentations with lots of UI implementations pretty enjoyable.
Spectacle can be installed using npm:
npm install spectacle
This library also comes with some flexibility as you can decide to write your own build configurations or use the boilerplate configurations to give the web presentation a great look.
main.js file you write your deck in is
/presentation/index.js. Check out an example - how to create presentations with Spectacle.
Elemental UI is a pretty flexible and efficient UI framework for building web applications with great design.
This framework is very similar to the Material UI framework but is much more lightweight. It is a flexible and beautiful CSS UI framework for ReactJS. It’s designed to be installed from npm and built into your project with Browserify or Webpack.
Elemental UI can easily be installed using npm:
npm install elemental
Grommet is a react based library for improving the experience of web users. According to them, it is “the most advanced UX framework for enterprise apps”.
It is a pretty flexible library, it has large-scale components for Dashboards, Login, Search, Meters, many more, this flexibility is enhanced through configuration through properties.
With the out-of-the-box components that come with Grommet, you can create captivating, reusable user interface elements that give the users a great experience while using the web application.
Grommet components are accessible, cross-browser compatible and also support theme customization.
Grommet can be installed using npm:
npm install -g grommet
The quickest way to get started is to access the Hello World page.
Mozaik is a great library for creating lovely dashboards for web applications.
It comes with great customization options, as it provides a responsive layout. This means it works great on all platforms, be it on a big screen or on a smartphone.
With Mozaik, there are lots of themes to use with options for the developer to create a personalized theme too. It allows for grid positioning, optimized backend communication and also an option to use more than one dashboard when the need arises.
There you have it.
The libraries discussed above are very efficient in carrying out their tasks. The libraries can be used for:
Each and everyone of these libraries have taken advantage of the features and components of the React JS framework, allowing for an easier experience during development.