# General Translation React SDKs (gt-react, gt-next, gt-react-native): Visión general URL: https://generaltranslation.com/es/docs/react/overview.mdx --- title: Visión general description: Conoce qué biblioteca de React y qué guía de inicio rápido se adaptan a tu framework. --- Las bibliotecas de internacionalización de React de General Translation comparten componentes, hooks y configuración entre React SPAs, Next.js App Router, Next.js Pages Router, TanStack Start y 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 familia de frameworks tiene su propio paquete: * `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 [Quickstart de React](/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. Revisa sus quickstarts para conocer las limitaciones actuales antes de elegir cualquiera de los dos. ## Modelo de traducción compartido [#shared-model] Como todas las bibliotecas de i18n de React comparten los mismos componentes principales y hooks, solo hay un modelo de traducción que aprender. Las partes importantes son: * [``](/docs/react/reference/components/t) **componente.** Envuelve cualquier JSX en [``](/docs/react/reference/components/t) para traducirlo directamente, incluidos los elementos anidados y el formato. [``](/docs/react/reference/components/t) traduce su contenido como una sola unidad. * [`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`. * [`GTProvider`](/docs/react/reference/components/gt-provider) **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` **CLI.** El paquete `gt` genera y descarga traducciones. Su archivo [`gt.config.json`](/docs/cli/reference/config) declara tu `defaultLocale`, los `locales` de destino y las rutas de salida de las traducciones. Ejecuta [`npx gt translate`](/docs/cli/reference/commands/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) y [``](/docs/react/reference/components/datetime)) también se comparten, junto con [``](/docs/react/reference/components/plural), [``](/docs/react/reference/components/branch), [``](/docs/react/reference/components/derive) y hooks de configuración regional como [`useLocale`](/docs/react/reference/hooks/use-locale). ## 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 la guía de inicio rápido 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`](/docs/react/reference/components/gt-provider). Consulta el [Quickstart de React](/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 [``](/docs/react/reference/components/t) 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 `src/router.tsx` e hidrata [`GTProvider`](/docs/react/reference/components/gt-provider) desde el loader de la ruta raíz. 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.