Fähigkeiten react-modernization
📦

react-modernization

Sicher

React-Anwendungen auf die neuesten Versionen modernisieren

Auch verfügbar von: wshobson

Legacy-React-Codebasen werden schwer zu warten und verpassen Leistungsverbesserungen. Dieser Skill führt Sie durch Versions-Upgrades, Hooks-Migration und die Nutzung von React 18 Concurrent-Features.

Unterstützt: Claude Codex Code(CC)
📊 71 Angemessen
1

Die Skill-ZIP herunterladen

2

In Claude hochladen

Gehe zu Einstellungen → Fähigkeiten → Skills → Skill hochladen

3

Einschalten und loslegen

Teste es

Verwendung von "react-modernization". Class component with componentDidMount and setState

Erwartetes Ergebnis:

Funktionale Komponente mit useState für State und useEffect mit leerem Abhängigkeitsarray für Mount-Logik, Cleanup-Funktion für Unmount

Verwendung von "react-modernization". React 17 ReactDOM.render call

Erwartetes Ergebnis:

React 18 createRoot API mit korrekter Container-Element-Auswahl und Error-Boundary-Setup

Verwendung von "react-modernization". Synchronous state updates in event handler

Erwartetes Ergebnis:

Transition-umhüllte State-Updates für nicht-dringende UI-Änderungen mit isPending-Ladeanzeige

Sicherheitsaudit

Sicher
v1 • 2/24/2026

Static analyzer flagged 48 patterns but all are false positives. This skill contains documentation-only markdown files with React code examples. Dynamic imports are standard React lazy() patterns, shell commands are documentation for codemod usage, and fetch calls are example code snippets. No executable code exists in this skill.

2
Gescannte Dateien
550
Analysierte Zeilen
0
befunde
1
Gesamtzahl Audits
Keine Sicherheitsprobleme gefunden
Auditiert von: claude

Qualitätsbewertung

38
Architektur
100
Wartbarkeit
87
Inhalt
32
Community
100
Sicherheit
91
Spezifikationskonformität

Was du bauen kannst

Legacy-React-Anwendung Upgrade

Upgrade einer älteren React 16-Anwendung auf React 18 mit automatischem Batching und Concurrent-Features

Class zu Hooks Migration

Konvertieren von Klassenkomponenten mit Lifecycle-Methoden zu modernen funktionalen Komponenten mit useState und useEffect

Leistungsoptimierung

Implementieren von Code-Splitting, Memoisierung und Suspense-Boundaries für verbesserte Anwendungsleistung

Probiere diese Prompts

Basis-Hooks-Konvertierung 
Convert this React class component to use hooks. Identify state variables and lifecycle methods to transform into useState and useEffect.
Versions-Upgrade-Bewertung 
Analyze my React codebase for breaking changes when upgrading from React 17 to 18. List all files that need modifications and provide a migration checklist.
Codemod-Automatisierung 
Generate commands to run React codemods for my project. Include jscodeshift installation, specific transforms for lifecycle methods, and the new JSX transform.
Concurrent-Features-Implementierung 
Refactor this search component to use useTransition for non-urgent updates. Show how to implement Suspense boundaries for data fetching with proper loading states.

Bewährte Verfahren

  • Migrieren Sie inkrementell, beginnend mit Blattkomponenten ohne Kinder
  • Führen Sie umfassende Tests nach jedem Migrationsschritt durch, um Regressionen frühzeitig zu erkennen
  • Verwenden Sie React StrictMode, um unsichere Muster und Nebeneffekte während der Entwicklung zu identifizieren

Vermeiden

  • useMemo oder useCallback hinzufügen, ohne tatsächliche Leistungsprobleme zu messen
  • Vergessen, alle Abhängigkeiten in useEffect-Abhängigkeitsarrays einzubeziehen
  • Mischen von Klassenkomponentenmustern mit Hooks in derselben Komponente

Häufig gestellte Fragen

Muss ich alle Komponenten gleichzeitig migrieren?
Nein. React unterstützt das Mischen von Klassen- und funktionalen Komponenten. Migrieren Sie inkrementell, beginnend mit einfacheren Blattkomponenten.
Werden Codemods die gesamte Migration automatisch bewältigen?
Codemods automatisieren repetitive Transformationen, können aber komplexe Logik nicht bewältigen. Manuelle Überprüfung und Tests sind immer noch erforderlich.
Was ist die Mindestversion von React für Hooks?
Hooks erfordern React 16.8 oder höher. Wenn Sie eine ältere Version verwenden, upgraden Sie zuerst auf 16.8+, bevor Sie zu Hooks migrieren.
Gibt es Leistungsbedenken bezüglich des automatischen Batchings von React 18?
Automatisches Batching verbessert die Leistung, indem es Re-Renders reduziert. Verwenden Sie flushSync nur, wenn Sie sofortige DOM-Updates benötigen.
Wie behandle ich Cleanup in useEffect?
Geben Sie eine Cleanup-Funktion von useEffect zurück, die Abbrüche von Subscriptions, Fetch-Anfragen oder Timer löscht.
Kann ich Suspense für Data Fetching in der Produktion verwenden?
Suspense für Data Fetching ist in React 18 stabil, erfordert aber kompatible Data-Fetching-Bibliotheken oder benutzerdefinierte Implementierungen.

Entwicklerdetails

Autor

sickn33

Lizenz

MIT

Repository

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/react-modernization

Ref

main

Dateistruktur

📁 resources/

📄 implementation-playbook.md

📄 SKILL.md