How AI Accelerated a Rax‑to‑React Component Migration: A Full Case Study

Background

During the M‑site (WAP) homepage reconstruction, a challenging requirement arose: migrate the existing Rax‑based waterfall component to a new React project and rewrite the DX‑based FactoryCard component in React. Traditional manual migration would involve extensive effort to understand cross‑platform logic, adapt APIs, and resolve style incompatibilities.

The author decided to try AI‑assisted development using the Cursor environment to speed up the process, discovering both impressive productivity gains and areas that still required manual oversight.

Challenges

Cross‑framework adaptation : Rax and React share syntax but differ in details.

DX to React rewrite : Converting internal DX components to React+CSS required deep code comprehension.

Business logic optimization : Simplify a two‑level filter to a single level while keeping data structures compatible.

Project standards compliance : The migrated component must meet new guidelines such as responsiveness, RTL support, and accessibility.

Engineering transformation : Extract API calls, create a mock data system, and ensure a stable development environment.

AI‑Assisted Development Process

Step 1: Requirement Analysis

The author used a structured prompt to clarify migration goals and constraints, specifying core objectives (e.g., move MultiFloors from Rax to React, rename to FactoryRecommendWaterfall, convert DX components, simplify filters) and technical constraints (maintain backward‑compatible data, convert SCSS+rpx to Less+px, extract APIs, follow component specs).

<span>核心目标：</span>
● 将 Rax 框架的 new‑m‑site 项目中的 MultiFloors 组件迁移到 fy25‑m‑site 项目中去，重构为 React 框架
● 重命名为 FactoryRecommendWaterfall 组件，体现业务特性
● 将 DX 原生组件用 React+CSS 重新实现
● 简化二级筛选为一级筛选，只需要 subTab 部分

<span>技术约束：</span>
● 必须保持数据结构的向后兼容
● 样式需要从 scss+rpx 转换为 less+px
● API 调用需要抽离到服务层
● 需要建立本地 Mock 数据系统
● 符合 fy25‑m‑site M 站组件规范 (RTL、响应式、无障碍)

<span>业务约束：</span>
● 移除点击 Tab 滚动到顶部的功能（产品要求）
● 确保埋点组件 MDotElement 使用正确

Step 2: Code & Framework Analysis

The author opened both the old Rax project and the new React project side‑by‑side in VSCode, allowing the AI to compare module structures directly.

// Rax version core structure
import { createElement, useEffect, useState, useRef } from 'rax';
import View from 'rax-view';

const MultiFloors = () => {
  return (
    <View className="Grid-cell u-full">
      <View className="sticky-tab">
        <Tab tabs={tabs} onChange={onTabChange} />
      </View>
      {dxData.moduleList?.map(item => (
        <DxRender key={item.data.action} data={item.data} templateDTO={templateDTO} />
      ))}
    </View>
  );
};

// React version result
import React, { useEffect, useState } from 'react';

const FactoryRecommendWaterfall: React.FC<FactoryRecommendWaterfallProps> = (props) => {
  return (
    <div className="factory-recommend-waterfall">
      <div className="sticky-tab">
        <Tab tabs={tabs} onChange={handleTabChange} />
      </div>
      {dxData.moduleList?.map((item, index) => (
        <FactoryCard key={item?.data?.action} data={item?.data} index={index} />
      ))}
    </div>
  );
};

Step 3: Solution Design

Based on the analysis, the AI and the author co‑created a detailed migration plan, covering directory layout, component conversion, API extraction, type definitions, and styling migration.

## MultiFloors 组件迁移计划
### 📋 迁移概况
- **源组件**: `new-m-site/src/components/MultiFloors` (Rax)
- **目标组件**: `fy25-m-site/src/components/FactoryRecommendWaterfall` (React)
- **主要变更**: Rax → React，接口调用抽离，保持逻辑和样式一致

### 🏗️ 目录结构规划
fy25-m-site/src/components/FactoryRecommendWaterfall/
├── index.tsx               # 主组件文件
├── index.less              # 样式文件 (迁移自原组件)
├── Tab/                    # Tab 子组件目录
│   ├── index.tsx           # Tab 组件 (只保留 subTab 部分)
│   └── index.less          # Tab 样式
└── types.ts                # TypeScript 类型定义

### 🔄 核心改动清单
#### 1. 框架迁移 (Rax → React)
- ✅ `View` → `div`
- ✅ `Text` → `span` 或合适的 HTML 标签
- ✅ `createElement` → React 的 `createElement`
- ✅ Rax hooks → React hooks

#### 2. 接口调用抽离
- ✅ 将 `initTabs()` → `getMultiFloorsTabs()`
- ✅ 将 `getResultList()` → `getMultiFloorsData()`
- ✅ 使用 `gatewayRequest` 替代直接的 `axios`

#### 3. 组件入参优化
- ✅ 添加 `tabId` 必需参数
- ✅ 支持外部传入初始 tab 配置

#### 4. Tab 组件简化
- ✅ 只保留 `subTab` 部分功能
- ✅ 移除多层级 tab，仅保留单层筛选

#### 5. DxRender 处理
- ✅ 将 `<DxRender />` 调用注释掉，留占位说明

### 📝 接口迁移详情
export const getMultiFloorsTabs = async () => {
  return await gatewayRequest({ query: { modelId: '10161' } });
};
export const getMultiFloorsData = async (params) => {
  return await gatewayRequest({ query: { modelId: '10162', ...params, pageSize: 10, endpoint: 'wap' } });
};

### 🎯 验收标准
1. ✅ 组件能够正常渲染和交互
2. ✅ Tab 切换功能正常，支持一层筛选
3. ✅ 滚动加载功能正常
4. ✅ 样式与原组件保持一致
5. ✅ 接口调用正常，数据展示正确
6. ✅ DxRender 部分已注释，不影响组件运行
7. ✅ 组件接受 `tabId` 参数并正常工作

### ⚠️ 注意事项
- DxRender 组件调用将被注释，需要后续替换为 React 组件
- 保持原有的模板处理逻辑，供 React 组件后续使用
- Tab 组件简化为单层，如需多层可后续扩展
- 样式单位使用 rpx，确保移动端适配正常

Step 4: Incremental Implementation

The AI generated representative code snippets for each migration stage, such as converting Rax views to React divs, rewriting the FactoryCard component, and extracting service‑layer APIs.

// Service layer extraction
export const getFactoryRecommendWaterfallTabs = async () => {
  if (window.location.hostname === 'localhost') {
    const { mockTabs } = await import('@/components/FactoryRecommendWaterfall/mock');
    return { tabs: mockTabs };
  }
  // Production API call …
};

// Simplify Tab component
const allSubs: TabItem[] = [];
 tabs.forEach(tab => {
   if (tab.children && tab.children.length > 0) {
     allSubs.push(...tab.children); // Promote child tabs to main navigation
   }
 });
 setAllSubTabs(allSubs);

Step 5: Issue Discovery & Fixes

Typical problems encountered included style details, text truncation, and CORS issues. The AI suggested solutions, but some required manual debugging.

// Style detail issue – product list scroll boundary
.factory-product-list {
  display: flex;
  padding-right: 12px;
  gap: 4px;
  &::after {
    content: '';
    width: 12px;
    flex-shrink: 0;
  }
}

// Text truncation issue
.company-detail-row .subtitle-list .subtitle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Step 6: AI‑Assisted Efficiency Analysis

The author reflects on AI’s strengths—fast pattern recognition, engineering‑oriented suggestions, and continuous learning—and its limitations, such as insufficient style fine‑tuning, shallow business‑logic understanding, and incomplete cross‑platform nuance handling.

Reusable Migration Paradigm

Pre‑analysis : Clarify component boundaries and identify cross‑framework differences.

Architecture design : Plan API extraction, data flow, and component decomposition.

Incremental implementation : Convert framework, migrate styles, adapt business logic step by step.

Fine‑tuning : Adjust styles, optimize performance, run compatibility tests.

Conclusion & Outlook

The AI‑assisted migration compressed a 2‑3‑day effort into roughly one day, reduced repetitive coding by 80 %, and improved engineering consistency. However, human expertise remains essential for deep business understanding, detailed UI polishing, and overall system design. The author recommends establishing standard AI‑assisted workflows, building a knowledge base of common issues, and training developers to collaborate effectively with AI.