# tanstack-start: Descripción general URL: https://generaltranslation.com/es/docs/tanstack-start/introduction.mdx --- title: Descripción general description: Descripción general del SDK de TanStack Start de General Translation --- ## Introducción `gt-tanstack-start` es una integración de internacionalización (i18n) de código abierto para aplicaciones de [TanStack Start](https://tanstack.com/start). Ofrece la misma experiencia de desarrollo que [`gt-next`](/docs/next) — envuelves el contenido en `` y se traduce — en el framework TanStack Start. Basado en [`gt-react`](/docs/react), añade funcionalidades específicas de TanStack Start, como la detección isomórfica de la configuración regional y la integración con el loader root. **Experimental:** `gt-tanstack-start` está en desarrollo activo. Las API pueden cambiar entre versiones menores. Todavía no se recomienda su uso en producción. ## Cómo funciona Inicializa con [`initializeGT()`](#initialization-with-initializegt) en tu ruta root Carga las traducciones en el [loader root](#root-loader) Envuelve tu aplicación con [``](#the-gtprovider-component) Usa [``](#the-t-component) para traducir el contenido ## Inicialización con `initializeGT` La función `initializeGT()` configura el administrador de i18n. Llámala al inicio del archivo de la ruta root: ```tsx title="src/routes/__root.tsx" import { initializeGT } from 'gt-tanstack-start' import gtConfig from '../../gt.config.json' import loadTranslations from '../../loadTranslations' initializeGT({ ...gtConfig, loadTranslations, }) ``` ## Loader de root Usa `getTranslations()` y `getLocale()` en el loader de tu ruta root para obtener las traducciones adecuadas para la solicitud actual: ```tsx title="src/routes/__root.tsx" import { getTranslations, getLocale } from 'gt-tanstack-start' export const Route = createRootRoute({ loader: async () => { return { translations: await getTranslations(), locale: getLocale(), } }, // ... }) ``` ## El componente `` El `` proporciona el contexto de traducción a todos los componentes hijos. Pasa las traducciones y la configuración regional desde el loader: ```tsx title="src/routes/__root.tsx" import { GTProvider } from 'gt-tanstack-start' function RootDocument({ children }: { children: React.ReactNode }) { const { translations, locale } = Route.useLoaderData() return ( {children} ) } ``` ## El componente `` El componente [``](/docs/react/api/components/t) traduce contenido JSX. Envuelve cualquier elemento para que se renderice en el idioma del usuario: ```tsx import { T } from 'gt-react' function Welcome() { return (

Welcome to our app!

This content is automatically translated.

) } ``` Importa `` desde `gt-react`, no desde `gt-tanstack-start`. Esto garantiza que la CLI de `gt` pueda detectar el contenido traducible al generar archivos de traducción. ## Selector de configuración regional Agrega un `` para que los usuarios puedan cambiar de idioma: ```tsx import { LocaleSelector } from 'gt-tanstack-start' function Nav() { return ( ) } ``` *** ## Próximos pasos * Configura tu proyecto con la [guía de inicio rápido](/docs/tanstack-start) * Consulta la [aplicación de ejemplo](https://github.com/generaltranslation/gt/tree/main/examples/tanstack-start-basic) * Aprende sobre los [componentes de variable](/docs/react/guides/variables), como ``, `` y ``