# General Translation React SDKs (gt-react, gt-next, gt-react-native): Configuración de una SPA con esbuild
URL: https://generaltranslation.com/es/docs/react/guides/spa/configuring-esbuild-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo configurar gt-react en una aplicación React de una sola página basada en esbuild.

Configura el runtime de la aplicación y, de forma opcional, incluye los catálogos de traducciones generados con tu compilación de esbuild.

Esta guía prepara el runtime de la aplicación. Marca por separado el contenido orientado al usuario para su traducción.

## Configuración de una SPA de React con esbuild [#setup]

Inicializa `gt-react` antes de que se ejecute el punto de entrada de la aplicación.

### 1. Instala gt-react

Instala la versión más reciente de `gt-react` con el administrador de paquetes preferido del repositorio. Si ya está instalado, omite este paso.

### 2. Agrega un archivo `gt.config.json` en la raíz del proyecto

Agrega un archivo `gt.config.json` en la raíz del proyecto. Este archivo contendrá la configuración del paquete `gt-react`.

Las configuraciones regionales ya presentes en el proyecto o proporcionadas a la tarea de configuración son las que prevalecen. Conserva los valores existentes de `locales` y `defaultLocale`. Los valores siguientes son solo ejemplos. Si el proyecto no tiene una configuración regional, no deduzcas requisitos de configuración regional a partir de estos ejemplos.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"]
}
```

El campo opcional [`src`](/docs/cli/reference/config#src) especifica los archivos de origen que GT analiza en busca de contenido inline; si se omite, se usan de forma predeterminada estos patrones glob de JavaScript y TypeScript en `src`, `app`, `pages` y `components`:

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["fr", "de"],
  "src": [
    "src/**/*.{js,jsx,ts,tsx}",
    "app/**/*.{js,jsx,ts,tsx}",
    "pages/**/*.{js,jsx,ts,tsx}",
    "components/**/*.{js,jsx,ts,tsx}"
  ]
}
```

### 3. Inicializa la biblioteca

Inicializa la biblioteca con [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) antes de que se renderice la aplicación o se importen módulos que utilicen funciones de traducción de nivel de módulo.

Crea un archivo de arranque junto al archivo de entrada existente de la aplicación. En este ejemplo, el archivo de entrada original es `src/main.tsx` y el nuevo archivo de arranque es `src/index.ts`. Haz que la configuración existente de `entryPoints` de esbuild apunte al archivo de arranque. Conserva todos los demás ajustes de compilación.

```js title="esbuild.config.mjs"
const buildOptions = {
  // ...las opciones existentes del proyecto
  entryPoints: ['src/index.ts'],
};
```

Si el HTML de desarrollo hace referencia directamente a la entrada de origen, actualízala también:

```html title="index.html"
<!-- <script type="module" src="/src/main.tsx"></script> -->
<script type="module" src="/src/index.ts"></script>
```

A continuación, inicializa GT e importa dinámicamente la entrada original solo cuando haya finalizado la inicialización. La aplicación de referencia de esbuild genera ESM y admite `await` de nivel superior:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';

await initializeGTSPA(gtConfig);

await import('./main'); // renderiza la aplicación solo cuando GT esté listo
```

Si el destino de salida actual de esbuild no admite `await` de nivel superior, no cambies el formato de salida de la aplicación únicamente por esta configuración. Usa en su lugar una función de inicialización asíncrona:

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';

async function bootstrap() {
  await initializeGTSPA(gtConfig);
  await import('./main');
}

void bootstrap();
```

## Carga de traducciones [#translations]

Cuando se llama a [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) sin una función [`loadTranslations`](/docs/react/reference/functions/load-translations), el runtime carga las traducciones desde la CDN de General Translation solo cuando hay un [`projectId`](/docs/react/reference/config#project-id) disponible. Para incluir catálogos en el bundle de la aplicación, configura una ruta de salida y una función de carga coincidente. Los pasos siguientes usan `src/_gt/[locale].json`.

### 1. Actualiza la configuración

Configura `files.gt.output` con la ubicación donde la CLI debe escribir los archivos de traducción generados.

Solo agrega o fusiona la configuración `files.gt.output`. Conserva los valores existentes de `locales` y `defaultLocale` del proyecto; los valores que se muestran a continuación son ejemplos y no deben reemplazar las configuraciones regionales del proyecto.

Por lo general, en una aplicación basada en esbuild, las traducciones se almacenarán en el directorio `src/_gt`. Esto permite que esbuild incluya los módulos de traducción en el bundle de la aplicación.

```json title="gt.config.json"
{
  "locales": ["fr", "zh"],
  "defaultLocale": "en",
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

### 2. Agrega los archivos auxiliares

Crea un archivo JSON vacío para cada configuración regional de destino ya definida en `gt.config.json`, excepto la configuración regional predeterminada. Estos archivos auxiliares permiten resolver las importaciones antes de que existan los bundles de traducción. Los archivos `fr` y `zh` que aparecen a continuación ilustran la configuración de ejemplo de esta guía; en su lugar, crea archivos para las configuraciones regionales de destino realmente definidas en el proyecto. Si no hay configuraciones regionales de destino definidas, no inventes configuraciones regionales ni crees archivos de marcador de posición.

<Files>
  <Folder name="src">
    <Folder name="_gt">
      <File name="fr.json" />

      <File name="zh.json" />
    </Folder>
  </Folder>
</Files>

```json title="src/_gt/fr.json"
{}
```

```json title="src/_gt/zh.json"
{}
```

### 3. Agrega la función de carga

Crea `src/loadTranslations.ts` para cargar las traducciones. Debe resolverse en la misma ubicación de salida configurada en `files.gt.output`.

```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
  const translations = await import(`./_gt/${locale}.json`);
  return translations.default;
}
```

### 4. Actualice el inicializador

Actualice el inicializador para usar la nueva función de carga. Conserve la forma de bootstrap con top-level await o función asíncrona que use la aplicación.

```ts title="src/index.ts"
import { initializeGTSPA } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';

await initializeGTSPA({ ...gtConfig, loadTranslations });

await import('./main');
```

## Next steps

- /docs/react/guides/spa/internationalizing-react-spa
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/storing-translations
- /docs/react/guides/managing-locales

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.