# General Translation Knowledge Base: How do I translate a React app? URL: https://generaltranslation.com/en-GB/kb/translate-react-app.mdx Docs index: https://generaltranslation.com/llms.txt Description: Translating a React app means internationalising its components so they render in the user's language, then translating every string into each language you support. General Translation's gt-react translates JSX in place in the `` component, and npx gt translate writes one file per language. Category: Internationalisation Last updated: 2026-10-21 Authors: Kevin Liu, Kevin Wu Published: 2026-10-21 Translating a React app involves two jobs: internationalisation (i18n), which makes components render in the user's language, and translation of every string into each language you support. The work is difficult because the text lives inside JSX, mixed with markup, variables and plurals whose rules differ by language (English has 2 forms, Arabic has 6). The usual set-up moves each string behind a key, such as `t('home.welcome')`, with one JSON file per language to keep in sync. Translated without the UI around it, a "Save" button can come back in German as *sparen* (save money) instead of *speichern* (save a file). ## Video The video is narrated in English, with English captions. [How do I translate a React app?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-react-app.mp4) (48 secs) General Translation lets you initialize `gt-react` before the app renders and wrap its text in `T`. List your languages in `gt.config.json` and add a `loadTranslations` file, let an entry file call `initializeGTSPA` first, wrap the page's text in ``, then sign in, set your project ID and run `npx gt translate`. ## Ways to translate a React app | Approach | What it does well | What it leaves to you | | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | A key-based i18n library ([`i18next`](/kb/general-translation-vs-i18next) with `react-i18next`, or [`react-intl`](/kb/general-translation-vs-react-intl)) | Mature runtime for rendering translations, selecting plural forms and formatting values | Replacing strings with keys, keeping a JSON file per language in sync, and producing every translation | | [Lingui](/kb/general-translation-vs-lingui) | Keeps copy inline with its `` macro, and `lingui extract` writes a catalogue per language | Translating each catalogue, by hand or through a connected service, and rerunning extract and compile as copy changes | | A translation management system ([Crowdin](/kb/general-translation-vs-crowdin), [Lokalise](/kb/general-translation-vs-lokalise)) | A web editor where translators work with screenshots, a glossary and translation memory, synced with your repository | The i18n library and key files in your code, the sync set-up, and waiting on translators before each release | | General Translation (`gt-react` and the `gt` CLI) | [``](/docs/react/reference/components/t) translates JSX in place with no keys, and [`npx gt translate`](/docs/cli/reference/commands/translate) writes one file per language, with the surrounding JSX structure as context | Wrapping text in [``](/docs/react/reference/components/t), a one-off set-up (languages in `gt.config.json`, a loader, an entry file, sign-in and a project ID), and rerunning [`npx gt translate`](/docs/cli/reference/commands/translate) (locally or in CI) when content changes | Use a key-based library on its own, with hand-written JSON files, when the app has only a few strings that rarely change. Use Lingui when you want copy inline and have translators to fill its catalogues, and a translation management system when a localisation team translates every release by hand. Use General Translation when the app is constantly changing and every release has to ship in every language. ## Translate a React app with General Translation General Translation's open-source `gt-react` library and `gt` CLI translate a React single-page app (SPA), such as a Vite or webpack project. The `npx gt@latest` set-up wizard can configure the Vite entry and translation loading for you (an experimental step). To set it up yourself: 1. Install `gt-react` and the `gt` CLI. 2. List your languages in `gt.config.json`. 3. Add a [`loadTranslations`](/docs/react/reference/functions/load-translations) function, and call [`initializeGTSPA`](/docs/react/reference/config#initialize-spa) in a small entry file so that translations load before the app renders. 4. Wrap your text in the [``](/docs/react/reference/components/t) component: ```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.
); } ``` 5. Sign in with [`npx gt login`](/docs/cli/reference/commands/login) and set your project ID. 6. Run [`npx gt translate`](/docs/cli/reference/commands/translate) to write one translation file per language. The `context` prop on [``](/docs/react/reference/components/t) resolves an ambiguous word, such as "Save", while a Glossary and Custom Prompts in the Dashboard keep terminology and tone consistent. [Server-rendered React](/docs/react/react-quickstart), [React Router framework](/docs/react/react-router-quickstart) and [Next.js](/docs/react/nextjs-quickstart) (with `gt-next`) apps have their own Quickstarts; for an SPA, the [React SPA Quickstart](/docs/react/react-spa-quickstart) covers the full steps. ## Related questions - [How do I add i18n to a Next.js App Router app?](https://generaltranslation.com/en-GB/kb/add-i18n-to-nextjs.mdx): Start with gt init to configure General Translation in a supported App Router project, then mark source content, generate translations and verify language switching. gt-next keeps copy in JSX with translation context; the CLI, Dashboard editor and Locadex handle generation, review and ongoing updates. This guide also shows the explicit local-file set-up. - [How do I translate a React Native app?](https://generaltranslation.com/en-GB/kb/translate-react-native-app.mdx): Mark the text in your components, generate a translation file for each language, add Intl polyfills, and load the file for the device's language. With General Translation's experimental gt-react-native, you wrap text in ``, a Babel plugin adds the polyfills and npx gt translate writes the files. - [Can I do i18n without translation files?](https://generaltranslation.com/en-GB/kb/i18n-without-translation-files.mdx): Yes. General Translation's gt-react and gt-next libraries do React and Next.js i18n with no translation keys and no JSON file per language to maintain. Copy stays inline in JSX inside the `` component, and the gt translate command generates each language's translations in your build, with context from your code. Locadex can keep them up to date through pull requests. - [How do I translate strings outside JSX?](https://generaltranslation.com/en-GB/kb/translate-strings-outside-jsx.mdx): Pass each string that isn't a JSX child, such as a placeholder or a module-scope constant, through a translation function where it renders. General Translation's useGT hook returns that function, and msg with useMessages translates constants defined outside a component. - [How do I handle plurals in React?](https://generaltranslation.com/en-GB/kb/how-to-handle-plurals-in-react.mdx): Handle plurals in React by giving each language one sentence per plural form and picking it with that language's plural rules, since English has 2 forms, Russian has 4 and Arabic has 6. General Translation's `` component in gt-react and gt-next takes your source forms, and General Translation generates the forms each target language needs. ## Previous and next questions - Previous question: [How do I translate a Node.js app?](https://generaltranslation.com/en-GB/kb/translate-node-app.mdx) - Next question: [How do I translate a React Native app?](https://generaltranslation.com/en-GB/kb/translate-react-native-app.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/en-GB/kb/sitemap.md) for every article.