ext框架和react框架_13个最佳React JavaScript框架
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
- 使用配置包，编译器和测试运行程序开发的一流工具
- 应用程序结构中没有配置，也没有多余的文件
- 固定开发堆栈
- 有效的快速开发工具
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
优点
- 碎片重量轻，占用空间小，压缩后重约13kb
- 默认情况下，碎片响应能力很强，能够适应和重排其布局以适应任何屏幕尺寸
- 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
;
优点
- 使组件更具可读性
- 组件的样式依赖JavaScript
- 使用CSS构建自定义组件
- 内联样式
- 只需调用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
;
优点
- 可预测的状态更新有助于定义应用程序的数据流
- 使用reducer功能使逻辑更易于测试和时间旅行调试
- 集中国家
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
}
优点
- 有效显示大量数据
- 渲染海量数据
- 使用一组组件实现虚拟渲染
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
>
)
;
}
}
优点
- 精美自然的物品花束
- 强大的键盘和屏幕阅读器支持轮椅
- 表现出色
- 干净强大的API
- 在标准的浏览器交互中发挥出色
- 简约风格
- 没有创建其他包装器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
(
)
;
优点
- 可以轻松导入所需的代码/组件
- 通过压缩Bootstrap节省键入和错误
- 通过压缩Bootstrap减少打字工作和冲突
- 它很容易使用
- 它封装在元素中
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
)
;
优点
- 借助全局访问功能轻松管理应用程序
- Redux库集中了状态管理
- Redux具有所有UI层的灵活性，并具有庞大的生态系统
- 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"
}
优点
- 简洁与性能
- 使用方便
- Spring应用
- 创建丰富的用户界面
- 可用性和简单性
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
;
优点
- 动态路由匹配
- 导航时CSS在视图上过渡
- 标准化的应用程序结构和行为
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
优点
- 创建一个工具包作为打包交易
- 将开放政策发挥到极致
- 重组可以帮助影响已建立的组织
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
}
)
;
}
)
(
)
;
优点
- Onsen UI建立在免费和开源代码之上
- 在使用它开发的应用程序上不强制使用任何类型的DRM
- 编译JavaScript和HTML5代码
- 为最终用户提供原生体验
您最喜欢的React JavaScript框架是什么？ 请在评论中分享它们。
翻译自: https://opensource.com/article/20/1/react-javascript-frameworks
ext框架和react框架