Reflections on Building a Small Management System with React, MobX, and Ant Design

In the past two weeks I built a small backend management system (including both front‑end and back‑end) and want to jot down a few observations, focusing on the front‑end side.

Because I started with React a long time ago, I used React again for this project; routing is handled by react‑router, state management by MobX, bundling by Webpack, communication via Axios, and I also rely on the Ant Design component library.

Regarding React, I love the component‑based mindset and JSX syntax. When loading components lazily, it’s better to avoid rendering a component and then hiding it with display:none ; instead, conditionally render it only when needed. I also advocate using CSS‑in‑JS because each component’s styles naturally belong to that component, which simplifies management for small applications.

React‑router was upgraded from 2.x to 4.x. The upgrade introduced many API changes and broke the old nested‑route syntax. Now the router is just another component, which makes it more flexible, though it requires a different mental model.

As for MobX, after spending a week trying to understand Redux and finding it cumbersome, I switched to MobX because its API is tiny, straightforward, and has a functional‑programming feel reminiscent of Rx.

Webpack needs no introduction; everyone knows it’s essential. I recently hit a small pitfall with webpack‑dev‑server : after refreshing the page the browser returned a 404 because the bundled bundle.js path was wrong. Adding historyApiFallback usually fixes this, but with nested routes the inner routes still 404 due to path resolution issues.

About Axios, although many claim that fetch is the next‑generation AJAX, I still find Axios more convenient.

For ECharts, remember that it draws on a real DOM node via Canvas. In React you can render a placeholder component, then in componentDidMount call the ECharts API to draw the chart.

Finally, Ant Design is excellent—its clean style, attention to detail, and rapid issue response are impressive. A key lesson I learned from interacting with Ant Design’s maintainers is how to ask questions abstractly and reproducibly, which helps others understand and answer them more effectively.

That’s all for now; there isn’t much “dry” content, just personal takeaways.