What do antd and dva mean in react?

WBOY
Release: 2022-04-21 15:25:07
Original
2918 people have browsed it

In react, antd is a React UI component library based on Ant Design, which is mainly used to develop enterprise-level middle and back-end products; dva is a data flow solution based on redux and "redux-saga", with built-in " "react-router" and fetch can be understood as application frameworks.

What do antd and dva mean in react?

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What do antd and dva mean in react

antd

antd is a React UI component library based on the Ant Design design system, mainly used for research and development Enterprise-level mid- and back-end products.

Features

  • Extracted from the interactive language and visual style of enterprise-level mid- and back-end products.

  • High quality React components out of the box.

  • Built using TypeScript, providing complete type definition files.

  • Full-link development and design tool system

Application method

1. Installation: (Type in the command line The following command)

   npm install antd --save
Copy after login

2. Reference

Reference the plug-in in the global file. For example:

import 'antd/dist/antd.css';
Copy after login

3. Load on demand (load whatever plug-in is needed directly)

 import Button from 'antd/lib/button';
        import 'antd/lib/button/style';
Copy after login

dva

dva is a data flow solution based on redux and redux-saga. In order to simplify the development experience, dva also has built-in react-router and fetch, so it is also It can be understood as a lightweight application framework.

dva is a single-page application framework launched by Ant Financial, which provides upper-layer encapsulation of redux, react-router, and redux-saga. redux-saga is a middleware used to manage asynchronous operations of redux applications. redux-saga collects all asynchronous operation logic in one place for centralized processing by creating sagas. It can be used to replace redux-thunk middleware

This It means that the application logic will exist in two places

(1) The reducer is responsible for processing the stage update of the action

(2) The sagas is responsible for coordinating those complex or asynchronous operations

Sagas are created through the generator function

Sagas can be regarded as processes running in the background. sagas listens to the initiated action, and then decides what to do based on this action (for example: whether to initiate an asynchronous request, initiate other actions to the store, or call other sagas, etc.

Because the generator function is used, redux -saga allows you to write asynchronous code in a synchronous way

React project introduces Dva

First install dva (current version 2.4.1)

npm install dva —save
Copy after login

Refer to the official documentation, transform the project into dva mode, add or modify the entry file index.js under src

import dva from ‘dva’;
import createHistory from ‘history/createHashHistory’;
 
//1.Initialize
const app = dva({
history: createHistory(),
});
 
//2.Plugins
//app.use({});
 
//3.Model
//app.model(require(‘./models/app’).default);
 
//4.Router
app.router(require(‘./router’).default);
 
//5.Start
app.start(‘#root’);
Copy after login

Recommended learning: "react video tutorial"

The above is the detailed content of What do antd and dva mean in react?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template