What do antd and dva mean in react?

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.

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

2. Reference

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

import 'antd/dist/antd.css';

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

 import Button from 'antd/lib/button';
        import 'antd/lib/button/style';

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

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’);

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!