共计 6917 个字符,预计需要花费 18 分钟才能阅读完成。
如果你正在应用 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
- 带有配置包、转译器和测试器的一流开发工具
- 利用构造中没有配置,也没有多余的文件。
- 巩固的开发栈。
- 卓有成效的疾速开发工具。
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
长处
- Shards 是轻量化设计的,体积很小,gzip 压缩最小化后只有大概 13kb
- Shards 天生就是响应设计,所以其布局能够适应任何屏幕尺寸,针对不同的显示大小重排版内容。
- 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;
长处
- 使组件更具可读性。
- 组件的款式依赖于 JavaScript。
- 应用 CSS 构建自定义组件。
- 内联款式。
- 只需调用 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;
长处
- 可预测的状态更新有助于定义应用程序的数据流。
- 有了 reducer 函数,逻辑更易于测试和工夫旅行调试。
- 状态集中管理。
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 }
长处
- 高效显示大量数据。
- 渲染微小的数据集。
- 应用一组组件实现虚构渲染。
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> ); } }
长处
- 元素拖动优雅天然。
- 弱小的键盘和屏幕阅读器反对。
- 性能杰出。
- 洁净而弱小的 API。
- 在规范的浏览器交互中施展杰出。
- 未经润饰的款式。
- 没有创立额定的包装器 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();
长处
- 能够轻松导入所需的代码 / 组件。
- 通过压缩 Bootstrap 来节俭代码、缩小谬误。
- 通过压缩 Bootstrap 缩小输出工作和抵触。
- 用起来很简略。
- 它封装在元素中。
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);
长处
- 借助全局拜访性能,轻松管理应用程序。
- Redux 库集中了状态治理操作。
- Redux 很灵便,它有所有的 UI 层,并有着宏大的生态系统。
- 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”}
长处
- 简略性和性能。
- 使用方便。
- Spring 应用程序。
- 创立丰盛的用户界面。
- 可用性和简略性。
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;
长处
- 动静路由匹配
- 跳转时视图上的 CSS 过渡成果
- 标准化的利用构造和行为
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
长处
- 一个工具包一站式解决方案
- 将开放政策施展到极致
- 重构过程对倒退中的组织无益
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}); })();
长处
- Onsen UI 的代码收费且开源。
- 它不要求用它开发的利用强制应用任何类型的 DRM。
- 编译 JavaScript 和 HTML5 代码。
- 为终端用户提供原生体验。
结尾
本期就分享到这里,我是小编南风吹,专一分享好玩乏味、离奇、实用的开源我的项目及开发者工具、学习资源!心愿能与大家独特学习交换, 欢送关注我的公众号 【Github 导航站】。
往期举荐
3000 多人拜访一个 html 文件,多少宽带才足够撑持
程序员接私活必备后盾框架,不必反复造轮子,网友:太好用了!
还在从头到尾撸我的项目?这 6 个 SpringBoot 我的项目用好了,事倍功半!
厉害了, 这款程序员代码补全工具,让你的编程效率飞起来!