如果您正在使用React.js或React Native创建用户界面，可以尝试本文推荐的这些框架。

React.js和React Native是流行的用户界面(UI)开发平台，它们都是开源技术。在StackOverflow的2019年开发者调查中，他们在期望和使用方面排名很高。React.js是脸书在2011年开发的Javascript库，以满足跨平台、动态、高性能UI的需求；脸书在2015年发布的React Native用于构建基于Javascript的原生应用。

以下是13个精选的React Javascript框架，全部开源。前11个(就像React一样)是在MIT许可下授权的，而后两个是在Apache 2.0下授权的。

1.Creat React App

这个由脸书开发者带来的命令行界面是所有React原生项目的基本框架。因为Create React App简单易用，省去了你手动设置和配置应用的麻烦，从而节省了大量的时间和精力。

通过一个简单的命令，一切都准备好了，您可以轻松地创建一个React原生项目。您可以使用它来构建目录和文件，该框架还包括用于构建、测试和发布应用程序的工具。

#安装包$ NPM Install-g create-react-native-we b-app # Run create-react-native-we b-app & lt；项目目录& gt$ create-react-native-we B- app myApp # CD到您的& lt项目目录& gtnbspcdapp # run web/IOs/Android development # web $ npmrunnweb # IOs(模拟器)$ npmrunnios # android(连接设备)$ npmrunnandroid为什么选择创建React App？

带有配置包、转译器和测试器的一流开发工具应用结构中没有配置，也没有多余的文件。稳固的开发栈。行之有效的快速开发工具。

吉图布:https://github.com/facebook/create-react-app

2.Material Kit React

Material react的灵感来源于Google的Material Design系统，是构建React UI组件的绝佳选择。这个库最大的优点就是提供了很多组件，可以组合起来产生不可思议的效果。库中有超过1000个完全编码的组件，每个组件都有一个单独的层。这些层在文件夹中按类别组织。这意味着你有成千上万的选择。如果您想获得灵感，或者与他人分享想法或概念，也可以使用几个示例页面。

安装材料套件

nbspNPM install @ material-ui/core/core的实现

importReactfrom & # 39反应& # 39；；importButtonfrom & # 39@ material-ui/core/Button & # 39；；constApp =()= & gt；(& ltButtonvariant = & # 34包含& # 34；color = & # 34初级& # 34；& gtHello World & lt/Button & gt；);Material-UI组件无需任何额外设置即可工作，不会污染全局域。

优势

这个React组件可以支持更简单、更快速的Web开发过程。有了它，你可以建立自己的设计体系，或者先从材料设计开始。

吉图布:https://github.com/creativetimofficial/material-kit-react

3.Shards React

这个现代化的React UI套件是从零开始构建的，以实现高性能。它有一个现代化的设计系统，可以让你按照自己需要的方式定制东西。您甚至可以下载源文件，在代码级别定制内容。此外，样式的SCSS语法可以改善开发体验。

Shards React基于Shards，使用React Datepicker、React Popper(定位引擎)和noUISlider。它还提供了一个伟大的材料设计图标。还有一些预制的版本可以帮助你获得灵感并开始使用。

用纱线或NPM安装碎片

# Yarnyarn添加股份-React # npmnpmi股份-React优势

Shards 是轻量化设计的，体积很小，gzip 压缩最小化后只有大约 13kb。Shards 天生就是响应设计，所以其布局可以适应任何屏幕尺寸，针对不同的显示大小重排版内容。Shards 的文档很完善，因此你可以很快开始构建漂亮的界面。

吉图布:https://github.com/DesignRevision/shards-react

4.Styled Components

这个高效的CSS工具可以帮助你构建小型的可重用组件来应用可视化界面。当使用传统的CSS时，您可能会意外地覆盖网站上其他地方使用的选择器，但样式化的组件可以直接在组件内部使用CSS语法，从而帮助您完全避免此类问题。

固定

NP install-save styled-components的实现

const button = styled . button ` background:background _ type；border-radius:半径值；边框:abc颜色:name _ of _ colormargin:margin _ value；填充:值；优势

使组件更具可读性。组件的样式依赖于 Javascript。使用 CSS 构建自定义组件。内联样式。只需调用 styled()，即可将组件（甚至是自定义组件）转换为样式化组件。

吉图布:https://github.com/styled-components/styled-components

5.Redux

Redux是Javascript应用程序的状态管理解决方案。虽然主要用于React.js，但是也可以在其他类似React的框架中使用。

固定

sudo npminstallredux的实现

从& # 34；导入{ createStore };redux & # 34；importrotateReducerfrom & # 34减速器/旋转减速器& # 34；；functionconfigureStore(state = { rotating:value }){ returncreateStore(rotateReducer，state)；} exportdefaultconfigureStore优势

可预测的状态更新有助于定义应用程序的数据流。有了 reducer 函数，逻辑更易于测试和时间旅行调试。状态集中管理。

吉图布:https://github.com/reduxjs/redux

6.React Virtualized

这个React本地Javascript框架可用于呈现大型列表和表格数据。使用React虚拟化，您可以限制请求和文档对象模型(DOM)元素的数量，从而提高React应用程序的性能。

固定

npminstallreact-虚拟化的实现

进口& # 39；react-virtualized/styles . CSS & # 39；从& # 39；导入{列，表格};react虚拟化& # 39；importAutoSizerfrom & # 39react-virtualized/dist/commonjs/auto sizer & # 39；importListfrom & # 39react-virtualized/dist/commonjs/List & # 39；{别名:{ & # 39；react-虚拟化/列表& # 39；:'react-虚拟化/dist/es/List & # 39；, }, ...rest}优势

高效显示大量数据。渲染巨大的数据集。使用一组组件实现虚拟渲染。

吉图布:https://github.com/bvaughn/react-virtualized

7.React DnD

ReactDnD负责创建复杂的拖放界面。市场上有几十个拖放库，但React DnD脱颖而出，因为它建立在现代HTML5的拖放API上，并简化了创建界面的过程。

固定

npstallreact-dnd-preview的实现

importPreviewfrom & # 39react-dnd-preview & # 39；；constgeneratePreview =({ item type，item，style })= & gt；{ return & ltdivclass = & # 34项目列表& # 34；style = { style } & gt{ itemType } & lt/div & gt；；};classAppextendsReact。组件{...render(){ return(& lt；dndproviderbend = { my back end } & gt；& ltItemList/>& ltpreview generator = { generate preview }/& gt；//或者& lt预览& gt{ generatePreview } & lt/Preview & gt；& lt/dnd provider & gt；);}}优势

元素拖动优雅自然。强大的键盘和屏幕阅读器支持。性能出色。干净而强大的 API。在标准的浏览器交互中发挥出色。未经修饰的样式。没有创建额外的包装器 dom 节点。

吉图布:https://github.com/react-dnd/react-dnd/

8.React Bootstrap

这个UI Kit库用React代替了Bootstrap的Javascript，让你可以更好的控制各个组件的功能。因为每个组件都是以易于访问的方式构建的，所以用React Bootstrap构建前端框架非常有用。有数以千计的引导主题可供选择。

固定

npstallreact-bootstrap引导程序的实现

进口& # 39；bootstrap/dist/CSS/bootstrap . min . CSS & # 39；；importReactfrom & # 39反应& # 39；；importReactDOMfrom & # 39react-DOM & # 39；；进口& # 39；。/index . CSS & # 39；；importAppfrom & # 39。/App & # 39；；importregisterServiceWorkerfrom & # 39；。/registerServiceWorker & # 39；；react DOM . render(& lt；app/& gt；，document . getelementbyid(& # 39；根& # 39；));registerServiceWorker()；优势

可以轻松导入所需的代码 / 组件。通过压缩 Bootstrap 来节省代码、减少错误。通过压缩 Bootstrap 减少输入工作和冲突。用起来很简单。它封装在元素中。

吉图布:https://github.com/react-bootstrap/react-bootstrap

9.React Suite

React Suite是React.js的另一个高效框架，包含各种企业系统产品的组件库。它支持所有主流浏览器和平台，几乎适用于任何系统。它还支持服务器端渲染。

固定

实施NPI r套件-保存

从& # 39；导入{ Button };rsuite & # 39；进口& # 39；rsuite/styles/less/index . less & # 39；；react DOM . render(& lt；Button & gt按钮& lt/Button & gt；，mount node)；优势

借助全局访问功能，轻松管理应用程序。Redux 库集中了状态管理操作。Redux 很灵活，它有所有的 UI 层，并有着庞大的生态系统。Redux 降低了复杂性，并提供了全局可访问性。

吉图布:https://github.com/rsuite/rsuite

10.PrimeReact

PrimeReact最大的优势就是它提供的组件可以满足UI几乎所有的基本需求，比如输入选项、菜单、数据表示、消息等。这个框架还非常重视移动体验，它可以帮助你作为触摸优化的元素进行设计。

固定

minstallprimeact-保存NPM安装主图标-保存实现

从& # 39；导入{ Dialog };prime react/dialog & # 39；；从& # 39；导入{Accordion，AccordionTab };prime react/手风琴& # 39；；依赖关系:{ & # 34；做出反应& # 34；:"^16.0.0","react-DOM & # 34；:"^16.0.0","react-transition-group & # 34；:"^2.2.1","类名& # 34；:"^2.2.5","primeicons & # 34:"^2.0.0"}优势

简单性和性能。使用方便。Spring 应用程序。创建丰富的用户界面。可用性和简单性。

吉图布:https://github.com/primefaces/primereact

11.React Router

React路由器在React原生开发者社区非常受欢迎，因为它很容易上手。你只需要在PC上安装Git和npm包管理器，有一些React的基础知识和学习的意愿。没有什么太复杂的。

固定

$ NPM安装-保存反应-路由器的实现

从& # 34；导入{路由器、路由、交换机};react-路由器& # 34；；//使用CommonJS模块var Router = require(& # 34；react-路由器& # 34；).路由器；var Route = require(& # 34；react-路由器& # 34；).路线；var Switch = require(& # 34；react-路由器& # 34；).开关；优势

动态路由匹配。跳转时视图上的 CSS 过渡效果。标准化的应用结构和行为。

吉图布:https://github.com/ReactTraining/react-router

12.Grommet

Grommet用于创建响应迅速且可访问的移动优先Web应用程序。它是由Apache 2.0许可的Javascript框架。它最大的优点是在一个小的包中提供了可访问性、模块化、响应性和主题特性。也许这是它被网飞、通用电气、优步和波音公司广泛使用的主要原因之一。

纱线和npm安装

实现$ npminstallgrommet styled-components-save

"索环控制/图表& # 34；: {"转换& # 34；:"grommet-controls/es6/chart js/$ { member } & # 34；,"preventFullimport & # 34:真的，& # 34；skipDefaultConversion & # 34:真正的优势

一个工具包一站式解决方案。将开放政策发挥到极致。重构过程对发展中的组织有益。

吉图布:https://github.com/grommet/grommet

13.onsen UI

Onsui是另一个使用HTML5和Javascript的移动应用开发框架，并提供了与Angular、Vue和React的集成。它的许可证基于Apache 2.0。

Onsen提供了一些选项卡、侧菜单、堆栈导航和其他组件。这个框架最大的优点是其所有组件都有iOS和Android材质设计支持和自动样式，可以根据平台改变应用的外观。

固定

npminstallonsenui的实现

(function(){ & # 39；使用严格的& # 39；；var module = angular . module(& # 39；app & # 39, ['温泉& # 39；]);module . controller(& # 39；AppController & # 39，function($scope){//更多来这里})；})();优势

onsen UI 的代码免费且开源。它不要求用它开发的应用强制使用任何类型的 DRM。编译 Javascript 和 HTML5 代码。为终端用户提供原生体验。

吉图布:https://github.com/OnsenUI/OnsenUI

原文地址:https://dzone . com/articles/13-of-the-best-react-Javascript-frameworks