If you’re using React. Js or React Native to create user interfaces, try out the frameworks recommended in this article.

React. Js and React Native are popular user interface (UI) development platforms, and both are open source technologies. They ranked highly in both expectations and usage in StackOverflow’s 2019 Developer Survey. React. Js was developed by Facebook in 2011 as a JavaScript library to meet the needs of a cross-platform, dynamic, and high-performance UI; Facebook’s React Native, released in 2015, was designed to build Native apps based on JavaScript.

Here are 13 of the best React JavaScript frameworks; They are all open source — the first 11 (like React) are licensed under the MIT license, and the last two are licensed under Apache 2.0.

1.Creat React App

The command line interface, brought by Facebook developers, is a must-have framework for any React Native project. Create React App (github.com/facebook/cr…

With a simple command, you’ll be ready to create React Native projects. You can use it to build directories and files, and the framework includes tools for building, testing, and publishing applications.

# 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
Copy the code
Why choose Create React App
  1. First-class development tools with configuration packs, translators, and testers
  2. There are no configurations and no redundant files in the application structure.
  3. Solid development stack.
  4. Proven fast development tools.

2.Material Kit React

Material Kit React (github.com/creativetim… The Design system is a great choice for building React UI components. The greatest advantage of this library is that it provides many components that can be combined to produce incredible effects. There are more than 1000 fully coded components in the library, each with its own layer, organized in folders. That means you have thousands of choices. If you want to get inspired, or share ideas or concepts with someone, there are also several sample pages available.

Material installation Kit
$ npm install @material-ui/core
Copy the code
implementation
import React from 'react'; import Button from '@material-ui/core/Button'; const App = () = > (   <Button variant="contained" color="primary">     Hello World   </Button> );
Copy the code

The Material-UI component works without any additional setup and does not pollute the entire domain.

advantages

The React component enables an easier and faster Web development process. With it, you can build your own Design system or start with Material Design.

3.Shards React

The modern React UI suite was built from scratch for high performance. It has a modern design system that allows you to customize things the way you need them. You can even download source files to customize content at the code level. In addition, SCSS syntax for styles can enhance the development experience.

Shards React (github.com/DesignRevis… Datepicker, React Popper, and noUISlider. It also provides great Material Design ICONS. There are also pre-made versions to help you get inspired and get started.

Install Shards using Yarn or NPM
# Yarn yarn add shards-react # NPM npm i shards-react
Copy the code
advantages
  1. Shards is designed to be lightweight and compact, only about 13KB when gZIP compression is minimized
  2. Shards is inherently responsive, so its layout can be adapted to any screen size, rearranging content for different display sizes.
  3. Shards is well documented, so you can quickly start building beautiful interfaces.

4.Styled Components

This efficient CSS tool helps you build small, reusable components for your application’s visual interface. Using traditional CSS, you may accidentally overwrite selectors used elsewhere on the site, but the Styled Components (github.com/styled-comp…

The installation
npm install --save styled-components
Copy the code
implementation
const Button = styled.button` background: background_type; border-radius: radius_value; border: abc; color: name_of_color; Margin: margin_value; padding: value;Copy the code
advantages
  1. Make components more readable.
  2. The style of the component depends on JavaScript.
  3. Use CSS to build custom components.
  4. Inline style.
  5. Components (and even custom components) can be converted to styled components simply by calling Styled ().

5.Redux

Redux (github.com/reduxjs/red…

The installation
sudo npm install redux sudo npm install react-redux
Copy the code
implementation
import { createStore } from "redux"; import rotateReducer from "reducers/rotateReducer"; function configureStore(state = { rotating: value}) {   return createStore(rotateReducer,state); } export default configureStore;
Copy the code
advantages
  1. Predictable status updates help define the application’s data flow.
  2. With the Reducer function, the logic is easier to test and time travel debugging.
  3. Centralized status management.

6.React Virtualized

The React Native JavaScript framework can be used to render large lists and tables. Using React Virtualized (github.com/bvaughn/rea…

The installation
npm install react-virtualized
Copy the code
implementation
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',},... rest }Copy the code
advantages
  1. Display large amounts of data efficiently.
  2. Render huge data sets.
  3. Virtual rendering using a set of components.

7.React DnD

ReactDnD (github.com/react-dnd/r… DnD stands out because it is built on top of modern HTML5’s drag-and-drop API, simplifying the process of creating interfaces.

The installation
npm install react-dnd-preview
Copy the code
implementation
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           <Preview>{generatePreview}</Preview>         </DndProvider>); }}Copy the code
advantages
  1. Element drag is elegant and natural.
  2. Powerful keyboard and screen reader support.
  3. Excellent performance.
  4. Clean and powerful API.
  5. Performs well in standard browser interaction.
  6. Undecorated style.
  7. No additional wrapper DOM nodes are created.

8.React Bootstrap

React replaces the Bootstrap JavaScript with React, giving you more control over the functions of each component. Because each component is built in an easy-to-access way, use React Bootstrap (github.com/react-boots…

The installation
npm install react-bootstrap bootstrap
Copy the code
implementation
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')); registerServiceWorker();
Copy the code
advantages
  1. You can easily import the required code/components.
  2. Compress Bootstrap to save code and reduce errors.
  3. Reduce input work and collisions by compressing Bootstrap.
  4. It’s easy to use.
  5. It is encapsulated in the element.

9.React Suite

The React Suite (github.com/rsuite/rsui…

The installation
npm i rsuite --save
Copy the code
implementation
import { Button } from 'rsuite'; import 'rsuite/styles/less/index.less'; ReactDOM.render(<Button>Button</Button>, mountNode);
Copy the code
advantages
  1. Easily manage applications with global access.
  2. The Redux library centralizes state management operations.
  3. Redux is flexible, it has all the UI layers, and it has a huge ecosystem.
  4. Redux reduces complexity and provides global accessibility.

10.PrimeReact

PrimeReact (github.com/primefaces/…

The installation
npm install primereact --save npm install primeicons --save
Copy the code
implementation
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." " }
Copy the code
advantages
  1. Simplicity and performance.
  2. Easy to use.
  3. Spring applications.
  4. Create a rich user interface.
  5. Usability and simplicity.

11.React Router

The React the Router (github.com/ReactTraini… Native is very popular with the developer community because it’s so easy to get started. All you need to do is install Git and the NPM package manager on your PC, have a basic knowledge of React, and be willing to learn. Nothing too complicated.

The installation
$ npm install --save react-router
Copy the code
implementation
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;
Copy the code
advantages
  1. Dynamic Route Matching
  2. The CSS transition effect on a view when jumping
  3. Standardization of application structure and behavior

12.Grommet

The Grommet (github.com/grommet/gro… The biggest advantage of a 2.0 licensed JavaScript framework is that it offers accessibility, modularity, responsiveness, and themes all in one small package. Perhaps that’s one of the main reasons it’s widely used by companies like Netflix, GE, Uber, and Boeing.

Install Yarn and NPM
$ npm install grommet styled-components --save
Copy the code
implementation
"grommet-controls/chartjs": {           "transform": "grommet-controls/es6/chartjs/${member}"."preventFullImport": true."skipDefaultConversion": true
Copy the code
advantages
  1. A toolkit one-stop solution
  2. We will exert the open policy to the utmost
  3. The refactoring process is beneficial to a growing organization

13.Onsen UI

Onsen UI (github.com/OnsenUI/Ons… 2.0.

Onsen provides tabs, a side menu, stack navigation, and other components. The biggest advantage of this framework is that all of its components have iOS and Android Material Design support and automatic styling so that you can change the look of your application based on your platform.

The installation
npm install onsenui
Copy the code
implementation
(function() {     'use strict';     var module = angular.module('app'['onsen']);     module.controller('AppController'.function($scope) {       // more to come here }); }) ();
Copy the code
advantages
  1. The code for Onsen UI is free and open source.
  2. It does not require applications developed with it to force DRM of any kind.
  3. Compile JavaScript and HTML5 code.
  4. Provide a native experience for end users.

At the end

This issue is to share here, I am xiaobian South wind blowing, focus on sharing interesting, novel, practical open source projects and developer tools, learning resources! I hope to learn and communicate with you together. Welcome to follow my official account ** [Github navigation station] **.

Phase to recommend

3000 + people accessing an HTML file, how much broadband is enough to support

The programmer connects the private life necessary background frame, need not repeat to build the wheel, net friend: too easy to use!

Still working on the project from start to finish? Use these six SpringBoot projects well, get twice the result with half the effort!

Fierce, this programmer code completion tool, let your programming efficiency fly!