Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what are the React JS frameworks". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what the React JS framework has.

1. Creat React App

This command-line interface brought by Facebook developers is a must-have framework for all React Native projects. Because Create React App is easy to use, it saves you the trouble of setting up and configuring applications manually, thus saving you a lot of time and effort.

With a simple command, everything is ready, and you can easily create a React Native project. You can use it to build directories and files, and the framework also includes tools for building, testing, and publishing applications.

# Install package $npm install-g create-react-native-web-app # Run create-react-native-web-app $create-react-native-web-app myApp # cd into your $cd myApp # Run Web/Ios/Android development # Web $npm run web # IOS (simulator) $npm run ios # Android (connected device) $npm run android

Why choose Create React App:

Best-in-class development tools with configuration packages, translators, and testers

There is no configuration and no extra files in the application structure.

Solid development stack.

An effective rapid development tool.

2. Material Kit React

Material Kit React is inspired by Google's Material Design system and is an excellent choice for building React UI components. The biggest 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 separate layers organized in folders. That means you have thousands of choices. If you want to get inspiration or share ideas or concepts with someone, there are also several sample pages available.

Install Material Kit:

$npm install @ material-ui/core

Achieve:

Import React from 'react'; import Button from' @ material-ui/core/Button'; const App = () = > (Hello World)

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

Advantages:

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

3. Shards React

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

Shards React is based on Shards and uses React Datepicker, React Popper (location engine), and noUISlider. It also provides a great Material Design icon. There are also some prefabricated versions that can help you get inspired and get started.

Install Shards with Yarn or NPM:

# Yarn yarn add shards-react # NPM npm i shards-react

Advantages:

Shards is lightweight and small in size, with only about 13kb after gzip compression is minimized.

Shards is inherently responsive, so its layout can be adapted to any screen size and rearrange content for different display sizes.

Shards's documentation is complete, so you can quickly start building a beautiful interface.

4. Styled Components

This efficient CSS tool can help you build small, reusable components for the visual interface of your application. When using traditional CSS, you may accidentally override selectors used elsewhere on the site, but Styled Components can use CSS syntax directly inside your components to help you avoid such problems completely.

Installation:

Npm install-save styled-components

Achieve:

Const Button = styled.button`background: background_type; border-radius: radius_value; border: abc; color: name_of_color; Margin: margin_value; padding: value

Advantages:

Make the components more readable.

The style of the component depends on JavaScript.

Use CSS to build custom components.

Inline style.

Simply call styled () to convert a component (or even a custom component) to a styled component.

5. Redux

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

Installation:

Sudo npm install redux sudo npm install react-redux

Achieve:

Import {createStore} from "redux"; import rotateReducer from "reducers/rotateReducer"; function configureStore (state = {rotating: value}) {return createStore (rotateReducer,state);} export default configureStore

Advantages:

Predictable status updates help define the data flow of the application.

With the reducer function, logic is easier to test and time travel to debug.

Centralized management of status.

6. React Virtualized

This React Native JavaScript framework can be used to render large list and tabular data. With React Virtualized, you can improve the performance of React applications by limiting the number of request and document object Model (DOM) elements.

Installation:

Npm install react-virtualized

Achieve:

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}

Advantages:

Display large amounts of data efficiently.

Render a huge dataset.

Use a set of components to achieve virtual rendering.

7. React DnD

ReactDnD is responsible for creating complex drag-and-drop interfaces. There are dozens of drag-and-drop libraries on the market, but React DnD stands out because it is built on the drag-and-drop API of modern HTML5 and simplifies the process of creating interfaces.

Installation:

Npm install react-dnd-preview

Achieve:

Import Preview from 'react-dnd-preview'; const generatePreview = ({itemType, item, style}) = > {return {itemType};}; class App extends React.Component {... Render () {return (/ / or {generatePreview});}}

Advantages:

Elements drag gracefully and naturally.

Powerful keyboard and screen reader support.

Excellent performance.

Clean and powerful API.

Perform well in standard browser interactions.

An unretouched style.

No additional wrapper dom node was created.

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 in an easily accessible way, it is easy to use React Bootstrap to build a front-end framework. There are thousands of guided topics to choose from.

Installation:

Npm install react-bootstrap bootstrap

Achieve:

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 (, document.getElementById ('root')); registerServiceWorker ()

Advantages:

You can easily import the required code / components.

Save code and reduce errors by compressing Bootstrap.

Reduce input work and conflicts by compressing Bootstrap.

It's easy to use.

It is encapsulated in an element.

9. React Suite

React Suite is another efficient React.js framework, which contains a variety of component libraries for enterprise system products. It supports all major browsers and platforms, making it suitable for almost any system. It also supports server-side rendering.

Installation:

Npm i rsuite-save

Achieve:

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

Advantages:

Easily manage applications with global access.

The Redux library centralizes state management operations.

Redux is flexible, it has all the UI layers and has a huge ecosystem.

Redux reduces complexity and provides global accessibility.

10. PrimeReact

The biggest advantage of PrimeReact is that it provides components that meet almost all the basic requirements of UI, such as input options, menus, data representations, messages, and so on. The framework also attaches great importance to the mobile experience and can help you design elements that are optimized for touch.

Installation:

Npm install primereact-save npm install primeicons-save

Achieve:

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"}

Advantages:

Simplicity and performance.

Easy to use.

Spring application.

Create a rich user interface.

Availability and simplicity.

11. React Router

React Router is very popular in the React Native developer community because it is easy to use. You only need to install Git and npm package manager on PC, have some basic knowledge of React and willingness to learn. It's nothing too complicated.

Installation:

$npm install-save react-router

Achieve:

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

Advantages:

Dynamic route matching.

The CSS transition effect on the view when you jump.

Standardized application structure and behavior.

12. Grommet

Grommet is used to create responsive and accessible mobile first Web applications. It is an Apache 2.0 licensed JavaScript framework, and its biggest advantage is that it provides both accessibility, modularity, responsiveness, and thematic features in a single package. Perhaps this is one of the main reasons why it is widely used by companies such as Netflix, GE, Uber and Boeing.

Installation of Yarn and npm:

$npm install grommet styled-components-save

Achieve:

"grommet-controls/chartjs": {"transform": "grommet-controls/es6/chartjs/$ {member}", "preventFullImport": true, "skipDefaultConversion": true

Advantages:

A toolkit one-stop solution.

Give full play to the open policy.

The refactoring process is beneficial to developing organizations.

13. Onsen UI

Onsen UI is another mobile application development framework that uses HTML5 and JavaScript and provides integration with Angular, Vue and React. Its license is based on Apache 2.0.

Onsen provides tabs, a side menu, stack navigation, and other components. The biggest advantage of this framework is that all its components have iOS and Android Material Design support and automatic styling, so that the appearance of the application can be changed according to the platform.

Installation:

Npm install onsenui

Achieve:

(function () {'use strict'; var module = angular.module (' app', ['onsen']); module.controller (' AppController', function ($scope) {/ / more to come here});}) ()

Advantages:

The code for Onsen UI is free and open source.

It does not require applications developed with it to force the use of any type of DRM.

Compile JavaScript and HTML5 code.

Provide a native experience for end users.

At this point, I believe you have a deeper understanding of "what is the React JS framework?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.