十三个优秀的 React JavaScript 框架

如果你正在用 React.js 或 React Native 来开发用户界面的话,试试这些框架。 2021-09-18 10:00:24 ReactJavaScript前端 HarmonyOS JS卡片之“星座运势”卡片开发 JSUI部分,主要是一些布局和样式类,是无法进行数据处理的。做一些弱交互的卡片是非常棒的。Java部分主要也就是用到了三个函数。 2021-09-18 09:57:20 鸿蒙HarmonyOS应用 聊聊前后端分离接口规范 本文的主要初衷就是规范约定先行,尽量避免沟通联调产生的不必要的问题,让大家身心愉快地专注于各自擅长的领域。

如果你正在用 React.js 或 React Native 来开发用户界面的话,试试这些框架。

[[424707]]

如果你正在用 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 原生项目所需的一切。你可以用它来创建分类和文件,而且该框架还自带了工具用来构建,测试和启动应用。

  1. # 安装软件包
  2. $ npm install -g create-react-native-web-app
  3. # 运行 create-react-native-web-app <项目目录>
  4. $ create-react-native-web-app myApp
  5. # 切换到创建的 <项目目录>
  6. $ cd myApp
  7. # 运行 Web/Ios/Android 调试
  8. # Web
  9. $ npm run web
  10. # IOS(模拟)
  11. $ npm run ios
  12. # Android(实际连接的设备)
  13. $ npm run android

为什么选择 Create React App

  • 使用配置包、转码器,以及测试运行器进行开发的一流工具
  • 在应用架构里不需要配置以及没有额外文件
  • 确定的开发栈
  • 高效快速的开发工具

2、Material Kit React

Material Kit React是受谷歌的 Material Design 系统启发开发的,很适合用来创建 React UI 组件。这个库最大的优点是提供了大量的组件,可以互相搭配做出非常好的效果。有超过一千个完全编码的组件,每一个都有用文件夹组织起来的独立层。这样你就可以有上千个选项可以选择。它同时也包含一些示例页面,方便你从中寻找灵感,或者向别人分享你的点子或创意。

安装 Material Kit

  1. $ npm install @material-ui/core

使用

  1. import React from 'react';
  2. import Button from '@material-ui/core/Button';
  3. const App = () => (
  4. <Button variant="contained" color="primary">
  5. Hello World
  6. </Button>
  7. );

Material-UI 组件不需要其他额外设置,也不会干扰全局变量空间。

优点

这个 React 组件支持简易快速的网页开发。你可以用它创建自己的设计系统,或者直接开始 Material Design。

3、Shards React

这个现代的 React UI 工具为了追求高效率,是从最底层开始构建的。它拥有现代的设计系统,可以让你按自己的想法任意定制。你甚至可以下载源文件,然后从代码级别定制。另外,它用来设计样式的 SCSS 语法提高了开发体验。

Shards React基于 Shards,使用了 React Datepicker、React Popper(一个定位引擎)和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多设计好的版本,可以帮你寻找灵感或上手。

用 Yarn 或 NPM 安装 Shards

  1. # Yarn
  2. yarn add shards-react
  3. # NPM
  4. npm i shards-react

优点

  • Shards 是一个轻量级的脚本,压缩后大概 13kb
  • Shards 默认支持响应式,图层可以适配任意大小屏幕
  • Shards 有完整的文档,可以快速开始构建漂亮的界面

4、Styled Components

这个高效的 CSS 工具可以用来为应用的可视界面创建小型可重用的组件。使用传统的 CSS,你可能会不小心覆盖掉网站其他位置的选择器,但Styled Components通过使用直接内嵌到组件里的 CSS 语法,可以完全避免这个问题。

安装

  1. npm install --save styled-components

使用

  1. const Button = styled.button`
  2. background: background_type;
  3. border-radius: radius_value;
  4. border: abc;
  5. color: name_of_color;
  6. Margin: margin_value;
  7. padding: value`;

优点

  • 让组件有更好的可读性
  • 组件样式依赖 JavaScript
  • 创建定制 CSS 组件
  • 内嵌样式
  • 简单地调用styled()可以将组件甚至是自定义组件转换成样式组件

5、Redux

Redux是一个为 JavaScript 应用提供状态管理的方案。常用于 React.js,也可以用在其他类 React 框架里。

安装

  1. sudo npm install redux
  2. sudo npm install react-redux

使用

  1. import { createStore } from "redux";
  2. import rotateReducer from "reducers/rotateReducer";
  3. function configureStore(state = { rotating: value}) {
  4. return createStore(rotateReducer,state);
  5. }
  6. export default configureStore;

优点

  • 可预计的状态更新有助于定义应用里的数据流
  • 逻辑上测试更简单,使用 reducer 函数进行时间旅行调试也更容易
  • 统一管理状态

6、React Virtualized

这个 React Native JavaScript 框架帮助渲染 large-list 和 tabular-data。使用React Virtualized,你可以限制请求和文档对象模型(DOM)元素的数量,从而提高 React 应用的性能。

安装

  1. npm install react-virtualized

使用

  1. import 'react-virtualized/styles.css'
  2. import { Column, Table } from 'react-virtualized'
  3. import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
  4. import List from 'react-virtualized/dist/commonjs/List'
  5. {
  6. alias: {
  7. 'react-virtualized/List': 'react-virtualized/dist/es/List',
  8. },
  9. ...等等
  10. }

优点

  • 高效展示大量数据
  • 渲染超大数据集
  • 使用一系列组件实现虚拟渲染

7、React DnD

React DnD用来创建复杂的拖放界面。拖放控件库有很多,选用 React DnD 是因为它是基于 HTML5 的拖放 API 的,创建界面更简单。

安装

  1. npm install react-dnd-preview

使用

  1. import Preview from 'react-dnd-preview';
  2. const generatePreview = ({itemType, item, style}) => {
  3. return <div class="item-list" style={style}>{itemType}</div>;
  4. };
  5. class App extends React.Component {
  6. ...
  7. render() {
  8. return (
  9. <DndProvider backend={MyBackend}>
  10. <ItemList />
  11. <Preview generator={generatePreview} />
  12. // or
  13. <Preview>{generatePreview}</Preview>
  14. </DndProvider>
  15. );
  16. }
  17. }

优点

  • 漂亮自然的控件移动
  • 强大的键盘和屏幕阅读支持
  • 极限性能
  • 强大整洁的接口
  • 标准浏览器支持非常好
  • 中性样式
  • 没有额外创建 DOM 节点

8、React Bootstrap

这个 UI 库将 Bootstrap 的 JavaScript 替换成了 React,可以更好地控制每个组件的功能。每个组件都构建成能轻易访问,因此React Bootstrap有利于构建前端框架。有上千种 bootstrap 主题可以选择。

安装

  1. npm install react-bootstrap bootstrap

使用

  1. import 'bootstrap/dist/css/bootstrap.min.css';
  2. import React from 'react';
  3. import ReactDOM from 'react-dom';
  4. import './index.css';
  5. import App from './App';
  6. import registerServiceWorker from './registerServiceWorker';
  7. ReactDOM.render(<App />, document.getElementById('root'));
  8. registerServiceWorker();

优点

  • 可以简单导入所需的代码/组件
  • 通过压缩 Bootstrap 节省了输入和问题
  • 通过压缩 Bootstrap 减少了输入工作和冲突
  • 使用简单
  • 使用元素封装

9、React Suite

React Suite是另一个高效的 React.js 框架,包含了大量组件库,方便开发企业级产品。支持所有主流浏览器和平台,适用于任何系统。还支持服务器端渲染。

安装

  1. npm i rsuite --save

使用

  1. import { Button } from 'rsuite';
  2. import 'rsuite/styles/less/index.less';
  3. ReactDOM.render(<Button>Button</Button>, mountNode);

优点

  • 通过全局访问特性轻松管理应用
  • 使用 Redux 库集中管理系统状态
  • Redux 库有灵活的 UI 层,以及广泛的生态
  • Redux 库减少系统复杂度,并提供了全局访问特性

10、PrimeReact

PrimeReact最值得推荐的是它提供了几乎覆盖所有基本 UI 需求的组件,比如输入选项,菜单,数据展示,消息,等等。这个框架还优化了移动体验,帮助你设计触摸优化的元素。

安装

  1. npm install primereact --save
  2. npm install primeicons --save

使用

  1. import {Dialog} from 'primereact/dialog';
  2. import {Accordion,AccordionTab} from 'primereact/accordion';
  3. dependencies: {
  4. "react": "^16.0.0",
  5. "react-dom": "^16.0.0",
  6. "react-transition-group": "^2.2.1",
  7. "classnames": "^2.2.5",
  8. "primeicons": "^2.0.0"
  9. }

优点

  • 简单而高效
  • 容易使用
  • Spring 应用
  • 创建复杂用户界面
  • 好用而简单

11、React Router

React Router在 React Native 开发社区很受欢迎,因为它上手很容易。只需要你在电脑上安装 Git 和 npm 包管理工具,有 React 的基础知识,以及好学的意愿。没什么特别难的地方。

安装

  1. $ npm install --save react-router

使用

  1. import { Router, Route, Switch } from "react-router";
  2. // 使用 CommonJS 模块
  3. var Router = require("react-router").Router;
  4. var Route = require("react-router").Route;
  5. var Switch = require("react-router").Switch;

优点

  • 动态路由匹配
  • 在导航时支持不同页面的 CSS 切换
  • 统一的应用结构和行为

12、Grommet

Grommet常用于开发响应式、可访问的移动网页应用。这个用 Apache 2.0 许可证授权的 JavaScript 框架最大的优点是用很小的包提供了可访问性、模块化、响应式以及主题功能。这可能是它被一些公司广泛使用的主要原因,比如奈飞、通用电气、优步以及波音。

安装 for yarn and npm

  1. $ npm install grommet styled-components --save

使用

  1. "grommet-controls/chartjs": {
  2. "transform": "grommet-controls/es6/chartjs/${member}",
  3. "preventFullImport": true,
  4. "skipDefaultConversion": true

优点

  • 创建一个工具包来打包
  • 把开放政策发挥到极致
  • 重构有助于影响已成立的组织

13、Onsen UI

Onsen UI另一个使用 HTML5 和 JavaScript 的手机应用开发框架,集成了 Angular、Vue 和 React,使用 Apache 2.0 许可证授权。

Onsen 提供了标签、侧边栏、堆栈导航以及其他组件。这个框架最好的地方是,它所有的组件都支持 iOS 和安卓 Material Design 自动适配,会根据不同的平台切换应用的外观。

安装

  1. npm install onsenui

使用

  1. (function() {
  2. 'use strict';
  3. var module = angular.module('app', ['onsen']);
  4. module.controller('AppController', function($scope) {
  5. // more to come here
  6. });
  7. })();

优点

  • Onsen UI 基于自由而开源代码
  • 不强制基于它开发的应用使用任何形式的 DRM
  • 内置了 JavaScript 和 HTML5 代码
  • 给最终用户带来原生体验

你最喜欢哪个 React JavaScript 框架?

©本文为清一色官方代发,观点仅代表作者本人,与清一色无关。清一色对文中陈述、观点判断保持中立,不对所包含内容的准确性、可靠性或完整性提供任何明示或暗示的保证。本文不作为投资理财建议,请读者仅作参考,并请自行承担全部责任。文中部分文字/图片/视频/音频等来源于网络,如侵犯到著作权人的权利,请与我们联系(微信/QQ:1074760229)。转载请注明出处:清一色财经

(0)
打赏 微信扫码打赏 微信扫码打赏 支付宝扫码打赏 支付宝扫码打赏
清一色的头像清一色管理团队
上一篇 2023年5月5日 18:18
下一篇 2023年5月5日 18:18

相关推荐

发表评论

登录后才能评论

联系我们

在线咨询:1643011589-QQbutton

手机:13798586780

QQ/微信:1074760229

QQ群:551893940

工作时间:工作日9:00-18:00,节假日休息

关注微信