ReactJS框架有哪些

本篇内容主要讲解“React JS框架有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“React JS框架有哪些”吧!

成都创新互联专注于企业全网营销推广、网站重做改版、金安网站定制设计、自适应品牌网站建设、HTML5建站、商城开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为金安等各大城市提供网站开发制作服务。

1. Creat React App

这款由 Facebook 开发人员带来的命令行界面是所有 React Native 项目的必备框架。因为 Create  React App 易于使用，让你省掉了手动设置和配置应用的麻烦，从而节省了大量时间和精力。

只需一条简单的命令，一切就都准备就绪，你就能轻松创建 React Native  项目了。你可以用它来构建目录和文件，该框架还包括用于构建、测试和发布应用程序的工具。

# Install package $ npm install -g create-react-native-web-app # Run create-react-native-web-app  $ create-react-native-web-app myApp # cd into your  $ 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 受到了谷歌的 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 = () => (      Hello World  );

Material-UI 组件无需任何额外设置即可工作，并且不会污染全局域。

优点：

这款 React 组件可以支持更轻松、更快速的 Web 开发流程。有了它，你可以构建自己的设计系统，或者先从 Material Design  开始上手。

3. Shards React

这款现代 React UI  套件是为了实现高性能而从零开始打造的。它有着现代化的设计系统，让你可以按照需要的方式自定义事物。你甚至可以下载源文件来在代码级别自定义内容。此外，用于样式的  SCSS 语法可以提升开发体验。

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 压缩最小化后只有大约 13kb。

• Shards 天生就是响应设计，所以其布局可以适应任何屏幕尺寸，针对不同的显示大小重排版内容。

• Shards 的文档很完善，因此你可以很快开始构建漂亮的界面。

4. Styled Components

这款高效的 CSS 工具可以帮助你构建用于应用可视界面的小巧、可重用的组件。使用传统的 CSS  时，你可能会意外覆盖网站上其他位置用到的选择器，但是 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 是 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 {itemType}