24资源网

24资源分享网，分享资源，收集整理资源，有态度的分享资源网
  • 首页
  • 前端

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

    avatar 小四 2023-01-26 20:12 45次浏览 0 条评论 前端

    如果你正在使用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压缩最小化后只有大约13kbShards天生就是响应设计，所以其布局可以适应任何屏幕尺寸，针对不同的显示大小重排版内容。Shards的文档很完善，因此你可以很快开始构建漂亮的界面。

    4.Styled Components

    这款高效的CSS工具可以帮助你构建用于应用可视界面的小巧、可重用的组件。使用传统的CSS时，你可能会意外覆盖网站上其他位置用到的选择器，但是Styled Components（https://github.com/styled-components/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（https://github.com/reduxjs/redux）是JavaScript应用程序的一个状态管理解决方案。虽然它主要用于React.js，但是你也可以将它用在其他类似React的框架上。

    安装

    sudo npm install redux sudo npm install react-redux

    实现

    import { createStore } from “redux”; import rotateReducer from “reducers/rotateReducer”; function configureStore(state = { rotating: value}) { return createStore(rotateReducer,state); } export default configureStore;

    优点

    可预测的状态更新有助于定义应用程序的数据流。有了reducer函数，逻辑更易于测试和时间旅行调试。状态集中管理。

    6.React Virtualized

    这个React Native JavaScript框架可用于大列表和表格数据的渲染。使用React Virtualized（https://github.com/bvaughn/react-virtualized），你可以限制请求和文档对象模型（DOM）元素的数量，从而提升React应用程序的性能。

    安装

    npm install react-virtualized

    实现

    import react-virtualized/styles.css import { Column, Table } from react-virtualized import AutoSizer from react-virtualized/dist/commonjs/AutoSizer import List from react-virtualized/dist/commonjs/List { alias: { react-virtualized/List: react-virtualized/dist/es/List, }, …rest }

    优点

    高效显示大量数据。渲染巨大的数据集。使用一组组件实现虚拟渲染。

    7.React DnD

    ReactDnD（https://github.com/react-dnd/react-dnd/）负责创建复杂的拖放界面。市面上的拖放库有几十种之多，但React DnD之所以能脱颖而出，是因为它构建在现代HTML5的拖放API之上，简化了创建接口的过程。

    安装

    npm install react-dnd-preview

    实现

    import Preview from react-dnd-preview; const generatePreview = ({itemType, item, style}) => { return <div class=“item-list” style={style}>{itemType}</div>; }; class App extends React.Component { … render() { return ( <DndProvider backend={MyBackend}> <ItemList /> <Preview generator={generatePreview} /> // or <Preview>{generatePreview}</Preview> </DndProvider> ); } }

    优点

    元素拖动优雅自然。强大的键盘和屏幕阅读器支持。性能出色。干净而强大的API。在标准的浏览器交互中发挥出色。未经修饰的样式。没有创建额外的包装器dom节点。

    8.React Bootstrap

    这款UI Kit库用React替换了Bootstrap的JavaScript，让你可以更好地控制每个组件的函数。因为每个组件都用易于访问的方式构建，所以用React Bootstrap（https://github.com/react-bootstrap/react-bootstrap）构建前端框架是很好用的。有成千上万的引导主题可供选择。

    安装

    npm install react-bootstrap bootstrap

    实现

    import bootstrap/dist/css/bootstrap.min.css; import React from react; import ReactDOM from react-dom; import ./index.css; import App from ./App; import registerServiceWorker from ./registerServiceWorker; ReactDOM.render(<App />, document.getElementById(root)); registerServiceWorker();

    优点

    可以轻松导入所需的代码/组件。通过压缩Bootstrap来节省代码、减少错误。通过压缩Bootstrap减少输入工作和冲突。用起来很简单。它封装在元素中。

    9.React Suite

    React Suite（https://github.com/rsuite/rsuite）是又一款高效的React.js框架，其中包含用于企业系统产品的多种组件库。它支持所有主流浏览器和平台，使其适用于几乎任何系统。它还支持服务端渲染。

    安装

    npm i rsuite –save

    实现

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

    优点

    借助全局访问功能，轻松管理应用程序。Redux库集中了状态管理操作。Redux很灵活，它有所有的UI层，并有着庞大的生态系统。Redux降低了复杂性，并提供了全局可访问性。

    10.PrimeReact

    PrimeReact（https://github.com/primefaces/primereact）的最大优势在于，它提供的组件几乎可以满足UI的所有基本要求，例如输入选项、菜单、数据表示和消息等。这款框架还非常重视移动体验，可以帮助你设计为触控优化的元素。

    安装

    npm install primereact –save npm install primeicons –save

    实现

    import {Dialog} from primereact/dialog; import {Accordion,AccordionTab} from primereact/accordion; dependencies: { “react”: “^16.0.0”, “react-dom”: “^16.0.0”, “react-transition-group”: “^2.2.1”, “classnames”: “^2.2.5”, “primeicons”: “^2.0.0” }

    优点

    简单性和性能。使用方便。Spring应用程序。创建丰富的用户界面。可用性和简单性。

    11.React Router

    React Router（https://github.com/ReactTraining/react-router）在React Native开发人员社区中非常流行，因为它很容易上手。你只需要在PC上安装Git和npm软件包管理器，有一些React的基本知识以及学习的意愿即可。没有什么太复杂的。

    安装

    $ npm install –save react-router

    实现

    import { Router, Route, Switch } from “react-router”; // using CommonJS modules var Router = require(“react-router”).Router; var Route = require(“react-router”).Route; var Switch = require(“react-router”).Switch;

    优点

    动态路由匹配跳转时视图上的CSS过渡效果标准化的应用结构和行为

    12.Grommet

    Grommet（https://github.com/grommet/grommet）是用来创建可响应且可访问的移动优先Web应用的。它是Apache 2.0许可的JavaScript框架，其最大优势是它在一个小包中同时提供了可访问性、模块化、响应性和主题特性。也许这就是它被Netflix、GE、Uber和波音等公司广泛使用的主要原因之一。

    Yarn和npm的安装

    $ npm install grommet styled-components –save

    实现

    “grommet-controls/chartjs”: { “transform”: “grommet-controls/es6/chartjs/${member}”, “preventFullImport”: true, “skipDefaultConversion”: true

    优点

    一个工具包一站式解决方案将开放政策发挥到极致重构过程对发展中的组织有益

    13.Onsen UI

    Onsen UI（https://github.com/OnsenUI/OnsenUI）是另一个使用HTML5和JavaScript的移动应用开发框架，并提供与Angular、Vue和React的集成。它的许可基于Apache 2.0。

    Onsen提供一些选项卡、一个侧面菜单、堆栈导航和其他组件。这款框架的最大优势是，它的所有组件都具有iOS和Android Material Design支持以及自动样式，这样就能根据平台改变应用程序的外观。

    安装

    npm install onsenui

    实现

    (function() { use strict; var module = angular.module(app, [onsen]); module.controller(AppController, function($scope) { // more to come here }); })();

    优点

    Onsen UI的代码免费且开源。它不要求用它开发的应用强制使用任何类型的DRM。编译JavaScript和HTML5代码。为终端用户提供原生体验。

                   
    赞助网站
    << · Back Index ·>>
    相关文章
    发表评论

    友情链接： E资源 嗨有趣
    Copyright © 24资源网 | 2023-2024 | 苏ICP备2022019458号| queries in 0.518 s | design by：parklot