# General Translation Knowledge Base: Alternativas a react-intl: General Translation vs. react-intl URL: https://generaltranslation.com/es/kb/general-translation-vs-react-intl.mdx Docs index: https://generaltranslation.com/llms.txt Description: General Translation permite a los equipos de React conservar la sintaxis de mensajes ICU y, además, añade generación de traducciones, terminología compartida y revisión en el panel de control. react-intl ofrece formato y herramientas de catálogos de FormatJS; General Translation, además, genera las traducciones. Category: Internacionalización Last updated: 2026-10-16 Authors: Kevin Wu, Jackie Chen Published: 2026-10-16 react-intl es la [biblioteca de React de FormatJS](https://formatjs.github.io/docs/react-intl). Escribes cada mensaje inline como `defaultMessage` en formato de mensajes ICU, añades una `description` para los traductores, reúnes todos los mensajes en un catálogo JSON con `formatjs extract` y renderizas los catálogos traducidos mediante `IntlProvider`. No traduce nada: el catálogo extraído queda en tus manos, en las de tus traductores o en las de un sistema de gestión de traducciones (TMS), y los archivos traducidos vuelven para que los compiles. Las bibliotecas de General Translation también renderizan mensajes ICU, pero, además, General Translation genera las traducciones. ## Lo que react-intl hace bien * **Formato de mensajes ICU en todas partes.** [Plurales con `#` y coincidencias exactas como `=0`, `select` y `selectordinal`](https://formatjs.github.io/docs/core-concepts/icu-syntax), basados en las API `Intl` del navegador. * **Texto de origen inline.** FormatJS [recomienda escribir `defaultMessage` y `description` inline](https://formatjs.github.io/docs/getting-started/message-declaration) y dejar que `babel-plugin-formatjs` o `@swc/plugin-formatjs` generen los ID de los mensajes, para que nadie tenga que inventar claves. * **Herramientas para un flujo de trabajo con TMS.** [`formatjs extract`](https://formatjs.github.io/docs/tooling/cli) genera el catálogo, los formateadores integrados producen archivos para Crowdin, Lokalise, Smartling y Transifex, `formatjs compile` preanaliza los mensajes y `formatjs verify` comprueba si en los catálogos faltan o sobran claves. * **TypeScript.** [La versión 12 puede tipar los argumentos ICU de cada mensaje](https://formatjs.github.io/docs/react-intl/upgrade-guide-12.x). * **Mantenimiento activo.** [La versión 12 se publicó en septiembre de 2026](https://github.com/formatjs/formatjs/blob/main/packages/react-intl/CHANGELOG.md), bajo la licencia BSD-3-Clause. ## Lo que react-intl deja en tus manos Aquí tienes una pequeña bandeja de entrada hecha con react-intl. El texto en inglés se queda en el componente como `defaultMessage`: ```jsx title="Inbox.jsx" import { FormattedMessage } from 'react-intl'; export function Inbox({ count }) { return (

); } ``` `formatjs extract` convierte esos mensajes en un catálogo cuyas claves son ID generados: ```json title="lang/en.json" { "U5vJOY": { "defaultMessage": "You have {count, plural, one {# unread message} other {# unread messages}}.", "description": "Number of unread messages in the inbox" }, "gBGgGs": { "defaultMessage": "Inbox", "description": "Heading of the inbox page" } } ``` Cada idioma de destino necesita mensajes traducidos que conserven intacta su sintaxis ICU. `IntlProvider` acepta cadenas de mensajes o mensajes precompilados; `formatjs compile` se encarga de generar estos últimos. Los descriptores extraídos incluyen cada mensaje junto con su descripción. Para obtener los IDs generados de este ejemplo, configura el plugin de Babel o SWC en tu compilación. En el [App Router de Next.js](https://formatjs.github.io/docs/guides/nextjs-app-router), los componentes de react-intl se ejecutan en componentes de cliente, mientras que el código del servidor da formato a los mensajes con `createIntl` de `react-intl/server`. ## Conserva los mensajes ICU y genera las traducciones Las bibliotecas de General Translation cumplen la misma función que react-intl: renderizan mensajes ICU, aplican las reglas de plural de cada configuración regional y dan formato a números, monedas y fechas. Tus cadenas ICU se migran casi sin cambios, porque [`useGT`](/docs/react/reference/hooks/use-gt) admite la misma sintaxis: ```tsx title="Inbox.tsx" import { useGT } from 'gt-react'; export function Inbox({ count }: { count: number }) { const gt = useGT(); return (

{gt('Inbox', { $context: 'Heading of the inbox page' })}

{gt('You have {count, plural, one {# unread message} other {# unread messages}}.', { count, $context: 'Number of unread messages in the inbox', })}

); } ``` [`npx gt translate`](/docs/cli/reference/commands/translate) extrae estas cadenas, genera las traducciones a partir de sus notas de contexto y escribe los catálogos de destino con un solo comando. El ejemplo conserva ambas descripciones de FormatJS como `$context`. Los [términos del glosario y los prompts personalizados](/docs/platform/dashboard/guides/defining-context-for-translations) compartidos guían la terminología y el tono, y los revisores editan los resultados en el [panel de control](/docs/platform/dashboard/guides/reviewing-translations). El `#` se formatea según cada configuración regional, de modo que un recuento de 12345 se muestra como "12,345" en inglés y "12.345" en español. Para JSX con marcado, [``](/docs/react/reference/components/t) traduce todo el bloque marcado, elementos incluidos. En `gt-next`, funciona directamente en Componentes de servidor. El panel de control, la página de inicio y la app de iOS de Ramp están disponibles en más de 11 configuraciones regionales gracias a General Translation. (Consulta los [despliegues en producción](https://generaltranslation.com/enterprise)). ## react-intl vs. General Translation de un vistazo | Característica | react-intl | General Translation | | ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | | Cómo se escriben los textos | `defaultMessage` inline en ICU, extraído a un catálogo JSON | JSX inline en [``](/docs/react/reference/components/t), o cadenas ICU en [`useGT`](/docs/react/reference/hooks/use-gt) | | Traduce tu contenido | No | Sí, con [`npx gt translate`](/docs/cli/reference/commands/translate) | | Flujo de trabajo del catálogo | Extraes los mensajes, los traduces con el flujo de trabajo que elijas y, opcionalmente, los precompilas; un plugin genera los IDs | [`npx gt translate`](/docs/cli/reference/commands/translate) extrae y traduce antes de la compilación | | Contexto de traducción | El mensaje y su descripción | Cadenas ICU con `$context`; estructura JSX marcada con componentes inline; glosario y prompts personalizados compartidos | | App Router de Next.js | Componentes dentro de componentes de cliente; `createIntl` en el servidor | [``](/docs/react/reference/components/t) en componentes de servidor y de cliente | | Licencia | [BSD-3-Clause](https://github.com/formatjs/formatjs/blob/main/packages/react-intl/LICENSE.md) | Bibliotecas de JavaScript y CLI con licencia MIT | Quédate con react-intl si tus catálogos ICU y los formateadores de tu TMS ya funcionan, si dependes de sus argumentos de mensaje tipados o de `formatjs verify`, o si usas FormatJS fuera de React. Elige General Translation si quieres seguir redactando en ICU e integrar la generación y la revisión de traducciones en tu flujo de trabajo de desarrollo. ## Migración desde react-intl Migra los componentes o las rutas de uno en uno. Reemplaza cada `` por una llamada a [`useGT`](/docs/react/reference/hooks/use-gt) que conserve su cadena ICU y pase su descripción como `$context`, tal como se muestra arriba. Para JSX enriquecido, usa [``](/docs/react/reference/components/t#context). Sigue cargando los catálogos existentes de react-intl para los componentes que aún no hayas migrado. Cuando hayas migrado el último componente, elimina el plugin de FormatJS y los scripts de extracción y compilación. (Consulta [Migración de bibliotecas de i18n](/docs/react/guides/migrating-i18n-libraries)). ## Otras alternativas a react-intl Los equipos que dejan react-intl también comparan estas bibliotecas: * **i18next:** renderiza catálogos basados en claves con selección de plurales y, junto con react-i18next y next-i18next, es una opción habitual para aplicaciones de React y Next.js. (Consulta [General Translation vs. i18next](/kb/general-translation-vs-i18next)). * **Lingui:** mantiene el texto inline y compila los mensajes en catálogos con un runtime ligero. (Consulta [General Translation vs. Lingui](/kb/general-translation-vs-lingui)). * **next-intl:** renderiza mensajes de catálogo en aplicaciones que usan el App Router de Next.js, incluidos los Componentes de servidor. (Consulta [next-intl vs. gt-next](/kb/next-intl-vs-gt-next)). * **Paraglide JS:** compila los catálogos en funciones de mensaje tipadas y tree-shakable. (Consulta [General Translation vs. Paraglide JS](/kb/general-translation-vs-paraglide)). * **Intlayer:** guarda el contenido de cada componente en un archivo de declaración tipado, con todos los idiomas juntos. (Consulta [General Translation vs. Intlayer](/kb/general-translation-vs-intlayer)). ## Conclusiones clave * react-intl da formato a los mensajes ICU y proporciona herramientas para gestionar catálogos; la generación de traducciones depende de un flujo de trabajo aparte. * General Translation extrae y traduce con un solo comando de la CLI, conserva el contexto de las descripciones y ofrece a los revisores un editor en el panel de control. * Tus cadenas ICU pasan casi sin cambios a [`useGT`](/docs/react/reference/hooks/use-gt), componente por componente. ## Related questions - [General Translation vs. i18next, react-intl y next-intl: ¿qué biblioteca de i18n deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-i18n-libraries.mdx): Las bibliotecas de código abierto como i18next, react-intl y next-intl no traducen nada. Muestran las traducciones que tú proporcionas en un archivo de catálogo para cada idioma, escritas por ti, por tus traductores o por un servicio externo. Las bibliotecas de General Translation también son de código abierto y cumplen la misma función, pero además General Translation se encarga de traducir, usando tu código como contexto. - [Alternativas a i18next: General Translation vs. i18next](https://generaltranslation.com/es/kb/general-translation-vs-i18next.mdx): Elige General Translation para mantener los textos inline en los componentes de React y generar traducciones a partir de su estructura JSX y del contexto del producto. También puedes seguir usando i18next y recurrir a General Translation para traducir los catálogos existentes. i18next se encarga de renderizar los mensajes y seleccionar los plurales, pero las traducciones las genera un servicio aparte. - [General Translation vs. Lingui: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-lingui.mdx): Elige General Translation para mantener el texto inline como en Lingui y generar las traducciones usando tu estructura JSX como contexto. Lingui extrae los mensajes inline a catálogos para que tus traductores o un servicio conectado los traduzcan. La CLI de General Translation actualiza las traducciones a medida que cambia tu código, y tu equipo las revisa en el panel de control. - [General Translation vs. vue-i18n: ¿cuál deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-vue-i18n.mdx): General Translation permite a los equipos de Vue escribir el texto de origen directamente en las plantillas y generar traducciones con la CLI. Su plugin gt-vue renderiza ese contenido con formato de plurales y de números adaptado a la configuración regional. Elígelo si quieres dejar de mantener archivos de origen basados en claves; vue-i18n sigue siendo una buena opción para equipos que usan el módulo i18n de Nuxt y un flujo de trabajo de catálogos ya consolidado. - [¿Cómo gestiono los plurales en React?](https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx): No codifiques la lógica de pluralización a mano con comprobaciones como n === 1. Para aplicaciones solo en inglés basta con una pequeña función auxiliar, pero las aplicaciones multilingües necesitan reglas de pluralización adaptadas a la configuración regional, y un componente de i18n como `` de gt-react o gt-next se encarga de ellas en todos los idiomas. ## Previous and next questions - Previous question: [Alternativas a Phrase: General Translation vs. Phrase](https://generaltranslation.com/es/kb/general-translation-vs-phrase.mdx) - Next question: [Alternativas a Smartling: General Translation vs. Smartling](https://generaltranslation.com/es/kb/general-translation-vs-smartling.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.