ext框架和react框架

React.js和React Native是用于开发用户界面（UI）的流行开源平台。 在StackOverflow的2019年开发人员调查中，两者在可取性和使用性方面均排名很高。 Facebook在2011年将React.js开发为JavaScript库，以满足对跨平台，动态和高性能UI的需求，而Facebook在2015年发布的React Native被用于使用JavaScript构建本机应用程序。

以下是13个最佳的React JavaScript框架； 所有这些都是开源的-前11个（如React）是根据MIT许可授权的，而后两个是根据Apache 2.0授权的。

1.创建React应用

Facebook开发人员的此命令行界面是每个React Native项目的必备条件。 原因是Create React App易于使用，并且使您不必手动设置和配置应用程序，从而节省了大量时间和精力。 只需一个简单的命令，一切准备就绪即可轻松创建React本机项目。 您可以使用它来构建目录和文件，该框架还包括用于构建，测试和启动应用程序的工具。

   

    

     # 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
    
   

为什么选择创建React App

1. 使用配置包，编译器和测试运行程序开发的一流工具
2. 应用程序结构中没有配置，也没有多余的文件
3. 固定开发堆栈
4. 有效的快速开发工具

2.材料套件React

受Google的Material Design系统启发， Material Kit React是构建React UI组件的绝佳选择。 关于这个库的最好的事情是它提供了很多组件，这些组件可以组合在一起并看起来令人难以置信。 有超过1000个完全编码的组件，每个组件都有单独的层，这些层组织在文件夹中。 这意味着您有成千上万种选择。 如果您想获得灵感或与某人分享想法或概念，也有几个示例页面。

安装材料套件

   $ 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.碎片React

这个现代的React UI套件是从零开始构建的，以实现快速性能。 它具有现代化的设计系统，可让您以所需的方式自定义事物。 您甚至可以下载源文件以在代码级别自定义内容。 此外，用于样式的SCSS语法可增强开发经验。

Shards React是基于Shards的，并使用React Datepicker，React Popper（定位引擎）和noUISlider。 它还支持令人难以置信的Material Design图标。 有一些预制的版本可以帮助您获得灵感并开始使用。

带有纱线或NPM的安装碎片

   

    

     # Yarn
     

yarn add shards 
     - react
     


     

# NPM
     

npm i shards 
     - react
    
   

优点

1. 碎片重量轻，占用空间小，压缩后重约13kb
2. 默认情况下，碎片响应能力很强，能够适应和重排其布局以适应任​​何屏幕尺寸
3. Shards有据可查，因此您可以尽快开始构建漂亮的界面

4.样式化的组件

这个高效CSS工具可帮助构建负责应用程序可视界面的小型可重用组件。 使用传统CSS，您可能会意外覆盖网站上其他位置使用的选择器，但是样式化组件可以通过直接在组件内部使用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 
     ; 
    
   

优点

1. 使组件更具可读性
2. 组件的样式依赖JavaScript
3. 使用CSS构建自定义组件
4. 内联样式
5. 只需调用styled（），即可将组件（甚至是自定义组件）转换为样式化组件

5. Redux

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 
     ; 
    
   

优点

1. 可预测的状态更新有助于定义应用程序的数据流
2. 使用reducer功能使逻辑更易于测试和时间旅行调试
3. 集中国家

6. React Virtualized

这个React Native JavaScript框架有助于大列表和表格数据的呈现。 使用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 
     


     } 
    
   

优点

1. 有效显示大量数据
2. 渲染海量数据
3. 使用一组组件实现虚拟渲染

7. React DnD

ReactDnD负责创建复杂的拖放界面。 有数十种拖放库，但是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 
     > 
     

      
     ) 
     ; 
     

    
     } 
     

  
     } 
    
   

优点

1. 精美自然的物品花束
2. 强大的键盘和屏幕阅读器支持轮椅
3. 表现出色
4. 干净强大的API
5. 在标准的浏览器交互中发挥出色
6. 简约风格
7. 没有创建其他包装器dom节点

8. React Bootstrap

该UI Kit库用React替换了BootstrapJavaScript，使您可以更好地控制每个组件的功能。 由于每个组件的构建都易于访问，因此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 
     ( 
     ) 
     ; 
    
   

优点

1. 可以轻松导入所需的代码/组件
2. 通过压缩Bootstrap节省键入和错误
3. 通过压缩Bootstrap减少打字工作和冲突
4. 它很容易使用
5. 它封装在元素中

9. React Suite

React Suite是另一个高效的React.js框架，其中包含用于企业系统产品的各种组件库。 它支持所有主要的浏览器和平台，使其几乎适用于任何系统。 它还支持服务器端渲染。

安装

 npm i rsuite -- save 

实作

   

    
 
     import 
     { Button 
     } from 
     'rsuite' 
     ; 
     


     import 
     'rsuite/styles/less/index.less' 
     ; 
     

ReactDOM. 
     render 
     ( 
     < Button 
     > Button 
     </ Button 
     >, mountNode 
     ) 
     ; 
    
   

优点

1. 借助全局访问功能轻松管理应用程序
2. Redux库集中了状态管理
3. Redux具有所有UI层的灵活性，并具有庞大的生态系统
4. Redux降低了这种复杂性并提供了全局可访问性

10. PrimeReact

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" 
     


     } 
    
   

优点

1. 简洁与性能
2. 使用方便
3. Spring应用
4. 创建丰富的用户界面
5. 可用性和简单性

11. React Router

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 
     ; 
    
   

优点

1. 动态路由匹配
2. 导航时CSS在视图上过渡
3. 标准化的应用程序结构和行为

12.扣眼

Grommet用于创建可响应且可访问的移动优先Web应用程序。 关于此获得Apache 2.0许可JavaScript框架的最好的事情是，它在一个小包装中提供了可访问性，模块化，响应性和主题化。 也许这是它被Netflix，GE，Uber和波音等公司广泛使用的主要原因之一。

纱线和npm的安装

  $ npm install grommet styled - components -- save 

实作

   

    
 
     "grommet-controls/chartjs" 
     : 
     { 
     

          
     "transform" 
     : 
     "grommet-controls/es6/chartjs/${member}" 
     , 
     

          
     "preventFullImport" 
     : 
     true 
     , 
     

          
     "skipDefaultConversion" 
     : 
     true 
    
   

优点

1. 创建一个工具包作为打包交易
2. 将开放政策发挥到极致
3. 重组可以帮助影响已建立的组织

13.温泉UI

Onsen UI是另一个使用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 
     

    
     } 
     ) 
     ; 
     


     


     } 
     ) 
     ( 
     ) 
     ; 
    
   

优点

1. Onsen UI建立在免费和开源代码之上
2. 在使用它开发的应用程序上不强制使用任何类型的DRM
3. 编译JavaScript和HTML5代码
4. 为最终用户提供原生体验

您最喜欢的React JavaScript框架是什么？ 请在评论中分享它们。

翻译自: https://opensource.com/article/20/1/react-javascript-frameworks

ext框架和react框架