1. Create React App

# Install package
$ npm install -g create-react-native-web-app
# Run create-react-native-web-app <project-directory>
$ create-react-native-web-app myApp

# cd into your <project-directory>
$ cd myApp
# Run Web/Ios/Android development
# Web
$ npm run web

# IOS (simulator)
$ npm run ios
# Android (connected device)
$ npm run android

2. Material Kit React

  • Installing the Material Kit
npm install @material-ui/core
  • Implementation

import React from 'react';
import Button from '@material-ui/core/Button';

const App = () => (
  <Button variant="contained" color="primary">
    Hello World

3. Shards React

This modern React UI kit has been built from scratch to achieve fast performance.

# Yarn
yarn add shards-react

npm i shards-react

4. Styled Components

This efficient CSS tool helps build small, reusable components that are responsible for an app's visual interface. With traditional CSS, you can accidentally overwrite the selectors used in other places on the website, but Styled Components can help you completely avoid this problem by using a CSS syntax directly inside your components.

npm install --save styled-components
  • Implementation
const Button = styled.button`
  background: background_type;
  border-radius: radius_value;
  border: abc;
  color: name_of_color;
  Margin: margin_value;
  padding: value;

5. Redux

Redux is a state-management solution for JavaScript applications. While it is mostly used for React.js, you can also use it for other React-like frameworks.

  • Installation
sudo npm install redux
sudo npm install react-redux
  • Implementation
import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";

function configureStore(state = { rotating: value}) {
  return createStore(rotateReducer,state);

export default configureStore;

6. React Virtualized


npm install react-virtualized


import 'react-virtualized/styles.css'
import { Column, Table } from 'react-virtualized'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import List from 'react-virtualized/dist/commonjs/List'
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',

7. React DnD

ReactDnD is responsible for the creation of complex drag-and-drop interfaces. Installation

npm install react-dnd-preview


import Preview from 'react-dnd-preview';

  const generatePreview = ({itemType, item, style}) => {
    return <div class="item-list" style={style}>{itemType}</div>;

  class App extends React.Component {

    render() {
      return (
        <DndProvider backend={MyBackend}>
          <ItemList />
          <Preview generator={generatePreview} />
          // or

8. React Bootstrap

This UI Kit library replaces Bootstrap's JavaScript with React, giving you more control over the functions of each component. Because each component is built to be easily accessible, React Bootstrap can be beneficial for frontend framework building. There are thousands of bootstrap themes to choose from.

npm install react-bootstrap bootstrap


import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

9. React Suite

npm i rsuite --save


import { Button } from 'rsuite';
import 'rsuite/styles/less/index.less';
ReactDOM.render(<Button>Button</Button>, mountNode);

10. PrimeReact

npm install primereact --save
npm install primeicons --save


import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';
dependencies: {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-transition-group": "^2.2.1",
    "classnames": "^2.2.5",
    "primeicons": "^2.0.0"

11. React Router

React Router is quite popular in the React Native developer community because it is very easy to start working with.

npm install --save react-router


import { Router, Route, Switch } from "react-router";

// using CommonJS modules
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var Switch = require("react-router").Switch;

12. Grommet

O Grommet é usado para criar aplicativos Web móveis e responsivos e acessíveis. A melhor coisa sobre essa estrutura JavaScript licenciada pelo Apache 2.0 é que ela oferece acessibilidade, modularidade, capacidade de resposta e temas em um pequeno pacote. Talvez esse seja um dos principais motivos pelos quais é amplamente usado por empresas como Netflix, GE, Uber e Boeing.

  • Installation for yarn and npm
npm install grommet styled-components --save

13. Onsen UI

Onsen UI is another mobile app development framework that uses HTML5 and JavaScript and offers integration with Angular, Vue, and React. It is licensed under Apache 2.0.

npm install onsenui


(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
      // more to come here