文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

十三个优秀的 React JavaScript 框架

2024-12-02 21:06

关注

如果你正在用 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.  
  4. # 运行 create-react-native-web-app <项目目录>
  5. $ create-react-native-web-app myApp
  6.  
  7. # 切换到创建的 <项目目录>
  8. $ cd myApp
  9.  
  10. # 运行 Web/Ios/Android 调试
  11. # Web
  12. $ npm run web
  13.  
  14. # IOS(模拟)
  15. $ npm run ios
  16.  
  17. # Android(实际连接的设备)
  18. $ 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.  
  4. const App = () => (
  5.   <Button variant="contained" color="primary">
  6.     Hello World
  7.   Button>
  8. );

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.  
  4. # NPM
  5. npm i shards-react

优点

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`;

优点

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.  
  4. function configureStore(state = { rotating: value}) {
  5.   return createStore(rotateReducer,state);
  6. }
  7.  
  8. export default configureStore;

优点

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.  
  3. const generatePreview = ({itemType, item, style}) => {
  4.   return <div class="item-list" style={style}>{itemType}div>;
  5. };
  6.  
  7. class App extends React.Component {
  8. ...
  9.   render() {
  10.     return (
  11.       <DndProvider backend={MyBackend}>
  12.         <ItemList />
  13.         <Preview generator={generatePreview} />
  14.         // or
  15.         <Preview>{generatePreview}Preview>
  16.       DndProvider>
  17.     );
  18.   }
  19. }

优点

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.  
  8. ReactDOM.render(<App />, document.getElementById('root'));
  9. registerServiceWorker();

优点

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>ButtonButton>, mountNode);

优点

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. }

优点

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.  
  3. // 使用 CommonJS 模块
  4. var Router = require("react-router").Router;
  5. var Route = require("react-router").Route;
  6. var Switch = require("react-router").Switch;

优点

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.  
  5.     module.controller('AppController', function($scope) {
  6.       // more to come here
  7.     });
  8.  
  9. })();

优点

你最喜欢哪个 React JavaScript 框架? 

 

来源:Linux中国内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯