假如你已经开始用 React.js 或 React Native 来合作开发界面不然，试一试那些架构。
React.js 和 React Native 都是用以合作开发界面（UI）的很畅销的开放源码网络平台。在 StackOverflow 2019 本年度合作开发人员进行调查里，三个架构的单单性和采用情形都名列靠前。React.js 是 Facebook 在 2011 年合作开发的两个 JavaScript 库，来同时实现虚拟化，静态和高效能的 UI 结构设计市场需求；而 React Native 则是 Facebook 在 2015 年正式发布的架构，目地是采用 JavaScript 构筑原生植物应用领域。
上面如是说 13 个最合适的 React JavaScript 架构，都是开放源码工程项目。前 11 个（和 React 那样）都采用 MIT 许可许可，前面三个采用 Apache 2.0 许可。
1、Create React App
那个 Facebook 合作开发的实用性文档辅助工具是 React Native 工程项目很大会用的。即使 Create React App采用很单纯，还能防止你他们全自动预设和实用性应用领域，因而能节约大批的天数和心力。实际上采用给一个单纯的指示，就能为你准备好建立 React 原生植物工程项目所需的所有人。你能用它来建立进行分类和文档，所以该架构还便携式了辅助工具用以构筑，试验和开启应用领域。
# 加装应用软件 $npm install -g create-react-native-web-app # 运转 create-react-native-web-app $ create-react-native-web-app myApp # 转换到建立的 $ cdmyApp # 运转 Web/Ios/Android 增容 # Web $ npm run web # IOS（模拟） $ npm run ios # Android（实际连接的设备） $ npm run android为什么选择 Create React App 采用实用性包、转码器，和试验运转器进行合作开发的一流辅助工具在应用领域架构里不需要实用性和没有额外文档确定的合作开发栈高效快速的合作开发辅助工具2、Material Kit React
Material Kit React是受谷歌的 Material Design 系统启发合作开发的，很适合用以建立 React UI 组件。那个库最大的优点是提供了大批的组件，能互相搭配做出非常好的效果。有超过一千个完全编码的组件，每两个都有用文档夹组织起来的独立层。这样你就能有上千个选项能选择。它同时也包含一些示例页面，方便你从中寻找灵感，或者向别人分享你的点子或创意。
加装 Material Kit$ npm install @material-ui/core 采用import React from react; import Button from @material-ui/core/Button; const App ==> (Material-UI 组件不需要其他额外设置，也不会干扰全局变量空间。
优点那个 React 组件支持简易快速的网页合作开发。你能用它建立他们的结构设计系统，或者直接开始 Material Design。
3、Shards React
那个现代的 React UI 辅助工具为了追求高效率，是从最底层开始构筑的。它拥有现代的结构设计系统，能让你按他们的想法任意定制。你甚至能下载源文件，然后从代码级别定制。另外，它用以结构设计样式的 SCSS 语法提高了合作开发体验。
Shards React基于 Shards，采用了 React Datepicker、React Popper（两个定位引擎）和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多结构设计好的版本，能帮你寻找灵感或上手。
用 Yarn 或 NPM 加装 Shards# Yarn yarn add shards-react # NPM npm i shards-react优点 Shards 是两个轻量级的脚本，压缩后大概 13kbShards 默认支持响应式，图层能适配任意大小屏幕Shards 有完整的文档，能快速开始构筑漂亮的界面4、Styled Components
那个高效的 CSS 辅助工具能用以为应用领域的可视界面建立小型可重用的组件。采用传统的 CSS，你可能会不小心覆盖掉网站其他位置的选择器，但 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是两个为 JavaScript 应用领域提供状态管理的方案。常用于 React.js，也能用在其他类 React 架构里。
加装sudo npm install redux sudo npm install react-redux 采用import { createStore } from “redux”; importrotateReducerfrom “reducers/rotateReducer”; function configureStore(state = { rotating: value}) { returncreateStore(rotateReducer,state); }export defaultconfigureStore; 优点 可预计的状态更新有助于定义应用领域里的数据流逻辑上试验更单纯，采用 reducer 函数进行天数旅行增容也更容易统一管理状态6、React Virtualized
那个 React Native JavaScript 架构帮助渲染 large-list 和 tabular-data。采用 React Virtualized，你能限制请求和文档对象模型（DOM）元素的数量，从而提高 React 应用领域的性能。
加装npminstall 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, }, …等等 } 优点 高效展示大批数据渲染超大数据集采用一系列组件同时实现虚拟渲染7、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{itemType}
; }; class App extends React.Component { … render { return(review generator={generatePreview} />// or <review>{generatePreview}优点 漂亮自然的控件移动强大的键盘和屏幕阅读支持极限性能强大整洁的接口标准浏览器支持非常好中性样式没有额外建立 DOM 节点8、React Bootstrap
那个 UI 库将 Bootstrap 的 JavaScript 替换成了 React，能更好地控制每个组件的功能。每个组件都构筑成能轻易访问，因而 React Bootstrap有利于构筑前端架构。有上千种 bootstrap 主题能选择。
加装npminstall 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(,document.getElementById(root)); registerServiceWorker; 优点 能单纯导入所需的代码/组件通过压缩 Bootstrap 节约了输入和问题通过压缩 Bootstrap 减少了输入工作和冲突采用单纯采用元素封装9、React Suite
React Suite是另两个高效的 React.js 架构，包含了大批组件库，方便合作开发企业级产品。支持所有主流浏览器和网络平台，适用于任何系统。还支持服务器端渲染。
加装npm i rsuite –save 采用import { Button } from rsuite; import rsuite/styles/less/index.less; ReactDOM.render(优点 通过全局访问特性轻松管理应用领域采用 Redux 库集中管理系统状态Redux 库有灵活的 UI 层，和广泛的生态Redux 库减少系统复杂度，并提供了全局访问特性10、PrimeReact
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在 React Native 合作开发社区很畅销，即使它上手很容易。只需要你在电脑上加装 Git 和 npm 包管理辅助工具，有 React 的基础知识，和好学的意愿。没什么特别难的地方。
加装$ npm install –save react-router 采用import { Router, Route, Switch } from “react-router”; // 采用 CommonJS 模块 varRouter =require(“react-router”).Router; var Route = require(“react-router”).Route; var Switch = require(“react-router”).Switch; 优点 静态路由匹配在导航时支持不同页面的 CSS 转换统一的应用领域结构和行为12、Grommet
Grommet常用于合作开发响应式、可访问的移动网页应用领域。那个用 Apache 2.0 许可许可的 JavaScript 架构最大的优点是用很小的包提供了可访问性、模块化、响应式和主题功能。这可能是它被一些公司广泛采用的主要原因，比如奈飞、通用电气、优步和波音。
安装 for yarn and npm$ npminstall grommet styled-components –save 采用“grommet-controls/chartjs”: { “transform”: “grommet-controls/es6/chartjs/${member}“, “preventFullImport”: true, “skipDefaultConversion”: true优点 建立两个辅助工具包来打包把开放政策发挥到极致重构有助于影响已成立的组织13、Onsen UI
Onsen UI另两个采用 HTML5 和 JavaScript 的手机应用领域合作开发架构，集成了 Angular、Vue 和 React，采用 Apache 2.0 许可许可。
Onsen 提供了标签、侧边栏、堆栈导航和其他组件。那个架构最合适的地方是，它所有的组件都支持 iOS 和安卓 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 代码给最终用户带来原生植物体验你最喜欢哪个 React JavaScript 架构？请在评论区分享。
via: https://opensource.com/article/20/1/react-javascript-frameworks
作者：Amit Dua选题：lujun9972译者：zpl1025校对：wxy
本文由 LCTT原创编译，Linux中国荣誉推出
