Summary of developing projects using Ant Design Pro

First, about getting started.

1. The introduction of Ant Design Pro can be roughly understood as a combination of Ant Design (component library) + Ant Design Pro (complete project) + DVA (routing + data flow management). In short, Pro is a complete set of projects that has helped you get through from build to test package release. You just need to stand on the shoulders of giants to develop.

2. After installing the project according to the official website, you will see several pages. React syntax, Js(ES6), and DVA are all necessary to get started. What? Not the whole family? It doesn’t matter, write the page and you don’t need to master the whole family bucket, read the following link to start writing the page, encounter not to check again, so learn faster. Please eat in the following order

• Dva knowledge map
  
  
• Js Quick Preview
  
  
• React Quick Preview
  
  
• The react little book
  
  
• Dva document
  
  
• React 英 文 版
  
  
• ES6
• MDN??? What’s so cool about MDN? If you are not familiar with JS, MDN has a full API to look up

Use Ant Design Pro

Take an Ant Design Table component that presents data as an example.

On such a page, you can see the navigation bar Menu component on the left and the main BasicLayout component on the right. As for layout, you can also find it on ant Design Pro’s official website. There are already several pages to refer to when you first install ANTDP. Here: On the page, there are several buttons with ant Design’s Table component below them.

Create a new page.

1. Add a configuration page to the route. Forget about the error, because you don’t have the component and models for the route yet. Read on.

2. After adding a page, create a page in the corresponding path. This is usually placed in the Routes folder

For example, I create a new role management page and use Connect to associate models.

3. Then go to the Models folder and create a new Model layer file. Note that the namespace should correspond to the Connect Component

Second, data interaction.

This table page uses antD’s Table component. Copy the code from the official website. I won’t repeat it here. Just to talk about how the data interacts.

The columns in the Table component have their own format, which you need to convert to the specified format. There are examples of tables in the newly installed project that you can refer to, but the examples are static data written to death. Try this: you delete the data from columns and replace it with data from outside.

1. Use the lifecycle function componentDidMount to request data for the table while the component is mounted. Here a Dispatch trigger action is initiated, and the value of Type is in the Models layer.

2. In Models, the method encapsulated by ANTD is used to request the interface address defined in api.js, and then wait for the return to process the data.

Here response gets the result returned by the server. You can manipulate the data here. For example, the back end does not return the data format you need, or you can do a higher level of encapsulation.

3. Then call the save method in reducers to store the data. By doing this in UIcomponent, this. Props should be able to retrieve the data you passed. Then put it into the Table component.

This may not be very detailed, such as what the above code methods are used to do, if you have carefully looked at the documentation listed at the beginning of the article, especially the DVA documentation, you should have some idea. This is just a rough development process that I’ll explain in more detail later.

Iii. Personal development thoughts and experience

1. After using this framework to develop several pages, it will become obvious that the framework is a bit like MVC layer, very standard!

The M layer Models are responsible for controlling the data

V layer UIComponent, and Design as well as a rich component library for you.

C layer control, as I personally understand, is the management of THE API layer. It unify all the interfaces that need to request background data, which is intuitive and convenient to call and modify.

2. Ant Design Pro has done almost everything for you, you just need to replace the data, interface, out of the box. After you’ve cut several pages, there’s a problem: how do you get a higher level of encapsulation? Can’t you copy and paste a lot of duplicate component code every time?

I personally do this: take the table page for example above.

First, I’ll encapsulate a function that accepts various fields. For example, the back end returns you a series of input fields of various types, you match the fields in the function, each field corresponds to the ant Design component, associate the data with the component, and then return the component. Finally, push all the components into an array and put in the render function to render the entire page.

This function is similar to the HOC higher-order component concept of React (pass components and props in, rerurn new components out), except that I pass in the data needed for each component instead of the component, and return a component.

3. Make use of stateless components and functional components. Last row on the form, edit/Delete button. I do this in the Models layer because columns (data objects of the Table component) are already rendered in the UIcomponents layer, and I personally think the UIcomponent should be as simple as possible and only render the data. I iterate through the columns data in the Models layer, building an object locally (edit button component, delete button component) to merge with the object returned by the server. At the same time, the two-button component should have its own functionality, such as calling it from any table. After the merge, the new Colums object is dropped to the table component, thus making a small abstraction.

The button at the top of the table is also a button component that is output by a function. Buttons have their own properties and functions, which are passed to functions through input parameters and then set to components through props for reuse.

Finally, how do you specify which components and buttons are on the page? You need to negotiate fields and attributes with the backend. For example, if a form page has multiple input types, input can be type, rules (validation rules)…. After the back end returns you a list of required properties for the component, you can render the entire page of the component based on that data.

Above is my new use of Ant Design Pro small experience, may create a page of the case is not too clear, abstract encapsulation idea I do not know if you can understand what I said.

I hope you can give me more advice. How to do higher levels of encapsulation? Each page needs a route, models, API address, and can it be encapsulated to be dynamic? This eliminates the repetitive work of modifying the interface.

Thanks for reading.