# gt-react: General Translation React SDK: Internationaliser une mini-boutique
URL: https://generaltranslation.com/fr/docs/react/tutorials/mini-shop.mdx
---
title: Internationaliser une mini-boutique
description: Un tutoriel React pratique pour internationaliser une boutique simple à l’aide des composants React GT, des hooks et de chaînes partagées
---

Mettez en place et traduisez une petite « mini-boutique » entièrement en local — sans services externes, sans routage, sans framework d’interface utilisateur. Vous utiliserez les fonctionnalités principales de GT React de bout en bout et verrez comment elles s’intègrent dans une interface simple et réaliste.

Prérequis : React, bases de JavaScript/TypeScript

Ce que vous allez créer

* Une « boutique » monopage avec une grille de produits et un panier simple en mémoire
* Un sélecteur de langue et des libellés de navigation partagés
* Des nombres, devises et pluriels correctement internationalisés
* Facultatif : stockage local des traductions pour les builds de production

Liens utilisés dans ce tutoriel

* Provider : [`<GTProvider>`](/docs/react/api/components/gtprovider)
* Composants : [`<T>`](/docs/react/api/components/t), [`<Var>`](/docs/react/api/components/var), [`<Num>`](/docs/react/api/components/num), [`<Currency>`](/docs/react/api/components/currency), [`<DateTime>`](/docs/react/api/components/datetime), [`<Branch>`](/docs/react/api/components/branch), [`<Plural>`](/docs/react/api/components/plural), [`<LocaleSelector>`](/docs/react/api/components/locale-selector)
* Chaînes de caractères et chaînes partagées : [`useGT`](/docs/react/api/strings/use-gt), [`msg`](/docs/react/api/strings/msg), [`useMessages`](/docs/react/api/strings/use-messages)
* Guides : [Variables](/docs/react/guides/variables), [Branches conditionnelles](/docs/react/guides/branches), [Chaînes](/docs/react/guides/strings), [Stockage local des traductions](/docs/react/guides/local-tx), [Changer de langue](/docs/react/guides/languages)

***

## Installez et enveloppez votre application

Installez les packages et enveloppez votre application avec le provider.

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm i gt-react
    npm i --save-dev gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-react
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-react
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-react
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

<Callout>
  Facultatif : projet de départ (Vite)

  Si vous partez de zéro, générez une application React + TypeScript avec Vite, puis installez les packages GT :

  ```bash copy
  npm create vite@latest mini-shop -- --template react-ts
  cd mini-shop
  npm i gt-react
  npm i --save-dev gt
  ```

  Ajoutez ensuite les fichiers indiqués dans les sections ci-dessous (par exemple, `src/main.tsx`, `src/App.tsx`, `src/components/*`, `src/data.ts`, `src/nav.ts`).
</Callout>

Mettez en place une configuration minimale du provider.

```tsx title="src/main.tsx" copy
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { GTProvider } from 'gt-react'; // Voir : /docs/react/api/components/gtprovider
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <GTProvider locales={["es", "fr"]}> {/* Activer l'espagnol et le français */}
      <App />
    </GTProvider>
  </StrictMode>
);
```

Vous pouvez aussi ajouter un `gt.config.json` dès maintenant (utile plus tard pour l’intégration continue et le stockage local) :

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


### Clés API de développement

Vous pouvez suivre ce tutoriel sans clés API (l’application affichera la langue par défaut). Pour voir les traductions en direct et tester le changement de langue en développement, ajoutez des clés de développement.

Pour en savoir plus, consultez [Production ou développement](/docs/react/concepts/environments).

<Tabs items={["Vite (dev)", "Create React App (dev)", "Obtenir des clés"]}>
  <Tab value="Vite (dev)">
    ```bash title=".env.local" copy
    VITE_GT_API_KEY="your-dev-api-key"
    VITE_GT_PROJECT_ID="your-project-id"
    ```
  </Tab>

  <Tab value="Create React App (dev)">
    ```bash title=".env.local" copy
    REACT_APP_GT_API_KEY="your-dev-api-key"
    REACT_APP_GT_PROJECT_ID="your-project-id"
    ```
  </Tab>

  <Tab value="Obtenir des clés">
    * tableau de bord : https://dash.generaltranslation.com/signup
    * Ou via la CLI :
      ```bash copy
      npx gt auth
      ```
  </Tab>
</Tabs>

***

## Données initiales et structure de l’application

Nous allons coder en dur un petit tableau de produits et tout garder côté client. Ni serveur ni routage.

```ts title="src/data.ts" copy
export type Product = {
  id: string;
  name: string;
  description: string;
  price: number;
  currency: 'USD' | 'EUR';
  inStock: boolean;
  addedAt: string; // chaîne de date ISO
};

export const products: Product[] = [
  {
    id: 'p-1',
    name: 'Wireless Headphones',
    description: 'Noise-cancelling over-ear design with 30h battery',
    price: 199.99,
    currency: 'USD',
    inStock: true,
    addedAt: new Date().toISOString()
  },
  {
    id: 'p-2',
    name: 'Travel Mug',
    description: 'Double-wall insulated stainless steel (12oz)',
    price: 24.5,
    currency: 'USD',
    inStock: false,
    addedAt: new Date().toISOString()
  }
];
```

***


## Libellés de navigation partagés avec msg et useMessages

Utilisez [`msg`](/docs/react/api/strings/msg) pour marquer les chaînes partagées dans la configuration, puis décodez-les avec [`useMessages`](/docs/react/api/strings/use-messages) au moment du rendu.

```tsx title="src/nav.ts" copy
import { msg } from 'gt-react'; // Voir : /docs/react/api/strings/msg

export const nav = [
  { label: msg('Home'), href: '#' },
  { label: msg('Products'), href: '#products' },
  { label: msg('Cart'), href: '#cart' }
];
```

```tsx title="src/components/Header.tsx" copy
import { LocaleSelector, T } from 'gt-react';
import { useMessages } from 'gt-react'; // Voir : /docs/react/api/strings/use-messages
import { nav } from '../nav';

export default function Header() {
  const m = useMessages();
  return (
    <header style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
      <T><h1>Mini Shop</h1></T> {/* Voir : /docs/react/api/components/t */}
      <nav style={{ display: 'flex', gap: 12 }}>
        {nav.map(item => (
          <a key={item.href} href={item.href} title={m(item.label)}>
            {m(item.label)}
          </a>
        ))}
      </nav>
      <div style={{ marginLeft: 'auto' }}>
        <LocaleSelector /> {/* Voir : /docs/react/api/components/locale-selector */}
      </div>
    </header>
  );
}
```

***


## Cartes produit avec T, des composants variables, Branch et Currency

Utilisez [`<T>`](/docs/react/api/components/t) pour traduire du JSX. Encapsulez le contenu dynamique avec des composants variables comme [`<Var>`](/docs/react/api/components/var), [`<Num>`](/docs/react/api/components/num), [`<Currency>`](/docs/react/api/components/currency) et [`<DateTime>`](/docs/react/api/components/datetime). Gérez l’état du stock avec [`<Branch>`](/docs/react/api/components/branch).

```tsx title="src/components/ProductCard.tsx" copy
import { T, Var, Num, Currency, DateTime, Branch } from 'gt-react';
import type { Product } from '../data';

export default function ProductCard({ product, onAdd }: { product: Product; onAdd: () => void; }) {
  return (
    <div style={{ border: '1px solid #ddd', padding: 12, borderRadius: 8 }}>
      <T>
        <h3><Var>{product.name}</Var></h3>
        <p><Var>{product.description}</Var></p>
        <p>
          Price: <Currency currency={product.currency}>{product.price}</Currency>
        </p>
        <p>
          Added: <DateTime options={{ dateStyle: 'medium', timeStyle: 'short' }}>{new Date(product.addedAt)}</DateTime>
        </p>
        <Branch
          branch={product.inStock}
          true={<p>In stock</p>}
          false={<p style={{ color: 'tomato' }}>Out of stock</p>}
        />
        <button onClick={onAdd} disabled={!product.inStock}>
          Add to cart
        </button>
      </T>
    </div>
  );
}
```

***

## Panier avec gestion du pluriel et totaux

Utilisez [`<Plural>`](/docs/react/api/components/plural) pour exprimer « X articles dans le panier » et [`<Currency>`](/docs/react/api/components/currency) pour les totaux. Combinez-les avec [`<T>`](/docs/react/api/components/t), [`<Var>`](/docs/react/api/components/var) et [`<Num>`](/docs/react/api/components/num).

```tsx title="src/components/Cart.tsx" copy
import { T, Plural, Var, Num, Currency } from 'gt-react';
import type { Product } from '../data';

export default function Cart({ items, onClear }: { items: Product[]; onClear: () => void; }) {
  const total = items.reduce((sum, p) => sum + p.price, 0);
  const itemCount = items.length;
  return (
    <div style={{ borderTop: '1px solid #eee', paddingTop: 12 }}>
      <T>
        <h2>Cart</h2>
        <Plural
          n={itemCount}
          zero={<p>Your cart is empty</p>}
          one={<p>You have <Num>{itemCount}</Num> item</p>}
          other={<p>You have <Num>{itemCount}</Num> items</p>}
        />
      </T>
      {items.map((p) => (
        <T key={p.id}>
          <p>
            <Var>{p.name}</Var> — <Currency currency={p.currency}>{p.price}</Currency>
          </p>
        </T>
      ))}
      <T>
        <p>
          Total: <Currency currency={items[0]?.currency || 'USD'}>{total}</Currency>
        </p>
        <button onClick={onClear} disabled={itemCount === 0}>Clear cart</button>
      </T>
    </div>
  );
}
```

***

## Attributs et placeholders avec `useGT`

Utilisez [`useGT`](/docs/react/api/strings/use-gt) pour traduire des chaînes simples, comme les placeholders des champs de saisie et les libellés ARIA.

```tsx title="src/components/Search.tsx" copy
import { useGT } from 'gt-react';

export default function Search({ onQuery }: { onQuery: (q: string) => void; }) {
  const gt = useGT();
  return (
    <input
      type="search"
      placeholder={gt('Search products...')}
      aria-label={gt('Search input')}
      onChange={(e) => onQuery(e.target.value)}
      style={{ padding: 8, width: '100%', maxWidth: 320 }}
    />
  );
}
```

***


## Assembler l’ensemble

Une application monopage avec un panier en mémoire et un filtre de recherche simple.

```tsx title="src/App.tsx" copy
import { useMemo, useState } from 'react';
import Header from './components/Header';
import Search from './components/Search';
import ProductCard from './components/ProductCard';
import Cart from './components/Cart';
import { products } from './data';

export default function App() {
  const [query, setQuery] = useState('');
  const [cart, setCart] = useState<string[]>([]);

  const filtered = useMemo(() => {
    const q = query.toLowerCase();
    return products.filter(p =>
      p.name.toLowerCase().includes(q) || p.description.toLowerCase().includes(q)
    );
  }, [query]);

  const items = products.filter(p => cart.includes(p.id));

  return (
    <div style={{ margin: '24px auto', maxWidth: 960, padding: 16 }}>
      <Header />
      <div style={{ margin: '16px 0' }}>
        <Search onQuery={setQuery} />
      </div>
      <section id="products" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))', gap: 16 }}>
        {filtered.map(p => (
          <ProductCard
            key={p.id}
            product={p}
            onAdd={() => setCart(c => (p.inStock ? [...new Set([...c, p.id])] : c))}
          />
        ))}
      </section>
      <section id="cart" style={{ marginTop: 24 }}>
        <Cart
          items={items}
          onClear={() => setCart([])}
        />
      </section>
    </div>
  );
}
```

***


## Exécutez en local

Ajoutez un script de développement simple à votre `package.json`, puis démarrez l’application.

<Tabs items={["Vite", "Create React App"]}>
  <Tab value="Vite">
    ```json title="package.json" copy
    {
      "scripts": {
        "dev": "vite"
      }
    }
    ```

    Exécutez :

    ```bash
    npm run dev
    ```
  </Tab>

  <Tab value="Create React App">
    ```json title="package.json" copy
    {
      "scripts": {
        "start": "react-scripts start"
      }
    }
    ```

    Exécutez :

    ```bash
    npm start
    ```
  </Tab>
</Tabs>

***

## Ce que vous avez appris

* Traduire du JSX avec [`<T>`](/docs/react/api/components/t) et gérer le contenu dynamique à l’aide de [`<Var>`](/docs/react/api/components/var), [`<Num>`](/docs/react/api/components/num), [`<Currency>`](/docs/react/api/components/currency), [`<DateTime>`](/docs/react/api/components/datetime)
* Exprimer du contenu conditionnel avec [`<Branch>`](/docs/react/api/components/branch) et des quantités avec [`<Plural>`](/docs/react/api/components/plural)
* Traduire des attributs avec [`useGT`](/docs/react/api/strings/use-gt)
* Partager des chaînes de navigation et de configuration avec [`msg`](/docs/react/api/strings/msg) et les décoder avec [`useMessages`](/docs/react/api/strings/use-messages)
* Changer de langue avec [`<LocaleSelector>`](/docs/react/api/components/locale-selector)

## Étapes suivantes

* Explorez : [Guide des variables](/docs/react/guides/variables), [Guide des branches conditionnelles](/docs/react/guides/branches), [Guide des chaînes](/docs/react/guides/strings), [Changer de langue](/docs/react/guides/languages)