如果你正在使用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
- 带有配置包、转译器和测试器的一流开发工具
- 应用结构中没有配置,也没有多余的文件。
- 稳固的开发栈。
- 行之有效的快速开发工具。
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
优点
- Shards是轻量化设计的,体积很小,gzip压缩最小化后只有大约13kb
- Shards天生就是响应设计,所以其布局可以适应任何屏幕尺寸,针对不同的显示大小重排版内容。
- Shards的文档很完善,因此你可以很快开始构建漂亮的界面。
4.Styled Components
这款高效的CSS工具可以帮助你构建用于应用可视界面的小巧、可重用的组件。使用传统的CSS时,你可能会意外覆盖网站上其他位置用到的选择器,但是Styled Components(https://github.com/styled-components/styled-components)可以直接在你的组件内部使用CSS语法,从而帮助你完全避免此类问题的困扰。