如果您正在使用React.js或ReactNative开发用户界面，请尝试这些框架。React.js和ReactNative都是用于开发用户界面(UI)的流行开源平台。在StackOverflow的2019年度开发人员调查中，这两个框架的受欢迎程度和使用率都名列前茅。React.js是Facebook于2011年开发的一个JavaScript库，用于实现跨平台、动态和高性能的UI设计需求；而ReactNative是Facebook于2015年发布的框架，用于使用JavaScript构建原生应用程序。这里有13个最好的ReactJavaScript框架，它们都是开源项目。前11个（如React）在MIT许可下获得许可，后两个在Apache2.0许可下获得许可。1.CreateReactApp，Facebook开发的命令行工具，ReactNative项目必备。因为CreateReactApp简单易用，也免去了你自己手动设置和配置应用程序的麻烦，从而节省了大量的时间和精力。只需一个简单的命令，即可为您准备好创建ReactNative项目所需的一切。您可以使用它来创建类别和文件，并且该框架附带用于构建、测试和启动应用程序的工具。#安装包$npminstall-gcreate-react-native-web-app#运行create-react-native-web-app<项目目录>$create-react-native-web-appmyApp#切换到创建的<项目目录>$cdmyApp#RunWeb/Ios/AndroidDebug#Web$npmrunweb#IOS（模拟）$npmrunios#Android（实际连接的设备）$npmrunandroid为什么选择CreateReactApp使用配置包，首先转码器和测试运行器开发类工具应用架构中无需配置，无需额外文件确定开发栈高效快速的开发工具2.MaterialKitReactMaterialKitReact灵感来自谷歌的MaterialDesign系统，非常适合创建反应UI组件。这个库最大的优点就是提供了大量的组件，可以相互搭配产生非常好的效果。有超过一千个完全编码的组件，每个组件都有用文件夹组织的单独层。通过这种方式，您可以从数千个选项中进行选择。它还包括示例页面，您可以在其中找到灵感或与他人分享您的想法或想法。安装MaterialKit$npminstall@material-ui/coreuseimportReactfrom'react';从“@material-ui/core/Button”导入按钮；constApp=()=>(你好世界);Material-UI组件不需要额外的设置，也不会干扰全局变量空间。优点这个React组件支持简单快速的Web开发。您可以使用它来创建自己的设计系统，或者直接开始使用MaterialDesign。3.ShardsReact，一个现代的ReactUI工具，自底向上构建，追求高效。它具有现代设计系统，可让您根据需要对其进行自定义。您甚至可以下载源文件并从代码级别进行自定义。此外，其用于样式化的SCSS语法改善了开发体验。ShardsReact基于Shards，使用ReactDatepicker、ReactPopper（一种定位引擎）和noUISlider。还带有非常漂亮的MaterialDesign图标。还有许多设计版本可以帮助您找到灵感或入门。使用Yarn或NPM安装Shards#Yarnyarnaddshards-react#NPMnpmishards-react优点Shards是一个轻量级的脚本，压缩后大约13kbShards默认支持responsive，layers可以适配任何尺寸的屏幕Shards有完整的Documentation，你可以快速开始构建漂亮的界面4.StyledComponents，一个高效的CSS工具，可以用来为应用程序的可视化界面创建小型可重用组件。使用传统的CSS，您可能会不小心覆盖网站其他地方的选择器，但StyledComponents通过使用直接嵌入到组件中的CSS语法完全避免了这个问题。安装npminstall--savestyled-components以使用constButton=styled.button`background:background_type;边界半径：radius_value；边框：abc；颜色：name_of_color；保证金：margin_value；填充：值`；优点使组件更好组件样式的可读性依赖于JavaScript创建自定义CSS组件内联样式。只需调用styled()即可将组件甚至自定义组件转换为样式化组件。5.ReduxRedux是一个为JavaScript应用程序提供状态管理的解决方案。常用于React.js，也可用于其他React-like框架。安装sudonpminstallreduxsudonpminstallreact-reduxuseimport{createStore}from"redux";从“reducers/rotateReducer”导入rotateReducer；functionconfigureStore(state={rotating:value}){returncreateStore(rotateReducer,state);}exportdefaultconfigureStore;优势可预测的状态更新有助于定义应用程序中的数据流。逻辑测试更容易，使用reducer函数进行时间旅行调试更容易。统一管理状态也更容易。6.ReactVirtualized是一种ReactNativeJavaScript框架，有助于呈现大型列表和表格数据。使用ReactVirtualized，您可以限制请求和文档??对象模型(DOM)元素的数量，从而提高React应用程序的性能。安装npminstallreact-virtualizeduseimport'react-virtualized/styles.css'import{Column,Table}from'react-virtualized'importAutoSizerfrom'react-virtualized/dist/commonjs/AutoSizer'importListfrom'react-virtualized/dist/commonjs/List'{alias:{'react-virtualized/List':'react-virtualized/dist/es/List',},...etc}优点高效展示大量数据渲染超大数据集合使用一系列组件来实现虚拟渲染7.ReactDnDReactDnD用于创建复杂的拖放界面。拖拽控件库很多，选择ReactDnD是因为它基于HTML5拖拽API，更容易创建界面。使用importPreviewfrom'react-dnd-preview'安装npminstallreact-dnd-preview；constgeneratePreview=({itemType,item,style})=>{return{itemType}
