# General Translation Knowledge Base: ¿Cómo traduzco una aplicación de React? URL: https://generaltranslation.com/es/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Traducir una aplicación de React significa internacionalizar sus componentes para que se rendericen en el idioma del usuario y, después, traducir cada cadena a todos los idiomas que admitas. gt-react de General Translation traduce JSX en el mismo documento con el componente ``, y npx gt translate genera un archivo por idioma. Category: Internacionalización Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Traducir una aplicación de React implica dos tareas: la internacionalización (i18n), que hace que los componentes se rendericen en el idioma del usuario, y la traducción de cada cadena a todos los idiomas que admitas. Es una tarea complicada porque el texto está dentro de JSX, mezclado con marcado, variables y plurales cuyas reglas cambian según el idioma (el inglés tiene 2 formas; el árabe, 6). La configuración inicial habitual consiste en sustituir cada cadena por una clave, como `t('home.welcome')`, con un archivo JSON por idioma que hay que mantener sincronizado. Si se traduce sin la UI que lo rodea, un botón «Save» puede acabar en alemán como *sparen* (ahorrar dinero) en lugar de *speichern* (guardar un archivo). ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48 s) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## Formas de traducir una app de React | Enfoque | Lo que hace bien | Lo que te deja a ti | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Una biblioteca de i18n basada en claves ([`i18next`](/kb/general-translation-vs-i18next) con `react-i18next`, o [`react-intl`](/kb/general-translation-vs-react-intl)) | Un runtime maduro para renderizar traducciones, seleccionar formas plurales y dar formato a valores | Reemplazar las cadenas por claves, mantener sincronizado un archivo JSON por idioma y producir todas las traducciones | | [Lingui](/kb/general-translation-vs-lingui) | Mantiene los textos inline con su macro ``, y `lingui extract` genera un catálogo por idioma | Traducir cada catálogo, a mano o mediante un servicio conectado, y volver a ejecutar extract y compile cada vez que cambian los textos | | Un sistema de gestión de traducciones ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | Un editor web, sincronizado con tu repositorio, donde los traductores trabajan con capturas de pantalla, un glosario y memoria de traducción | La biblioteca de i18n y los archivos de claves en tu código, la configuración inicial de la sincronización y esperar a los traductores antes de cada lanzamiento | | General Translation (`gt-react` y la CLI `gt`) | [``](/docs/react/reference/components/t) traduce el JSX en el mismo documento, sin claves, y [`npx gt translate`](/docs/cli/reference/commands/translate) genera un archivo por idioma, usando la estructura JSX circundante como contexto | Envolver el texto en [``](/docs/react/reference/components/t), una configuración inicial única (idiomas en `gt.config.json`, un cargador, un archivo de entrada, inicio de sesión y un ID del proyecto) y volver a ejecutar [`npx gt translate`](/docs/cli/reference/commands/translate) (en local o en CI) cada vez que cambia el contenido | Usa solo una biblioteca basada en claves, con archivos JSON escritos a mano, si la app tiene pocas cadenas y casi nunca cambian. Usa Lingui si quieres mantener los textos inline y cuentas con traductores que completen sus catálogos, y un sistema de gestión de traducciones si un equipo de localización traduce a mano cada lanzamiento. Usa General Translation si la app cambia constantemente y cada lanzamiento tiene que salir en todos los idiomas. ## Traducir una aplicación de React con General Translation La biblioteca de código abierto `gt-react` y la CLI `gt` de General Translation permiten traducir una aplicación de una sola página (SPA) de React, como un proyecto de Vite o webpack. El asistente de configuración inicial `npx gt@latest` puede configurar por ti el punto de entrada de Vite y la carga de traducciones (es un paso experimental). Si prefieres configurarlo manualmente: 1. Instala `gt-react` y la CLI `gt`. 2. Indica tus idiomas en `gt.config.json`. 3. Agrega una función [`loadTranslations`](/docs/react/reference/functions/load-translations) y llama a [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) en un pequeño archivo de entrada para que las traducciones se carguen antes de que se renderice la aplicación. 4. Envuelve tu texto en el componente [``](/docs/react/reference/components/t): ```tsx title="src/components/Welcome.tsx" import { T } from 'gt-react'; export default function Welcome() { return (

Welcome to my app

This content will be translated automatically.
); } ``` 5. Inicia sesión con [`npx gt login`](/docs/cli/reference/commands/login) y establece el ID del proyecto. 6. Ejecuta [`npx gt translate`](/docs/cli/reference/commands/translate) para generar un archivo de traducciones por idioma. La prop `context` de [``](/docs/react/reference/components/t) permite desambiguar palabras como «Save», y el glosario y los prompts personalizados del panel de control mantienen la coherencia de la terminología y el tono. Las aplicaciones de [React server-rendered](/docs/react/react-quickstart), [React Router en modo framework](/docs/react/react-router-quickstart) y [Next.js](/docs/react/nextjs-quickstart) (con `gt-next`) tienen sus propias guías de inicio rápido; para una SPA, consulta todos los pasos en la [Guía de inicio rápido para una SPA de React](/docs/react/react-spa-quickstart). ## Related questions - [¿Cómo agrego i18n a una aplicación de Next.js con App Router?](https://generaltranslation.com/es/kb/add-i18n-to-nextjs.mdx): Empieza con gt init para configurar General Translation en un proyecto compatible con App Router; luego marca el contenido de origen, genera las traducciones y verifica el cambio de idioma. gt-next mantiene el texto en JSX junto con el contexto de traducción; la CLI, el editor del panel de control y Locadex se encargan de la generación, la revisión y las actualizaciones continuas. Esta guía también muestra la configuración inicial explícita con archivos locales. - [¿Cómo traduzco una app de React Native?](https://generaltranslation.com/es/kb/translate-react-native-app.mdx): Marca el texto en tus componentes, genera un archivo de traducciones para cada idioma, agrega polyfills de Intl y carga el archivo correspondiente al idioma del dispositivo. Con gt-react-native, la biblioteca experimental de General Translation, envuelves el texto en ``, un plugin de Babel agrega los polyfills y npx gt translate genera los archivos. - [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Las bibliotecas gt-react y gt-next de General Translation permiten hacer i18n en React y Next.js sin claves de traducción y sin tener que mantener un archivo JSON por idioma. El texto permanece inline en JSX dentro del componente ``, y el comando gt translate genera las traducciones de cada idioma durante la compilación, con contexto extraído de tu código. Locadex puede mantenerlas al día mediante pull requests. - [¿Cómo traduzco cadenas fuera de JSX?](https://generaltranslation.com/es/kb/translate-strings-outside-jsx.mdx): Pasa cada cadena que no sea un hijo de JSX, como un marcador de posición o una constante en el ámbito del módulo, por una función de traducción en el lugar donde se renderiza. El hook useGT de General Translation devuelve esa función, y msg junto con useMessages traduce las constantes definidas fuera de un componente. - [¿Cómo gestiono los plurales en React?](https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx): Para gestionar los plurales en React, asigna a cada idioma una oración por cada forma plural y selecciónala con las reglas de plural de ese idioma, ya que el inglés tiene 2 formas, el ruso tiene 4 y el árabe tiene 6. El componente `` de General Translation en gt-react y gt-next recibe tus formas de origen, y General Translation genera las formas que necesita cada idioma de destino. ## Previous and next questions - Previous question: [¿Cómo traduzco una aplicación de Node.js?](https://generaltranslation.com/es/kb/translate-node-app.mdx) - Next question: [¿Cómo traduzco una aplicación Vue?](https://generaltranslation.com/es/kb/translate-vue-app.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.