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框架