React.js和ReactNative是流行的用户界面(UI)开发平台，并且都是开源技术。在StackOverflow的2019年开发人员调查中，它们在期望和使用方面都排名很高。React.js是Facebook于2011年开发的一个JavaScript库，以满足跨平台、动态和高性能UI的需求；而Facebook于2015年发布的ReactNative用于构建基于JavaScript的原生应用程序。下面列出了13个精心挑选的ReactJavaScript框架，它们都是开源的。前11个（如React）在MIT许可证下获得许可，后两个在Apache2.0下获得许可。1.创建ReactApp这个Facebook开发者带来的命令行界面是所有ReactNative项目必备的框架。因为CreateReactApp简单易用，它省去了您手动设置和配置应用程序的麻烦，为您节省了大量的时间和精力。只需一个简单的命令，一切就绪，您可以轻松创建ReactNative项目。您可以使用它来构建目录和文件，该框架还包括用于构建、测试和发布应用程序的工具。#Installpackage$npminstall-gcreate-react-native-web-app#Runcreate-react-native-web-app<项目目录>$create-react-native-web-appmyApp#cdintoyour<项目目录>$cdmyApp#RunWeb/Ios/Androiddevelopment#Web$npmrunweb#IOS(simulator)$npmrunios#Android(connecteddevice)$npmrunandroid为什么选择CreateReactApp：一流的开发工具，有配置bundle、transpiler和testerapplicationstructure没有配置，也没有额外的文件。可靠的开发堆栈。经过验证的快速开发工具。2.MaterialKitReactMaterialKitReact的灵感来自谷歌的MaterialDesign系统，是构建ReactUI组件的绝佳选择。这个库的伟大之处在于它提供了许多组件，这些组件可以组合起来产生令人难以置信的效果。库中有1000多个完全编码的组件，每个组件都有在文件夹中组织的单独层。这意味着您有数以千计的选择。如果您想获得灵感或与他人分享想法或概念，还可以使用几个示例页面。安装材料包：$npminstall@material-ui/core你好世界);Material-UI组件无需任何额外设置即可工作，并且不会污染全局范围。优点：这个React组件可以支持更简单、更快速的Web开发过程。有了它，您可以构建自己的设计系统，或者先开始使用MaterialDesign。3.ShardsReact这个现代的ReactUI工具包是为高性能而重新构建的。它具有现代设计系统，可让您按照自己的方式自定义内容。您甚至可以下载源文件以在代码级别自定义内容。此外，用于样式化的SCSS语法改善了开发体验。ShardsReact基于Shards，使用了ReactDatepicker、ReactPopper（定位引擎）和noUISlider。它还提供了很棒的MaterialDesign图标。还有一些预制构建可以帮助您获得灵感并开始使用。使用Yarn或NPM安装Shards：#Yarnyarnaddshards-react#NPMnpmihards-react优点：Shards采用轻量级设计，体积小，最小化gzip压缩后只有13kb左右。Shards的设计本质上是响应式的，因此它的布局可以适应任何屏幕尺寸，为不同的显示尺寸重置内容。分片有很好的文档记录，因此您可以立即开始构建漂亮的界面。4.样式化组件这个高效的CSS工具可以帮助您为应用程序的可视化界面构建小型、可重用的组件。使用传统CSS时，您可能会不小心覆盖网站其他地方使用的选择器，但StyledComponents可以通过直接在组件内部使用CSS语法来帮助您完全避免此类问题。安装：npminstall--savestyled-components实现：constButton=styled.button`background:background_type;border-radius:radius_value;border:abc;color:name_of_color;Margin:margin_value;padding:value;优点：使组件更具可读性。组件依赖JavaScript进行样式设置。使用CSS构建自定义组件。内联样式。只需调用styled()即可将组件（甚至自定义组件）转换为样式组件。5.ReduxRedux是JavaScript应用程序的状态管理解决方案。虽然它主要用于React.js，但您也可以将它与其他类似React的框架一起使用。安装：sudonpminstallreduxsudonpminstallreact-redux实施：import{createStore}from"redux";importrotateReducerfrom"reducers/rotateReducer";functionconfigureStore(state={rotating:value}){returncreateStore(rotateReducer,state);}exportdefaultconfigureStore;优点：可预测的状态更新有助于定义应用程序的数据流。有了reducer函数，逻辑更容易随着时间旅行进行测试和调试。集中状态管理。6.ReactVirtualized这个ReactNativeJavaScript框架可用于呈现大型列表和表格数据。使用ReactVirtualized，您可以限制请求和文档??对象模型(DOM)元素的数量，从而提高React应用程序的性能。安装：npminstallreact-virtualized实施：import'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',},...rest}优点：高效展示海量数据。渲染庞大的数据集。虚拟渲染是使用一组组件实现的。7.ReactDnDReactDnD负责创建复杂的拖放界面。市面上有几十个拖放库，但ReactDnD脱颖而出，因为它建立在现代HTML5拖放API之上，简化了创建界面的过程。安装：npminstallreact-dnd-preview实施：importPreviewfrom'react-dnd-preview';constgeneratePreview=({itemType,item,style})=>{return
