# gt-react: General Translation React SDK: React Quickstart
URL: https://generaltranslation.com/en-US/docs/react.mdx
---
title: React Quickstart
description: Add multiple languages to your React app in under 10 minutes
---
By the end of this guide, your React app will display content in multiple languages, with a language switcher your users can interact with.
**Prerequisites:**
- A React app (Vite, Create React App, or similar)
- Node.js 18+
**Want automatic setup?** Run `npx gt@latest` to configure everything with the [Setup Wizard](/docs/cli/init). This guide covers manual setup.
---
## Step 1: Install the packages
`gt-react` is the library that powers translations in your app. `gt` is the CLI tool that prepares translations for production.
```bash
npm i gt-react
npm i -D gt
```
```bash
yarn add gt-react
yarn add --dev gt
```
```bash
bun add gt-react
bun add --dev gt
```
```bash
pnpm add gt-react
pnpm add --save-dev gt
```
---
## Step 2: Create a translation config file
Create a **`gt.config.json`** file in your project root. This tells the library which languages you support:
```json title="gt.config.json"
{
"defaultLocale": "en",
"locales": ["es", "fr", "ja"],
"files": {
"gt": {
"output": "public/_gt/[locale].json"
}
}
}
```
- **`defaultLocale`** — the language your app is written in (your source language).
- **`locales`** — the languages you want to translate into. Pick any from the [supported locales list](/docs/platform/supported-locales).
- **`files`** — tells the CLI where to save translation files. The `output` path should match the import path in your `loadTranslations` function (Step 3).
---
## Step 3: Create a translation loader
`gt-react` runs entirely on the client, so it needs a function to load translation files at runtime. Create a `loadTranslations` file:
```ts title="src/loadTranslations.ts"
export default async function loadTranslations(locale: string) {
try {
const translations = await import(`../public/_gt/${locale}.json`);
return translations.default;
} catch (error) {
console.warn(`No translations found for ${locale}`);
return {};
}
}
```
This function loads JSON translation files from your `public/_gt/` directory. The CLI generates these files when you run `npx gt translate`.
---
## Step 4: Add the GTProvider to your app
The **`GTProvider`** component gives your entire app access to translations. Wrap your app at the root level:
```tsx title="src/App.tsx"
import { GTProvider } from 'gt-react';
import gtConfig from '../gt.config.json';
import loadTranslations from './loadTranslations';
export default function App() {
return (
{/* Your app content */}
);
}
```
`GTProvider` takes your config and translation loader as props. It manages locale state and makes translations available to all child components.
---
## Step 5: Mark content for translation
Now, wrap any text you want translated with the **``** component. `` stands for "translate":
```tsx title="src/components/Welcome.tsx"
import { T } from 'gt-react';
export default function Welcome() {
return (
Welcome to my app
This content will be translated automatically.
);
}
```
You can wrap as much or as little JSX as you want inside ``. Everything inside it — text, nested elements, even formatting — gets translated as a unit.
---
## Step 6: Add a language switcher
Drop in a **``** so users can change languages:
```tsx title="src/components/Welcome.tsx"
import { T, LocaleSelector } from 'gt-react';
export default function Welcome() {
return (