# General Translation React SDKs (gt-react, gt-next): Visión general URL: https://generaltranslation.com/es/docs/react/overview.mdx --- title: Visión general description: Conoce el ecosistema de React de General Translation, cómo funciona su modelo de traducción compartido y qué guía de inicio rápido debes seguir para tu framework. --- General Translation internacionaliza el ecosistema de React a través de una API compartida. Los mismos componentes, hooks y la misma configuración funcionan tanto si desarrollas una aplicación React de página única, una aplicación Next.js, una aplicación TanStack Start o una aplicación React Native. Esta es la página de inicio de la sección de React. Sigue leyendo para entender el ecosistema y elegir tu framework; después, sigue la guía de inicio rápido correspondiente. ## El ecosistema de React [#ecosystem] Cada framework tiene su propio paquete, pero todos exponen la misma API de traducción: * `gt-react` — para apps de React renderizadas en el servidor y aplicaciones de una sola página (SPA), como Vite o Create React App. Consulta el [React Quickstart](/docs/react/react-quickstart) o el [React SPA Quickstart](/docs/react/react-spa-quickstart). * `gt-next` — para apps de Next.js con App Router y Pages Router. Consulta el [Next.js App Router Quickstart](/docs/react/nextjs-quickstart) o el [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). * `gt-tanstack-start` — para apps de TanStack Start. Consulta el [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). * `gt-react-native` — para apps de React Native, incluidas Expo y la CLI básica de React Native. Consulta el [React Native Quickstart](/docs/react/react-native-quickstart). *Nota:* `gt-tanstack-start` *y* `gt-react-native` *son experimentales y aún no se recomiendan para producción.* ## Modelo de traducción compartido [#shared-model] Como todos los paquetes se basan en el mismo núcleo, aprendes el modelo una vez y lo reutilizas en todas partes. Las piezas son: * **El** [``](/docs/react/reference/components/t) **componente.** Envuelve cualquier JSX en `` para traducirlo directamente, incluidos los elementos anidados y el formato. `` traduce su contenido como una sola unidad. * **El** [`useGT`](/docs/react/reference/hooks/use-gt) **hook.** Traduce cadenas independientes —marcadores de posición, valores de `aria-label`, texto alternativo— con la función que devuelve. Úsalo así: `const gt = useGT();`, y después `gt('Hello, world!')`. En componentes asíncronos de App Router, usa [`getGT`](/docs/react/nextjs/reference/functions/get-gt) de `gt-next/server`. * **El** `GTProvider` **componente.** Envuelve tu aplicación para que los componentes puedan acceder a las traducciones y a la configuración regional activa. La forma de proporcionarle las traducciones varía ligeramente según el framework; por eso cada uno tiene su propia guía de inicio rápido. * `gt.config.json`**.** Un único archivo de configuración en la raíz de tu proyecto que declara tu `defaultLocale`, tus `locales` de destino y dónde se escriben los archivos de traducción. * **La** `gt` **CLI.** El paquete `gt` genera y descarga traducciones. Ejecuta `npx gt translate` para traducir tu proyecto mediante la API de General Translation. Los componentes de variable ([``](/docs/react/reference/components/var), [``](/docs/react/reference/components/num), [``](/docs/react/reference/components/currency), [``](/docs/react/reference/components/datetime)), los componentes [``](/docs/react/reference/components/plural) y [``](/docs/react/reference/components/branch), y los hooks de configuración regional también se comparten entre todos los frameworks. ## Elige tu framework [#frameworks] Cada configuración usa los mismos componentes de traducción y la misma CLI, pero la inicialización y la entrega de traducciones varían. Empieza con el quickstart de tu framework: * **Para crear una app de React renderizada en el servidor:** inicializa `gt-react`, carga las traducciones en el servidor e hidrata `GTProvider`. Consulta el [React Quickstart](/docs/react/react-quickstart). * **Para crear una SPA de React (Vite, Create React App):** inicializa `gt-react` en el navegador antes de renderizar. Consulta el [React SPA Quickstart](/docs/react/react-spa-quickstart). * **Para crear una app con App Router de Next.js:** añade el plugin `withGTConfig` y usa `` en componentes de servidor y de cliente. Consulta el [Next.js App Router Quickstart](/docs/react/nextjs-quickstart). * **Para crear una app con Pages Router de Next.js:** carga la configuración regional y las traducciones mediante las props de la página. Consulta el [Next.js Pages Router Quickstart](/docs/react/nextjs-pages-router-quickstart). * **Para crear una app de TanStack Start:** inicializa General Translation en la ruta raíz e hidrata `GTProvider` desde un loader. Consulta el [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart). * **Para crear una app de React Native:** inicializa en tu punto de entrada y añade el plugin de Babel para polyfills. Consulta el [React Native Quickstart](/docs/react/react-native-quickstart). Una vez completada la configuración, las [Guides](/docs/react/guides/configuring) cubren los flujo de trabajo compartidos —traducir JSX y cadenas, dar formato a variables, plurales, diccionarios y gestionar configuraciones regionales—, y la [Reference](/docs/react/reference/config) documenta cada componente, hook, función y opción de configuración. Ambas se aplican a todos los frameworks, y las diferencias específicas de cada uno se muestran en pestañas.