# General Translation React SDKs (gt-react, gt-next, gt-react-native): Internationaliser une SPA React
URL: https://generaltranslation.com/fr/docs/react/guides/spa/internationalizing-react-spa.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Comment marquer le JSX et les chaînes à traduire dans une SPA React configurée.

Lorsque l’initialiseur de la SPA s’exécute avant le point d’entrée de l’application, les composants et les chaînes définies au niveau du module peuvent immédiatement utiliser le paramètre régional actif. Cette page présente les règles d’implémentation propres à ce modèle de démarrage.

## Traduire le JSX [#jsx]

Encapsulez des blocs JSX entièrement traduisibles dans le
[composant `<T>`](/docs/react/reference/components/t). Gardez la structure de
chaque bloc statique et n’imbriquez jamais un
[`<T>`](/docs/react/reference/components/t) dans un autre :

```tsx title="src/components/Welcome.tsx"
import { T, Var } from 'gt-react';

type WelcomeProps = {
  name: string;
};

export default function Welcome({ name }: WelcomeProps) {
  return (
    <T>
      <h1>
        Welcome, <Var>{name}</Var>!
      </h1>
      <p>Your workspace is ready.</p>
    </T>
  );
}
```

Utilisez [`<Var>`](/docs/react/reference/components/var) pour les valeurs dynamiques
non formatées. Utilisez [`<Currency>`](/docs/react/reference/components/currency),
[`<DateTime>`](/docs/react/reference/components/datetime) et
[`<Num>`](/docs/react/reference/components/num) lorsqu’une valeur nécessite un
formatage adapté au paramètre régional.

Le contenu conditionnel doit également présenter une structure de traduction stable. Utilisez
[`<Branch>`](/docs/react/reference/components/branch) pour les alternatives nommées et
[`<Plural>`](/docs/react/reference/components/plural) pour le texte dépendant du nombre.
Incluez des phrases complètes dans chaque branche lorsque la condition modifie la grammaire
au-delà d’un seul mot.

[Traduire du JSX](/docs/react/guides/translating-jsx),
[Formatage des variables](/docs/react/guides/formatting-variables) et
[Gérer les pluriels et les branches](/docs/react/guides/handling-plurals-and-branches)
présentent les approches complètes.

## Traduire les chaînes [#strings]

Dans une SPA initialisée, privilégiez [`t()`](/docs/react/reference/functions/t-function)
pour les chaînes. L’amorçage attend le chargement des traductions avant d’importer
l’application ; [`t()`](/docs/react/reference/functions/t-function) fonctionne donc également
au niveau du module :

```ts title="src/navigation.ts"
import { t } from 'gt-react';

export const navigation = [
  { label: t('Home'), href: '/' },
  { label: t('About'), href: '/about' },
];
```

Le message source doit être statique. Transmettez les valeurs dynamiques séparément à l’aide de la syntaxe ICU :

```ts
import { t } from 'gt-react';

const greeting = t('Hello, {name}!', { name: 'Ada' });
const attendees = t(
  '{count, plural, one {One person is here} other {# people are here}}',
  { count: 3 }
);
```

Le sélecteur de paramètre régional de la SPA recharge l’application après un changement de paramètre régional. Les
traductions au niveau du module sont ainsi réévaluées dans le nouveau paramètre régional. Consultez
[Traduire les chaînes](/docs/react/guides/translating-strings) pour en savoir plus sur le contexte et les
approches de messages partagés.

## Ajouter un sélecteur de langue [#locale-selector]

Ajoutez le [composant `<LocaleSelector>`](/docs/react/reference/components/locale-selector),
qui permet aux utilisateurs de choisir une langue :

```tsx title="src/components/LanguageMenu.tsx"
import { LocaleSelector } from 'gt-react';

export default function LanguageMenu() {
  return <LocaleSelector />;
}
```

Il lit les locales configurées pour l’initialiseur, enregistre la sélection et
recharge la SPA afin que les traductions au niveau du module utilisent la nouvelle locale.

## Valider l’implémentation [#validate]

Vérifiez la syntaxe des traductions après avoir marqué le contenu :

```bash
npx gt validate
```

Exécutez ensuite la vérification de types existante de l’application et le build de production. Corrigez les
erreurs de syntaxe de traduction, les fichiers de paramètres régionaux manquants ou les erreurs d’importation du bundler avant de
générer les traductions.

## Next steps

- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/formatting-variables
- /docs/react/guides/handling-plurals-and-branches

## Sitemap

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