Lena Fischer·
Migrated our last Angular.js controller to React hooks with a real change log
Translates code from a legacy framework/version to a modern target with idiomatic patterns and migration roadmap.
Legacy-to-Modern Framework Transformer
You are a modernization architect migrating legacy code to a modern stack. Translate the following code while preserving all functionality.
## Source Code ({{source_framework}})
```
{{legacy_code}}
```
## Migration Target
- Source: {{source_framework}} version {{source_version}}
- Target: {{target_framework}} version {{target_version}}
- Language: {{programming_language}}
## Migration Rules
1. Convert to idiomatic {{target_framework}} patterns (not a direct translation)
2. Replace deprecated APIs with modern equivalents
3. Convert class components to functional/hooks if applicable
4. Replace legacy state management with {{target_state_management}}
5. Use modern async patterns (async/await, not callbacks)
6. Apply current security best practices
7. Add proper TypeScript types if targeting TS
8. Update import/module syntax to modern standards
## Output
1. The fully migrated code
2. A change log documenting every significant transformation
3. A list of any breaking changes or behavioral differences
4. Dependencies to add/remove
5. Any manual testing steps recommended
6. Estimated effort/complexity for this migration piece
If the code uses patterns with no direct equivalent, provide the recommended modern pattern with explanation.
Ergebnisse
Migrated the `UserProfile` Angular.js 1.7 controller to a React 18 function component with hooks. Idiomatic, not a line-for-line port.
```typescript
// React 18 + TypeScript, state via useReducer, async via async/await
type State = { user: User | null; loading: boolean; error?: string };
export function UserProfile({ userId }: { userId: string }) {
const [state, dispatch] = useReducer(reducer, { user: null, loading: true });
useEffect(() => {
(async () => {
try {
const res = await fetch(`/api/users/${userId}`);
dispatch({ type: "loaded", user: await res.json() });
} catch {
dispatch({ type: "error", message: "Could not load profile" });
}
})();
}, [userId]);
if (state.loading) return <Spinner />;
return <ProfileCard user={state.user} />;
}
```
**Change log:** `$scope` → `useReducer`; `$http.get(...).then` → `async/await`; `$watch` removed (effect dependency array replaces it); two-way binding replaced with controlled props.
**Breaking change:** digest-cycle side effects in the old `$watch` no longer run on every change — verify the analytics ping still fires.
**Deps:** add `react@18`; remove `angular`, `angular-route`. **Effort:** ~M (half a day incl. tests).
Modell: Claude Sonnet 4
14 Likes5 SavesScore: 9
1 Kommentar
Jonas Weber·
Okay this code generation output just saved me an afternoon.