mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
translated
This commit is contained in:
Frank Zhang
parent
ddbdaf9f5e
commit
ffef58b192
@ -1,496 +0,0 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: ( )
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (13 of the best React JavaScript frameworks)
|
||||
[#]: via: (https://opensource.com/article/20/1/react-javascript-frameworks)
|
||||
[#]: author: (Amit Dua https://opensource.com/users/amitdua)
|
||||
|
||||
13 of the best React JavaScript frameworks
|
||||
======
|
||||
If you're using React.js or React Native to create user interfaces, try
|
||||
these frameworks.
|
||||
![Javascript code close-up with neon graphic overlay][1]
|
||||
|
||||
React.js and React Native are popular open source platforms for developing user interfaces (UIs); both rank well for desirability and use in StackOverflow's 2019 Developer Survey. React.js was developed by Facebook in 2011 as a JavaScript library to address the need for cross-platform, dynamic, and high-performing UIs, while React Native, which Facebook released in 2015, is used for building native applications using JavaScript.
|
||||
|
||||
The following are 13 of the best React JavaScript frameworks; all are open source—the first 11 (like React) are licensed under the MIT license and the latter two are licensed under Apache 2.0.
|
||||
|
||||
### 1\. Create React App
|
||||
|
||||
This command-line interface from Facebook developers is a must-have for every React Native project. The reason is that the [Create React App][2] is easy to use and prevents you from having to manually set up and configure your app, thereby saving you a lot of time and effort. With just a simple command, everything will be ready for you to create a React native project easily. You can use it to build a catalog and files, and the framework also includes tools to build, test, and launch your application.
|
||||
|
||||
|
||||
```
|
||||
# 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
|
||||
```
|
||||
|
||||
#### Why opt for Create React App
|
||||
|
||||
1. Top-notch tool developed with a configure bundle, transpiler, and test runner
|
||||
2. No configuration and no extra files at the app structure
|
||||
3. Fixed Development stack
|
||||
4. Effective Fast developing tool
|
||||
|
||||
|
||||
|
||||
### 2\. Material Kit React
|
||||
|
||||
Inspired by Google's Material Design system, [Material Kit React][3] can be an excellent choice for building React UI components. The best thing about this library is that it offers a lot of components that are built to fit together and look incredible. There are over 1,000 fully coded components, and each one comes with separate layers organized in folders. This means you have thousands of options to choose from. There are several example pages as well, in case you want to get inspiration or share an idea or concept with someone.
|
||||
|
||||
#### Installing the Material Kit
|
||||
|
||||
|
||||
```
|
||||
` $ npm install @material-ui/core`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
import React from 'react';
|
||||
import Button from '@material-ui/core/Button';
|
||||
|
||||
const App = () => (
|
||||
<Button variant="contained" color="primary">
|
||||
Hello World
|
||||
</Button>
|
||||
);
|
||||
```
|
||||
|
||||
The Material-UI component work without any additional setup, and do not pollute the global scope.
|
||||
|
||||
#### Advantage
|
||||
|
||||
The React component supports easier and faster web development. With it, you can build your own design system, or start with Material Design.
|
||||
|
||||
### 3\. Shards React
|
||||
|
||||
This modern React UI kit has been built from scratch to achieve fast performance. It has a modern design system that lets you customize things the way you want. You can even download the source files to customize things at the code level. Also, the SCSS syntax used for styling enhances the development experience.
|
||||
|
||||
[Shards React][4] is based on Shards and uses React Datepicker, React Popper (a positioning engine), and noUISlider. It also supports incredible Material Design icons. There are some pre-made versions to help you gain some inspiration and get started.
|
||||
|
||||
#### Installation Shards with Yarn or NPM
|
||||
|
||||
|
||||
```
|
||||
# Yarn
|
||||
yarn add shards-react
|
||||
|
||||
# NPM
|
||||
npm i shards-react
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Shards is lightweight having a small footprint and weighting ~13kb minified and gzipped
|
||||
2. Shards is responsive by default being able to adapt and reflow its layout to any screen size
|
||||
3. Shards is well documented so you can start building beautiful interfaces as soon as possible
|
||||
|
||||
|
||||
|
||||
### 4\. Styled Components
|
||||
|
||||
This efficient CSS tool helps build small, reusable components that are responsible for an app's visual interface. With traditional CSS, you can accidentally overwrite the selectors used in other places on the website, but [Styled Components][5] can help you completely avoid this problem by using a CSS syntax directly inside your components.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`npm install --save styled-components`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
const Button = styled.button`
|
||||
background: background_type;
|
||||
border-radius: radius_value;
|
||||
border: abc;
|
||||
color: name_of_color;
|
||||
Margin: margin_value;
|
||||
padding: value;
|
||||
```
|
||||
|
||||
#### Advantage
|
||||
|
||||
1. Make components more readable
|
||||
2. Components rely on JavaScript for their style
|
||||
3. Build custom components with CSS
|
||||
4. Inline styling
|
||||
5. Convert component even the custom component to a styled component by simply invoking styled()
|
||||
|
||||
|
||||
|
||||
### 5\. Redux
|
||||
|
||||
[Redux][6] is a state-management solution for JavaScript applications. While it is mostly used for React.js, you can also use it for other React-like frameworks.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
sudo npm install redux
|
||||
sudo npm install react-redux
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
import { createStore } from "redux";
|
||||
import rotateReducer from "reducers/rotateReducer";
|
||||
|
||||
function configureStore(state = { rotating: value}) {
|
||||
return createStore(rotateReducer,state);
|
||||
}
|
||||
|
||||
export default configureStore;
|
||||
```
|
||||
|
||||
#### Advantage
|
||||
|
||||
1. Predictable state update helps in defining the data flow of the application
|
||||
2. Logic easier to test and time-travel debugging with reducer functions
|
||||
3. Centralizing the state
|
||||
|
||||
|
||||
|
||||
### 6\. React Virtualized
|
||||
|
||||
This React Native JavaScript framework helps in large-list and tabular-data rendering. Using [React Virtualized][7], you can restrict the number of requests and Document Object Model (DOM) elements, thus enhancing the performance of React apps.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`npm install react-virtualized`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
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
|
||||
}
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Display a large amount of data efficiently
|
||||
2. Rendering a huge data set
|
||||
3. Implements virtual rendering with a set of components
|
||||
|
||||
|
||||
|
||||
### 7\. React DnD
|
||||
|
||||
[ReactDnD][8] is responsible for the creation of complex drag-and-drop interfaces. There are dozens of drag-and-drop libraries, but React DnD stands out because it is built on top of modern HTML5's drag-and-drop API, making the process of creating interfaces easy.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`npm install react-dnd-preview`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Beautiful and natural movement of items bouquet
|
||||
2. Powerful keyboard and screen reader support wheelchair
|
||||
3. Extremely performant
|
||||
4. Clean and powerful api
|
||||
5. Plays extremely well with standard browser interactions
|
||||
6. Unopinionated styling
|
||||
7. No creation of additional wrapper dom nodes
|
||||
|
||||
|
||||
|
||||
### 8\. React Bootstrap
|
||||
|
||||
This UI Kit library replaces Bootstrap's JavaScript with React, giving you more control over the functions of each component. Because each component is built to be easily accessible, [React Bootstrap][9] can be beneficial for frontend framework building. There are thousands of bootstrap themes to choose from.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`npm install react-bootstrap bootstrap`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
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();
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Can easily import required code/component
|
||||
2. Saves typing and bugs by compressing the Bootstrap
|
||||
3. Reduces typing efforts and conflicts by compressing the Bootstrap
|
||||
4. It is easy to use
|
||||
5. It encapsulates in elements
|
||||
|
||||
|
||||
|
||||
### 9\. React Suite
|
||||
|
||||
[React Suite][10] is another efficient React.js framework that contains a wide range of component libraries for enterprise system products. It supports all major browsers and platforms, making it suitable for just about any system. It also supports server-side rendering.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`npm i rsuite --save`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
import { Button } from 'rsuite';
|
||||
import 'rsuite/styles/less/index.less';
|
||||
ReactDOM.render(<Button>Button</Button>, mountNode);
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Easily manage the application easily by the help of global accessing features
|
||||
2. Redux library centralizes the state management
|
||||
3. Redux is flexible with all the UI layers and has a large ecosystem
|
||||
4. Redux reduces this complexity and provides global accessibility
|
||||
|
||||
|
||||
|
||||
### 10\. PrimeReact
|
||||
|
||||
The best thing about [PrimeReact][11] is that it provides components that cover almost all of a UI's basic requirements, such as input options, menus, data presentations, messages, etc. The framework also pays close attention to the mobile experience, thus helping you design touch-optimized elements.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
npm install primereact --save
|
||||
npm install primeicons --save
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
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"
|
||||
}
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Simplicity and Performance
|
||||
2. Ease of Use
|
||||
3. Spring Applications
|
||||
4. Create rich user interfaces
|
||||
5. Usability and simplicity
|
||||
|
||||
|
||||
|
||||
### 11\. React Router
|
||||
|
||||
[React Router][12] is quite popular in the React Native developer community because it is very easy to start working with. All you need is Git and the npm package manager installed on your PC, a basic knowledge of React, and a willingness to learn. There is nothing too complicated.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`$ npm install --save react-router`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
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;
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Dynamic route matching
|
||||
2. CSS transitions on views when navigating
|
||||
3. Standardized app structure and behavior
|
||||
|
||||
|
||||
|
||||
### 12\. Grommet
|
||||
|
||||
[Grommet][13] is used for creating responsive and accessible mobile-first web apps. The best thing about this Apache 2.0-licensed JavaScript framework is that it offers accessibility, modularity, responsiveness, and theming in one small package. Perhaps this is one of the major reasons it is widely used by companies like Netflix, GE, Uber, and Boeing.
|
||||
|
||||
#### Installation for yarn and npm
|
||||
|
||||
|
||||
```
|
||||
` $ npm install grommet styled-components --save`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
"grommet-controls/chartjs": {
|
||||
"transform": "grommet-controls/es6/chartjs/${member}",
|
||||
"preventFullImport": true,
|
||||
"skipDefaultConversion": true
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Create one toolkit as a packaged deal
|
||||
2. Take the open-door policy to the extreme
|
||||
3. Restructuring can help influence an established org
|
||||
|
||||
|
||||
|
||||
### 13\. Onsen UI
|
||||
|
||||
[Onsen UI][14] is another mobile app development framework that uses HTML5 and JavaScript and offers integration with Angular, Vue, and React. It is licensed under Apache 2.0.
|
||||
|
||||
Onsen offers tabs, a side menu, stack navigation, and other components. The best thing about the framework is that all of its components have iOS and Android Material Design support along with automatic styling, which changes the app's appearance depending on the platform.
|
||||
|
||||
#### Installation
|
||||
|
||||
|
||||
```
|
||||
`npm install onsenui`
|
||||
```
|
||||
|
||||
#### Implementation
|
||||
|
||||
|
||||
```
|
||||
(function() {
|
||||
'use strict';
|
||||
var module = angular.module('app', ['onsen']);
|
||||
|
||||
module.controller('AppController', function($scope) {
|
||||
// more to come here
|
||||
});
|
||||
|
||||
})();
|
||||
```
|
||||
|
||||
#### Advantages
|
||||
|
||||
1. Onsen UI is built on free and open-source code
|
||||
2. Doesn't force any type of DRM on apps developed with it
|
||||
3. Compiles JavaScript and HTML5 code
|
||||
4. Offers end users the native experience
|
||||
|
||||
|
||||
|
||||
* * *
|
||||
|
||||
What are your favorite React JavaScript frameworks? Please share them in the comments.
|
||||
|
||||
Learn more about React Native, a framework for building native apps using React and JavaScript.
|
||||
|
||||
Whether you are new to JavaScript or an experienced JavaScript developer, using libraries and...
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/20/1/react-javascript-frameworks
|
||||
|
||||
作者：[Amit Dua][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[译者ID](https://github.com/译者ID)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/amitdua
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/code_javascript.jpg?itok=60evKmGl (Javascript code close-up with neon graphic overlay)
|
||||
[2]: https://github.com/facebook/create-react-app
|
||||
[3]: https://github.com/creativetimofficial/material-kit-react
|
||||
[4]: https://github.com/DesignRevision/shards-react
|
||||
[5]: https://github.com/styled-components/styled-components
|
||||
[6]: https://github.com/reduxjs/redux
|
||||
[7]: https://github.com/bvaughn/react-virtualized
|
||||
[8]: https://github.com/react-dnd/react-dnd/
|
||||
[9]: https://github.com/react-bootstrap/react-bootstrap
|
||||
[10]: https://github.com/rsuite/rsuite
|
||||
[11]: https://github.com/primefaces/primereact
|
||||
[12]: https://github.com/ReactTraining/react-router
|
||||
[13]: https://github.com/grommet/grommet
|
||||
[14]: https://github.com/OnsenUI/OnsenUI
|
||||
@ -0,0 +1,498 @@
|
||||
[#]: collector: (lujun9972)
|
||||
[#]: translator: ( )
|
||||
[#]: reviewer: ( )
|
||||
[#]: publisher: ( )
|
||||
[#]: url: ( )
|
||||
[#]: subject: (13 of the best React JavaScript frameworks)
|
||||
[#]: via: (https://opensource.com/article/20/1/react-javascript-frameworks)
|
||||
[#]: author: (Amit Dua https://opensource.com/users/amitdua)
|
||||
|
||||
13 个最好的 React JavaScript 框架
|
||||
======
|
||||
如果你正在用 React.js 或 React Native 来开发用户界面的话，试试这些框架。
|
||||
![Javascript code close-up with neon graphic overlay][1]
|
||||
|
||||
React.js 和 React Native 都是用来开发用户界面（UI）的很受欢迎的开源平台。在 StackOverflow 2019 年度开发者调查里，两个框架的可取性和实用性都排名靠前。React.js 是 Facebook 在 2011 年开发的一个 JavaScript 库，来实现跨平台，动态以及高性能的 UI 设计需求；而 React Native 则是 Facebook 在 2015 年发布的框架，目的是使用 JavaScript 构建原生应用。
|
||||
|
||||
下面介绍 13 个最好的 React JavaScript 框架，都是开源项目。前 11 个（和 React 一样）都使用 MIT 协议授权，后面两个使用 Apache 2.0 协议。
|
||||
|
||||
### 1\. Create React App
|
||||
|
||||
这个 Facebook 开发的命令行工具是 React Native 项目一定要用的。因为 [Create React App][2] 使用很简单，还可以避免你自己手动设定和配置应用，因此能节省大量的时间和精力。仅仅使用给一个简单的命令，就可以为你准备好创建 React 原生项目所需的一切。你可以用它来创建分类和文件，而且该框架还自带了工具用来构建，测试和启动应用。
|
||||
|
||||
|
||||
```
|
||||
# 安装软件包
|
||||
$ npm install -g create-react-native-web-app
|
||||
|
||||
# 运行 create-react-native-web-app <项目目录>
|
||||
$ create-react-native-web-app myApp
|
||||
|
||||
# 切换到创建的<项目目录>
|
||||
$ cd myApp
|
||||
|
||||
# 运行 Web/Ios/Android 调试
|
||||
# Web
|
||||
$ npm run web
|
||||
|
||||
# IOS (模拟器)
|
||||
$ npm run ios
|
||||
|
||||
# Android (实际连接的设备)
|
||||
$ npm run android
|
||||
```
|
||||
|
||||
#### 为什么选择 Create React App
|
||||
|
||||
1. 支持配置，转换，以及测试运行的一流工具
|
||||
2. 在应用架构里不需要配置以及没有额外文件
|
||||
3. 确定的开发栈
|
||||
4. 高效快速的开发工具
|
||||
|
||||
|
||||
|
||||
### 2\. Material Kit React
|
||||
|
||||
[Material Kit React][3] 是受谷歌的 Material Design 系统启发开发的， 很适合用来创建 React UI 组件。这个库最大的优点是提供了大量的组件，可以互相搭配做出非常好的效果。有超过一千个完全编码的组件，每一个都有用文件夹组织起来的独立图层。这样你就可以有上千个选项可以选择。同时也包含一些示例页面，方便你从中寻找灵感，或者向别人分享你的点子或创意。
|
||||
|
||||
#### 安装 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 组件支持简易快速的网页开发。你可以用它创建自己的设计系统，或者直接开始 Material Design。
|
||||
|
||||
### 3\. Shards React
|
||||
|
||||
这个现代的 React UI 工具为了追求高效率，是从最底层开始构建的。它拥有现代的设计系统，可以让你按自己的想法任意定制。甚至可以下载源文件，然后从代码级别定制。另外，它用来设计样式的 SCSS 语法提高了开发体验。
|
||||
|
||||
[Shards React][4] 基于 Shards，使用了 React Datepicker，React Popper（一个定位引擎），和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多设计好的版本，可以帮你寻找灵感或上手。
|
||||
|
||||
#### 用 Yarn 或 NPM 安装 Shards
|
||||
|
||||
|
||||
```
|
||||
# Yarn
|
||||
yarn add shards-react
|
||||
|
||||
# NPM
|
||||
npm i shards-react
|
||||
```
|
||||
|
||||
#### 优点
|
||||
|
||||
1. Shards 是一个轻量级的脚本，压缩后大概 13kb
|
||||
2. Shards 默认支持响应式，图层可以适配任意大小屏幕
|
||||
3. Shards 有完整的文档，可以快速开始构建漂亮的界面
|
||||
|
||||
|
||||
|
||||
### 4\. Styled Components
|
||||
|
||||
这个高效的 CSS 工具可以用来为应用的可视界面创建小型可重用的组件。使用传统的 CSS，你可能会不小心覆盖掉网站其他位置的选择器，但 [Styled Components][5] 通过使用直接内嵌到组件里的 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][6] 是一个为 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 框架帮助渲染 large-list 和 tabular-data。使用 [React Virtualized][7]，你可以限制请求和文档对象模型（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][8] 用来创建复杂的拖放界面。拖放控件库有很多，选用 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. 漂亮自然的控件移动 （bouquet是个库？？？ Beautiful and natural movement of items bouquet）
|
||||
2. 强大的键盘和屏幕阅读支持 （wheelchair是说行动不便的人？Powerful keyboard and screen reader support wheelchair）
|
||||
3. 极限性能
|
||||
4. 强大整洁的接口
|
||||
5. 标准浏览器支持非常好
|
||||
6. 中性样式
|
||||
7. 没有额外创建 DOM 节点
|
||||
|
||||
|
||||
|
||||
### 8\. React Bootstrap
|
||||
|
||||
这个 UI 库将 Bootstrap 的 JavaScript 替换成了 React，可以更好地控制每个组件的功能。每个组件都构建成能轻易访问，因此 [React Bootstrap][9] 有利于构建前端框架。有上千种 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][10] 是另一个高效的 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][11] 最值得推荐的是它提供了几乎覆盖所有基本 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][12] 在 React Native 开发社区很受欢迎，因为它上手很容易。只需要你在电脑上安装 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. 统一的 app 结构和行为
|
||||
|
||||
|
||||
|
||||
### 12\. Grommet
|
||||
|
||||
[Grommet][13] 常用于开发响应式可访问的移动网页应用。这个用 Apache 2.0 协议授权的 JavaScript 框架最大的优点是用很小的包提供了可访问性，模块化，响应式以及主题功能。这可能是它被一些公司广泛使用的主要原因，比如奈飞，通用电气，优步，以及波音。
|
||||
|
||||
#### 安装 for yarn and npm
|
||||
|
||||
|
||||
```
|
||||
` $ npm install grommet styled-components --save`
|
||||
```
|
||||
|
||||
#### 使用
|
||||
|
||||
|
||||
```
|
||||
"grommet-controls/chartjs": {
|
||||
"transform": "grommet-controls/es6/chartjs/${member}",
|
||||
"preventFullImport": true,
|
||||
"skipDefaultConversion": true
|
||||
```
|
||||
|
||||
#### 优点
|
||||
|
||||
1. 创建一个工具包来打包 Create one toolkit as a packaged deal
|
||||
2. 把开放政策发挥到极致
|
||||
3. 重构有助于影响已成立的组织
|
||||
|
||||
|
||||
|
||||
### 13\. Onsen UI
|
||||
|
||||
[Onsen UI][14] 另一个使用 HTML5 和 JavaScript 的手机应用开发框架，集成了 Angular，Vue 和 React，使用 Apache 2.0 协议授权。
|
||||
|
||||
Onsen 提供了标签，侧边栏，堆栈导航以及其他组件。这个框架最好的地方是，它所有的组件都支持 iOS 和安卓 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 框架？请在评论区分享。
|
||||
|
||||
Learn more about React Native, a framework for building native apps using React and JavaScript.
|
||||
|
||||
Whether you are new to JavaScript or an experienced JavaScript developer, using libraries and...
|
||||
（检查了原文，没有这两句，是下面关联文章的简介）
|
||||
|
||||
|
||||
--------------------------------------------------------------------------------
|
||||
|
||||
via: https://opensource.com/article/20/1/react-javascript-frameworks
|
||||
|
||||
作者：[Amit Dua][a]
|
||||
选题：[lujun9972][b]
|
||||
译者：[zpl1025](https://github.com/zpl1025)
|
||||
校对：[校对者ID](https://github.com/校对者ID)
|
||||
|
||||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||||
|
||||
[a]: https://opensource.com/users/amitdua
|
||||
[b]: https://github.com/lujun9972
|
||||
[1]: https://opensource.com/sites/default/files/styles/image-full-size/public/lead-images/code_javascript.jpg?itok=60evKmGl (Javascript code close-up with neon graphic overlay)
|
||||
[2]: https://github.com/facebook/create-react-app
|
||||
[3]: https://github.com/creativetimofficial/material-kit-react
|
||||
[4]: https://github.com/DesignRevision/shards-react
|
||||
[5]: https://github.com/styled-components/styled-components
|
||||
[6]: https://github.com/reduxjs/redux
|
||||
[7]: https://github.com/bvaughn/react-virtualized
|
||||
[8]: https://github.com/react-dnd/react-dnd/
|
||||
[9]: https://github.com/react-bootstrap/react-bootstrap
|
||||
[10]: https://github.com/rsuite/rsuite
|
||||
[11]: https://github.com/primefaces/primereact
|
||||
[12]: https://github.com/ReactTraining/react-router
|
||||
[13]: https://github.com/grommet/grommet
|
||||
[14]: https://github.com/OnsenUI/OnsenUI
|
||||
Loading…
Reference in New Issue
Block a user