Welcome to our platform

Start your journey with us today

\n \n

\n );\n}\n```\n\n**Anforderungen für die Extraktion:**\n\n1. Ersetzen Sie hartcodierte Zeichenketten durch react-intl-Hooks und -Komponenten\n2. Verwenden Sie ICU-Formatierung für Variablen und Pluralformen\n3. Strukturieren Sie Schlüssel hierarchisch nach Komponentenorganisation\n4. Fügen Sie alle Schlüssel zur Quell-JSON-Datei hinzu\n5. Halten Sie konsistente Namenskonventionen ein\n\n**KI-Prompt:**\n\n```\nExtrahieren Sie alle hartcodierten Zeichenketten aus React-Komponenten und:\n\n1. Ersetzen Sie mit react-intl:\n - Verwenden Sie useIntl-Hook für dynamische Zeichenketten\n - Verwenden Sie FormattedMessage für statischen Text\n - Fügen Sie ICU-Formatierung für Variablen ({name}) und Pluralformen ({count}) hinzu\n\n2. Strukturieren Sie Übersetzungsschlüssel:\n - Gruppieren Sie nach Komponentenhierarchie (components.*, pages.*)\n - Verwenden Sie beschreibende, verschachtelte Schlüssel (header.nav.home)\n - Passen Sie die Komponentenstruktur in JSON an\n\n3. Aktualisieren Sie Locales:\n - Fügen Sie alle Schlüssel zu src/locales/en.json hinzu\n - Halten Sie konsistente Benennung in der gesamten App ein\n```\n\n**Nach der KI-Extraktion:**\n\n```jsx\nimport { useIntl } from \"react-intl\";\n\nfunction WelcomeCard() {\n const intl = useIntl();\n\n return (\n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

\n );\n}\n```\n\n**Generierte en.json:**\n\n```json\n{\n \"welcome.title\": \"Welcome to our platform\",\n \"welcome.description\": \"Start your journey with us today\",\n \"welcome.getStarted\": \"Get started\"\n}\n```\n\n## Batch-Verarbeitung\n\nFür mehrere Komponenten wählen Sie alle Dateien aus und verwenden denselben umfassenden Prompt. KI-IDEs wie Cursor, GitHub Copilot und andere können mehrere Dateien gleichzeitig verarbeiten und dabei eine konsistente Schlüsselbenennung in Ihrer Anwendung beibehalten.\n\n## Übersetzungsgenerierung\n\nSobald Ihre KI-IDE die Schlüssel extrahiert hat, generieren Sie Übersetzungen:\n\n```bash\nnpx lingo.dev@latest i18n\n```\n\nDies erstellt übersetzte Versionen Ihrer Quelldatei:\n\n```bash\nsrc/locales/\n en.json (Quelle mit extrahierten Schlüsseln)\n es.json (Spanische Übersetzungen)\n fr.json (Französische Übersetzungen)\n de.json (Deutsche Übersetzungen)\n```\n\n## Validierung\n\nÜberprüfen Sie nach der Extraktion Ihre Einrichtung:\n\n**Überprüfen Sie die Übersetzungsabdeckung:**\n\n```bash\nnpx lingo.dev@latest i18n --frozen\n```\n\nDieser Befehl schlägt fehl, wenn Übersetzungen fehlen, und gewährleistet so eine vollständige Abdeckung.\n\n**Testen Sie mit verschiedenen Locales:**\n\n```jsx\n// Wechseln Sie die Locale in Ihrer App, um zu überprüfen, ob die Übersetzungen funktionieren\n\n \n\n```\n","content","\nDie Umstellung einer bestehenden React-App zur Unterstützung mehrerer Sprachen ist manchmal ein mühsamer Prozess, bei dem hartcodierte Zeichenketten gefunden und durch Übersetzungsschlüssel ersetzt werden müssen.\n\n**Lingo.dev CLI** arbeitet nahtlos mit KI-gestützten IDEs wie Cursor, GitHub Copilot und ähnlichen Tools zusammen, um die Extraktion übersetzbarer Inhalte aus Ihren React-Komponenten zu automatisieren.\n\nDas unten erläuterte Konzept kann für jeden Tech-Stack verwendet werden, aber der Einfachheit halber und um die Idee zu demonstrieren, verwenden wir eine Hello-World-React-App als Beispiel.\n\n## Voraussetzungen\n\nBevor Sie Schlüssel extrahieren, richten Sie die grundlegende Internationalisierung in Ihrer React-App ein. Vollständige Einrichtungsanweisungen finden Sie in der [react-intl-Dokumentation](https://formatjs.io/docs/react-intl/).\n\nNach Befolgung der Internationalisierungseinrichtung für Ihren Tech-Stack sollte Ihr Projekt Folgendes aufweisen:\n\n- Die Möglichkeit, dynamisch zwischen Sprachen in der App zu wechseln\n- Grundlegende Projektstruktur zur Organisation von Übersetzungsdateien\n\n## Einrichtungsprozess\n\n**Installieren und konfigurieren Sie Lingo.dev CLI:**\n\n```bash\nnpx lingo.dev@latest init\n```\n\n**Erstellen Sie eine leere Quelldatei:**\n\n```bash\nmkdir -p src/locales\necho '{}' > src/locales/en.json\n```\n\n**Konfigurieren Sie i18n.json:**\n\n```json\n{\n \"locale\": {\n \"source\": \"en\",\n \"targets\": [\"es\", \"fr\", \"de\"]\n },\n \"buckets\": {\n \"json\": {\n \"include\": [\"src/locales/[locale].json\"]\n }\n }\n}\n```\n\n## Extrahieren von Schlüsseln mit KI\n\n**Wählen Sie Ihre React-Komponente** und verwenden Sie Ihre KI-IDE, um hartcodierte Zeichenketten zu extrahieren:\n\n**Vor der Extraktion:**\n\n```jsx\nfunction WelcomeCard() {\n return (\n

Welcome to our platform

Start your journey with us today

\n \n

{intl.formatMessage({ id: \"welcome.title\" })}

{intl.formatMessage({ id: \"welcome.description\" })}

\n \n

Extrahieren von i18n-Schlüsseln mit KI