乐趣区

关于react.js:必须收藏这13个优秀React-JS框架没用过就很离谱

jiezi

如果你正在应用 React.js 或 React Native 创立用户界面，能够试一试本文举荐的这些框架。

React.js 和 React Native 是风行的用户界面（UI）开发平台，且都是开源技术。在 StackOverflow 的 2019 年开发人员考察中，它们在冀望度和使用率方面都有很高的排名。React.js 是 Facebook 在 2011 年作为一个 JavaScript 库开发而成的，目标是满足跨平台、动静和高性能 UI 的需要；而 Facebook 在 2015 年公布的 React Native 则是用来基于 JavaScript 构建原生应用程序的。

上面列举了 13 个精选的 React JavaScript 框架；它们全都是开源的——前 11 个（就像 React 那样）是依据 MIT 许可受权的，后两个则是依据 Apache 2.0 受权。

1.Creat React App

由 Facebook 开发人员带来的这款命令行界面是所有 React Native 我的项目的必备框架。因为 Create React App（https://github.com/facebook/create-react-app）易于应用，让你省掉了手动设置和配置利用的麻烦，从而节俭了大量工夫和精力。

只需一条简略的命令，所有就都准备就绪，你就能轻松创立 React Native 我的项目了。你能够用它来构建目录和文件，该框架还包含用于构建、测试和公布应用程序的工具。

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

为什么抉择 Create React App
  1. 带有配置包、转译器和测试器的一流开发工具
  2. 利用构造中没有配置，也没有多余的文件。
  3. 巩固的开发栈。
  4. 卓有成效的疾速开发工具。

2.Material Kit React

Material Kit React（https://github.com/creativetimofficial/material-kit-react）受到了谷歌的 Material Design 零碎启发，是构建 React UI 组件的绝佳抉择。这个库最大的长处是它提供了许多组件，这些组件能够组合在一起生成难以置信的成果。库中有超过 1000 个齐全编码的组件，每个组件都有独自的层，这些层都在文件夹中分门别类组织好了。这意味着你有着成千上万种抉择。如果你想获取灵感，或与某人分享想法或概念，也有几个示例页面可用。

装置 Material Kit

$ npm install @material-ui/core

实现

import React from ‘react’; import Button from ‘@material-ui/core/Button’; const App = () => (   <Button variant=”contained” color=”primary”>     Hello World   </Button>);

Material-UI 组件无需任何额定设置即可工作，并且不会净化全局域。

长处

这款 React 组件能够反对更轻松、更疾速的 Web 开发流程。有了它，你能够构建本人的设计零碎，或者先从 Material Design 开始上手。

3.Shards React

这款古代 React UI 套件是为了实现高性能而从零开始打造的。它有着现代化的设计零碎，让你能够依照须要的形式自定义事物。你甚至能够下载源文件来在代码级别自定义内容。此外，用于款式的 SCSS 语法能够晋升开发体验。

Shards React（https://github.com/DesignRevision/shards-react）是基于 Shards 的，并应用了 React Datepicker、React Popper（定位引擎）和 noUISlider。它还提供了十分棒的 Material Design 图标。还有一些预制的版本能够帮忙你取得灵感和上手入门。

用 Yarn 或 NPM 装置 Shards

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

长处
  1. Shards 是轻量化设计的，体积很小，gzip 压缩最小化后只有大概 13kb
  2. Shards 天生就是响应设计，所以其布局能够适应任何屏幕尺寸，针对不同的显示大小重排版内容。
  3. Shards 的文档很欠缺，因而你能够很快开始构建丑陋的界面。

4.Styled Components

这款高效的 CSS 工具能够帮忙你构建用于利用可视界面的玲珑、可重用的组件。应用传统的 CSS 时，你可能会意外笼罩网站上其余地位用到的选择器，然而 Styled Components（https://github.com/styled-components/styled-components）能够间接在你的组件外部应用 CSS 语法，从而帮忙你完全避免此类问题的困扰。

装置

npm install –save styled-components

实现

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

长处
  1. 使组件更具可读性。
  2. 组件的款式依赖于 JavaScript。
  3. 应用 CSS 构建自定义组件。
  4. 内联款式。
  5. 只需调用 styled()，即可将组件（甚至是自定义组件）转换为款式化组件。

5.Redux

Redux（https://github.com/reduxjs/redux）是 JavaScript 应用程序的一个状态治理解决方案。尽管它次要用于 React.js，然而你也能够将它用在其余相似 React 的框架上。

装置

sudo npm install redux sudo npm install react-redux

实现

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

长处
  1. 可预测的状态更新有助于定义应用程序的数据流。
  2. 有了 reducer 函数，逻辑更易于测试和工夫旅行调试。
  3. 状态集中管理。

6.React Virtualized

这个 React Native JavaScript 框架可用于大列表和表格数据的渲染。应用 React Virtualized（https://github.com/bvaughn/react-virtualized），你能够限度申请和文档对象模型（DOM）元素的数量，从而晋升 React 应用程序的性能。

装置

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’,},   …rest }

长处
  1. 高效显示大量数据。
  2. 渲染微小的数据集。
  3. 应用一组组件实现虚构渲染。

7.React DnD

ReactDnD（https://github.com/react-dnd/react-dnd/）负责创立简单的拖放界面。市面上的拖放库有几十种之多，但 React DnD 之所以能怀才不遇，是因为它构建在古代 HTML5 的拖放 API 之上，简化了创立接口的过程。

装置

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           <Preview>{generatePreview}</Preview>         </DndProvider>       );     }   }

长处
  1. 元素拖动优雅天然。
  2. 弱小的键盘和屏幕阅读器反对。
  3. 性能杰出。
  4. 洁净而弱小的 API。
  5. 在规范的浏览器交互中施展杰出。
  6. 未经润饰的款式。
  7. 没有创立额定的包装器 dom 节点。

8.React Bootstrap

这款 UI Kit 库用 React 替换了 Bootstrap 的 JavaScript，让你能够更好地管制每个组件的函数。因为每个组件都用易于拜访的形式构建，所以用 React Bootstrap（https://github.com/react-bootstrap/react-bootstrap）构建前端框架是很好用的。有成千上万的疏导主题可供选择。

装置

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’)); registerServiceWorker();

长处
  1. 能够轻松导入所需的代码 / 组件。
  2. 通过压缩 Bootstrap 来节俭代码、缩小谬误。
  3. 通过压缩 Bootstrap 缩小输出工作和抵触。
  4. 用起来很简略。
  5. 它封装在元素中。

9.React Suite

React Suite（https://github.com/rsuite/rsuite）是又一款高效的 React.js 框架，其中蕴含用于企业零碎产品的多种组件库。它反对所有支流浏览器和平台，使其实用于简直任何零碎。它还反对服务端渲染。

装置

npm i rsuite –save

实现

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

长处
  1. 借助全局拜访性能，轻松管理应用程序。
  2. Redux 库集中了状态治理操作。
  3. Redux 很灵便，它有所有的 UI 层，并有着宏大的生态系统。
  4. Redux 升高了复杂性，并提供了全局可拜访性。

10.PrimeReact

PrimeReact（https://github.com/primefaces/primereact）的最大劣势在于，它提供的组件简直能够满足 UI 的所有根本要求，例如输出选项、菜单、数据表示和音讯等。这款框架还非常重视挪动体验，能够帮忙你设计为触控优化的元素。

装置

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

长处
  1. 简略性和性能。
  2. 使用方便。
  3. Spring 应用程序。
  4. 创立丰盛的用户界面。
  5. 可用性和简略性。

11.React Router

React Router（https://github.com/ReactTraining/react-router）在 React Native 开发人员社区中十分风行，因为它很容易上手。你只须要在 PC 上装置 Git 和 npm 软件包管理器，有一些 React 的基本知识以及学习的志愿即可。没有什么太简单的。

装置

$ 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;

长处
  1. 动静路由匹配
  2. 跳转时视图上的 CSS 过渡成果
  3. 标准化的利用构造和行为

12.Grommet

Grommet（https://github.com/grommet/grommet）是用来创立可响应且可拜访的挪动优先 Web 利用的。它是 Apache 2.0 许可的 JavaScript 框架，其最大劣势是它在一个小包中同时提供了可拜访性、模块化、响应性和主题个性。兴许这就是它被 Netflix、GE、Uber 和波音等公司宽泛应用的次要起因之一。

Yarn 和 npm 的装置

$ npm install grommet styled-components –save

实现

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

长处
  1. 一个工具包一站式解决方案
  2. 将开放政策施展到极致
  3. 重构过程对倒退中的组织无益

13.Onsen UI

Onsen UI（https://github.com/OnsenUI/OnsenUI）是另一个应用 HTML5 和 JavaScript 的挪动利用开发框架，并提供与 Angular、Vue 和 React 的集成。它的许可基于 Apache 2.0。

Onsen 提供一些选项卡、一个侧面菜单、堆栈导航和其余组件。这款框架的最大劣势是，它的所有组件都具备 iOS 和 Android Material Design 反对以及主动款式，这样就能依据平台扭转应用程序的外观。

装置

npm install onsenui

实现

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

长处
  1. Onsen UI 的代码收费且开源。
  2. 它不要求用它开发的利用强制应用任何类型的 DRM。
  3. 编译 JavaScript 和 HTML5 代码。
  4. 为终端用户提供原生体验。

结尾

本期就分享到这里，我是小编南风吹，专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源！心愿能与大家独特学习交换, 欢送关注我的公众号 【Github 导航站】。

往期举荐

3000 多人拜访一个 html 文件，多少宽带才足够撑持

程序员接私活必备后盾框架，不必反复造轮子，网友：太好用了！

还在从头到尾撸我的项目？这 6 个 SpringBoot 我的项目用好了，事倍功半！

厉害了, 这款程序员代码补全工具，让你的编程效率飞起来！

退出移动版