必须收藏！这13个优秀React JS框架，没用过就很离谱！

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

  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（https://github.com/facebook/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

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

2.Material Kit React

  Material Kit React（https://github.com/creativetimofficial/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（https://github.com/DesignRevision/shards-react）是基于Shards的，并使用了React Datepicker、React Popper（定位引擎）和noUISlider。它还提供了非常棒的Material Design图标。还有一些预制的版本可以帮助你获得灵感和上手入门。

用Yarn或NPM安装Shards

# Yarn yarn add shards-react # NPM npm i shards-react

优点

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

4.Styled Components

  这款高效的CSS工具可以帮助你构建用于应用可视界面的小巧、可重用的组件。使用传统的CSS时，你可能会意外覆盖网站上其他位置用到的选择器，但是Styled Components（https://github.com/styled-components/styled-components）可以直接在你的组件内部使用CSS语法，从而帮助你完全避免此类问题的困扰。

安装