# gt-react: General Translation React SDK: Traduzioni di sviluppo per SPA
URL: https://generaltranslation.com/it/docs/react/tutorials/spa-development-translations.mdx
---
title: Traduzioni di sviluppo per SPA
description: Guarda gli aggiornamenti delle traduzioni in tempo reale mentre sviluppi la tua app React a pagina singola
---

Le traduzioni di sviluppo ti consentono di visualizzare in anteprima i contenuti tradotti mentre modifichi la tua SPA. Richiedono il compilatore GT e una chiave API di sviluppo.

**Prerequisiti:**

* Un'app React a pagina singola configurata con la [SPA Quickstart](/docs/react/tutorials/quickstart-spa)
* Una chiave API di sviluppo che inizia con `gtx-dev-`

## Passaggio 1: Installa il compilatore

Installa `@generaltranslation/compiler` come dipendenza di sviluppo:

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i -D @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add --dev @generaltranslation/compiler
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add --save-dev @generaltranslation/compiler
    ```
  </Tab>
</Tabs>

## Passaggio 2: aggiungi il plugin del compilatore

Aggiungi il plugin per il bundler che utilizzi. Per Vite:

```ts title="vite.config.ts"
import react from '@vitejs/plugin-react';
import { vite as gtCompiler } from '@generaltranslation/compiler'; // [!code highlight]
import { defineConfig } from 'vite';
import gtConfig from './gt.config.json'; // [!code highlight]

export default defineConfig({
  plugins: [gtCompiler({ ...gtConfig }), react()], // [!code highlight]
});
```

<Accordions>
  <Accordion title="Non usi Vite?">
    `@generaltranslation/compiler` esporta anche i plugin `webpack`, `rollup` ed `esbuild`. Importa il plugin compatibile con il tuo bundler.

    ```ts
    import { webpack as gtCompiler } from '@generaltranslation/compiler';
    ```
  </Accordion>
</Accordions>

## Passaggio 3: Aggiungi le credenziali di sviluppo

Ottieni una chiave API di sviluppo da [dash.generaltranslation.com](https://dash.generaltranslation.com/signup) oppure eseguendo:

```bash
npx gt auth
```

Quindi aggiungi il tuo ID progetto e la tua chiave API di sviluppo a `.env.local`:

```bash title=".env.local"
VITE_GT_PROJECT_ID="your-project-id"
VITE_GT_DEV_API_KEY="your-dev-api-key"
```

`gt-react` legge automaticamente questi valori durante l&#39;inizializzazione.

<Callout type="warn">
  **Solo in sviluppo:** usa una chiave che inizi con `gtx-dev-`. Non esporre mai nel codice del browser una chiave di produzione che inizi con `gtx-api-`.
</Callout>

## Passaggio 4: Inizia lo sviluppo

Avvia il server di sviluppo e passa a un&#39;impostazione regionale diversa da quella predefinita. Quando modifichi contenuti traducibili, il compilatore registra la modifica e `gt-react` richiede una traduzione di sviluppo aggiornata.

## Prossimi passi

* [SPA Quickstart](/docs/react/tutorials/quickstart-spa) - Consulta la configurazione completa della SPA
* [Compiler](/docs/react/concepts/compiler) - Scopri di più sulla validazione del compilatore e sull&#39;iniezione automatica di JSX
* [Production vs Development](/docs/react/concepts/environments) - Scopri come il comportamento della traduzione varia in base all&#39;ambiente