AngularJS to React Blueprint
Migrate a legacy AngularJS 1.x app to React route-by-route using a routing proxy or shell, replacing services and data fetching with hooks and React Query, then removing AngularJS at cutover.
What and Why
Unlike AngularJS-to-Angular, moving AngularJS (1.x) to React is a framework switch with no official upgrade bridge. React's component model, one-way data flow, and hooks differ from AngularJS scopes and two-way binding. The pragmatic approach is the strangler-fig: run React alongside AngularJS and migrate route-by-route until AngularJS is gone, rather than a risky big-bang rewrite.
Phases
Assessment. Inventory AngularJS routes (ngRoute/ui-router), directives, controllers, services, and third-party modules. Map each route to a target React page. Establish end-to-end tests to lock current behavior.
Shell setup. Introduce a Vite/React build and a composition strategy. Options include a routing proxy that sends some paths to React and others to AngularJS, or mounting React components inside AngularJS via a directive wrapper (and vice versa) for finer-grained coexistence.
Route migration. Convert one route at a time. Replace AngularJS templates and controllers with React components and hooks. Recreate shared widgets in a React component library matching the design system. Route migrated paths to React via the proxy/shell.
State and data. Replace $http with fetch/Axios in typed clients and React Query for server state. Replace AngularJS services with hooks/context or a store (Zustand/Redux Toolkit) as needed. Bridge shared state during coexistence via events or a thin shared store.
Cutover. When the last route is React, remove AngularJS, jQuery (usually transitive), and the bridge. Ship a pure React app and enable full code-splitting.
Key Risks and Mitigations
- No upgrade bridge: Use a routing proxy/shell so the two frameworks never need deep integration.
- Skills gap: Hooks and one-way data flow differ from AngularJS; train and pair early.
- Regression: Cover each route with end-to-end tests before and after migration.
Recommended Tooling
React, Vite, TypeScript, React Router, React Query, a design-system component library, Playwright for end-to-end tests, and a reverse proxy or shell for incremental routing.
Success Metrics
Reduced bundle size after removing AngularJS/jQuery, faster feature lead time, rising test coverage, and elimination of unsupported-framework findings.
Prerequisites
A solid end-to-end test suite, a Node.js build pipeline, a route-to-page map, and a composition strategy chosen up front.