Frontend Technology Stack and Project Structure Guide for React‑Based Merchant Applications

1. Understanding the Frontend Technology Stack

1.1 React – core frontend library (focus of study)

React is a JavaScript library for building efficient, fast user interfaces. In React everything is a component.

Virtual DOM

1.2 Webpack – frontend bundling tool

An open‑source bundler that parses and loads JS, CSS, images, SVGs in an optimized way; highly configurable and powerful.

1.3 Ant Design – UI component library for the merchant side (focus of use)

A React UI component library based on the Ant Design system, mainly for enterprise‑level admin products.

1.4 DVA – async request and Redux‑style global data flow

DVA is a data‑flow solution built on Redux and redux‑saga.

Easy to learn, only six APIs, especially friendly for Redux users.

1.5 ES6 – next‑generation JavaScript standard

Upgrade from ES5, provides richer syntax sugar, reduces code size and solves many legacy issues.

ES6 is currently the most widely used JavaScript standard.

1.6 Axios – Promise‑based HTTP client for browser and Node.js

Create XMLHttpRequests in the browser.

Create HTTP requests in Node.js.

Supports Promise API.

Request/response interception.

Automatic JSON conversion.

Request cancellation.

Built‑in XSRF protection.

2. Project Structure Overview

2.1 node_modules – package storage

Stores libraries installed via npm (e.g., React, Webpack, carousel plugins) similar to backend's NuGet.

2.2 package.json – component version management

Manages versions of node_modules packages.

Also serves as the version file when developing a custom npm component library.

2.3 .babelrc – ES6 syntax parsing configuration

Handles browser compatibility for next‑generation JavaScript.

Placed at project root, works together with Webpack.

2.4 Webpack configuration files

Development and production builds have different requirements (e.g., code minification, hot‑reload). Common files include:

webpack.config.common.js – shared configuration.

webpack.config.dev.js – development configuration.

webpack.config.prod.js – production configuration.

2.5 src – source directory (components, configs, models, services, utils, index.ejs, index.js, router.js)

3. src Directory Details

Development workflow for a page:

Create component files (JS, LESS) in the components folder and connect them with DVA.

Register the component in router.js.

Add corresponding model files.

Add service files for API calls.

Register models in index.js or via router.

Perform front‑back API integration.

3.1 components

Stores business components, typically containing:

JS files

LESS files

Image assets

Example JSX component

import React from 'react'; // import React component
const param = 1; // define constant
class Test extends React.Component {
constructor(props) {
super(props);
    this.state = { num: 1 };
  }

  clickFunc = () => {
    let { num } = this.state;
    num++;
    this.setState({ num });
  };

  render() {
    const { num } = this.state;
    return (
{num}
点击
);
  }
}

export default Test;

LESS style file example

// Define styles
.content {
.count {
/* nested styles */
}
}

3.2 models

Define namespaces, actions (effects), and state handling for each page.

import * as lightMemberRightsManage from '../services/lightMemberRightsManage';

export default {
  namespace: 'lightMemberRightsManage',
  state: {},
  effects: {
    *lightMemberRightsManageGetList({ payload, callback }, { call, put }) {
      const testRes = yield call(lightMemberRightsManage.lightMemberRightsManageGetList, payload);
      yield put({ type: 'success', payload: { lightMemberRightsManageGetListResult: testRes } });
      callback && callback(testRes);
      return testRes;
    },
  },
  reducers: {
    success(state, { payload }) {
      return { ...state, ...payload };
    },
  },
};

3.3 services

Async request wrappers.

import axios from '../utils/axios';
import Api from '../configs/api';

export function lightMemberRightsManageGetList(params) {
  return axios.get(configs.host.test + Api.lightMemberRightsManageGetList, { params });
}

3.4 utils

Custom utility library (e.g., Axios wrapper, common data‑processing functions).

3.5 index.js

Project entry file.

Import global styles.

Connect models to components.

Import router.

3.6 index.ejs

Single‑page application HTML entry template.

3.7 router.js

Defines page routes.

import React from 'react';
import PropTypes from 'prop-types';
import { Switch, Route, routerRedux } from 'dva/router';
import dynamic from 'dva/dynamic';

const { ConnectedRouter } = routerRedux;
const RouterWrapper = ({ history, app }) => {
  const Home = dynamic({
    app,
    component: () => import('./components/Home'),
  });
  return (
);
};

4. Page Development Process

Generate component, model, and service files via VSCode plugin.

Register the route.

Reference the model in index.js.

Fine‑tune models and services.

Adjust API endpoints to match backend services.

5. Hands‑On: Using the Scaffold to Build a Merchant‑Side Project

// Install the scaffold globally
npm i fl-hscli -g

// Create a new project (projectName is your desired name)
create-react-app-fl projectName

// Install internal component libraries before other packages
npm --registry http://10.0.1.244:8081/repository/npm-group/ install [email protected] --save

// Install remaining dependencies (use cnpm for faster download in China)
npm i
cnpm i   // after installing cnpm globally

// Start the project
npm start

6. Merchant‑Side Display Effect

Notes

Node.js must be installed to use npm commands.

Install cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org

Configure callback URLs in the internal management system; access the dev environment via your own domain, e.g., http://192.168.0.105:3008/?MerchantId=your‑merchant‑id .

7. Package Management Tools

npm

Official Node package manager; installs the highest version if no lockfile is present.

Can be slow or blocked for foreign packages.

cnpm

Chinese mirror of npm (Taobao), much faster.

Syncs with npm every 10 minutes; does not read package-lock.json .

yarn

Supports resumable downloads and version locking; after npm5 the differences are minor.

8. Improving Development Efficiency

JavaScript

Extract common modules.

Use code snippets and VSCode extensions.

Encapsulate reusable logic.

Leverage npm scripts for project scaffolding.

CSS

Standardize spacing, colors, font sizes, line‑height, centering, and floats.

Development Standards

Follow the prescribed directory structure.

Use semantic, camelCase file names; component names start with an uppercase letter.

Benefits

Clear directory layout makes troubleshooting easier.

New team members can onboard quickly.

9. Development Caveats

Avoid importing components that do not support on‑demand loading, as they increase bundle size.

Ensure top‑level LESS selectors are unique to prevent style collisions in production builds.

Do not call setState inside render to avoid infinite loops; avoid mutating this.state directly.

Never assign values directly to props .

Further iterations and enhancements will continue.