Welcome to our platform

Start your journey with us today

\n \n

\n );\n}\n```\n\n**Requisitos para la extracción:**\n\n1. Reemplazar las cadenas de texto codificadas con hooks y componentes de react-intl\n2. Utilizar el formato ICU para variables y plurales\n3. Estructurar las claves jerárquicamente según la organización de componentes\n4. Añadir todas las claves al archivo JSON fuente\n5. Mantener convenciones de nomenclatura consistentes\n\n**Prompt para la IA:**\n\n```\nExtrae todas las cadenas de texto codificadas de los componentes React y:\n\n1. Reemplázalas con react-intl:\n - Utiliza el hook useIntl para cadenas dinámicas\n - Utiliza FormattedMessage para texto estático\n - Añade formato ICU para variables ({name}) y plurales ({count})\n\n2. Estructura las claves de traducción:\n - Agrupa por jerarquía de componentes (components.*, pages.*)\n - Utiliza claves descriptivas y anidadas (header.nav.home)\n - Haz coincidir la estructura de componentes en JSON\n\n3. Actualiza los archivos de idioma:\n - Añade todas las claves a src/locales/en.json\n - Mantén una nomenclatura consistente en toda la aplicación\n```\n\n**Después de la extracción con IA:**\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**Archivo en.json generado:**\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## Procesamiento por lotes\n\nPara múltiples componentes, selecciona todos los archivos y utiliza el mismo prompt integral. Los IDE con IA como Cursor, GitHub Copilot y otros pueden procesar múltiples archivos simultáneamente, manteniendo una nomenclatura de claves consistente en toda tu aplicación.\n\n## Generación de traducciones\n\nUna vez que tu IDE con IA extraiga las claves, genera las traducciones:\n\n```bash\nnpx lingo.dev@latest i18n\n```\n\nEsto crea versiones traducidas de tu archivo fuente:\n\n```bash\nsrc/locales/\n en.json (fuente con claves extraídas)\n es.json (traducciones al español)\n fr.json (traducciones al francés)\n de.json (traducciones al alemán)\n```\n\n## Validación\n\nDespués de la extracción, verifica tu configuración:\n\n**Comprueba la cobertura de traducción:**\n\n```bash\nnpx lingo.dev@latest i18n --frozen\n```\n\nEste comando falla si falta alguna traducción, asegurando una cobertura completa.\n\n**Prueba con diferentes locales:**\n\n```jsx\n// Cambia el locale en tu aplicación para verificar que las traducciones funcionan\n\n \n\n```\n","content","\nConvertir una aplicación React existente para que admita múltiples idiomas es a veces un proceso tedioso que consiste en encontrar cadenas de texto codificadas y reemplazarlas con claves de traducción.\n\n**Lingo.dev CLI** funciona perfectamente con IDEs potenciados por IA como Cursor, GitHub Copilot y herramientas similares para automatizar la extracción de contenido traducible de tus componentes React.\n\nEl concepto explicado a continuación puede utilizarse para cualquier stack tecnológico, pero para simplificar y demostrar la idea, utilizaremos una aplicación React de tipo \"hola mundo\" como ejemplo.\n\n## Requisitos previos\n\nAntes de extraer las claves, configura la internacionalización básica en tu aplicación React. Para obtener instrucciones completas de configuración, consulta la [documentación de react-intl](https://formatjs.io/docs/react-intl/).\n\nDespués de seguir la configuración de internacionalización para tu stack tecnológico, tu proyecto debería tener:\n\n- Capacidad para cambiar dinámicamente entre idiomas en la aplicación\n- Estructura básica del proyecto para organizar archivos de traducción\n\n## Proceso de configuración\n\n**Instala y configura Lingo.dev CLI:**\n\n```bash\nnpx lingo.dev@latest init\n```\n\n**Crea un archivo fuente vacío:**\n\n```bash\nmkdir -p src/locales\necho '{}' > src/locales/en.json\n```\n\n**Configura 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## Extracción de claves con IA\n\n**Selecciona tu componente React** y utiliza tu IDE con IA para extraer las cadenas de texto codificadas:\n\n**Antes de la extracción:**\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

Extracción de claves i18n con IA