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 易于运用，让你省掉了手动设置和配置运用的费事，从而节省了少量时间和精神。

只需一条复杂的命令，一切就都预备就绪，你就能轻松创立 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 遭到了谷歌的 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 是基于 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 可以直接在你的组件外部运用 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 

完成：

(责任编辑：admin)