Translate React Apps with Human-Quality AI 

i18n React Example: Demo of a Translatable React Project

If your React project isn’t set up for localization yet, don’t worry. In this section, we’ll walk you through a demo app and example commit references.

This guide assumes you already have a React + TypeScript app running (Vite, CRA, Next, or similar) and at least a few user interface (UI) strings in English. We’ll add internationalization (i18n) support, organize translation files, and use PTC to generate translations quickly and easily.

To prepare your app for localization, you need to move text out of components and into translation files. This makes it possible to add other languages later without changing your code.

The most common way to do this in React is by using i18next and its React integration package react-i18next.

1. Install the libraries:

npm install i18next react-i18next

npm install i18next react-i18next

2. Create a folder for translation files:

src/i18n/
└── locales/
    └── en.json

src/i18n/
└── locales/
    └── en.json

This is where all translations will live. Each file inside src/i18n/locales/ represents a single language. For now, you only need en.json for English.  Later, PTC will generate additional files like fr.json (French) or de.json (German) and place them in this same folder, so everything stays organized in one place.

3. Add your source language (English) strings to en.json:

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

4. Replace the hard-coded text in App.tsx with translation keys that reference the JSON file:

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

If you’re wondering where the t function comes from, we’ll set it up in the next step when configuring i18n. For now, the important part is that your component no longer relies on hard-coded English text.

In the previous step, you created en.json and updated your component to reference translation keys. Right now, though, i18n doesn’t know where to look for those JSON files. We need to configure it so the t() function can actually pull in the right strings.

Instead of importing each language file manually, you can use Vite’s import.meta.glob to automatically load every *.json file inside src/i18n/locales/. This means when you later add files like fr.json or de.json (from PTC), they’ll be detected without extra work.

1. Create src/i18n/index.ts and configure i18next to load your JSON files automatically:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
  { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
  { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

2. Import this configuration once in your entry file (src/main.tsx) so i18next is ready before the app renders:

import './i18n';

import './i18n';

With this, your React app knows where to find translation files.  When PTC later generates new files, like fr.json, you don’t need to change your code or add imports. All you’ll need to do is make sure the translated file goes into src/i18n/locales/. The next time you run the app, i18n will automatically make French available alongside English.

Now that your app reads messages from src/i18n/locales/en.json, you can use PTC to generate the translations into other languages. 

1. Once you sign up for a free trial or log into your PTC account, open the setup wizard and add your English source file as a translatable resource:

src/i18n/locales/en.json

src/i18n/locales/en.json

Then, set the output path so PTC knows where to place the translated files:

src/i18n/locales/{{lang}}.json

src/i18n/locales/{{lang}}.json

This pattern creates one file per language (for example, fr.json and de.json) in the same folder as en.json.

PTC needs a few minutes to generate the AI translations. When they’re ready, you’ll receive one JSON file per language. Each file should be placed in your project under the src/i18n/locales/ folder.

For example, if you translated into French, the file will be:

src/i18n/locales/fr.json

src/i18n/locales/fr.json

Example of the content inside src/i18n/locales/fr.json:

How you get the files depends on how you use PTC. In this demo, we chose Git integration, which means PTC opened a merge request with the translated files already placed in the correct folder.

With your translations in place, the final step is to update App.tsx and add a simple language switcher. This lets you change between languages in your React app and confirm that everything works correctly.

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

You can now switch between English and French. When you run the app in French, the layout should look exactly the same as in English — only the language of the text changes. 

React app in English

React app in French

Once your React app is localized and working in multiple languages, you can unlock a few advanced options in i18next to improve performance and user experience:

• Auto-detect the user’s language

By default, the app starts in English and lets users switch languages manually with a language switcher. To make it open in the user’s preferred language automatically, install the language detector plugin:

npm install i18next-browser-languagedetector

npm install i18next-browser-languagedetector

Then update your src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)       // detect browser/localStorage/etc.
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
    react: {
      useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
    },
  });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)       // detect browser/localStorage/etc.
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
    react: {
      useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
    },
  });

export default i18n;

With this setup, i18n will check the browser’s language (and stored preferences) on first load and automatically switch to the user’s preferred language when available.

• Lazy load translations for smaller bundles

In step 2 of this guide, you configured import.meta.glob with { eager: true }, which bundles all translation files into the initial app load. This is simple, but if you support many languages it can increase your bundle size.

To optimize, you can lazy-load translations using i18next-http-backend:

npm install i18next-http-backend

npm install i18next-http-backend

Update src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)                // load JSON over HTTP
  .use(LanguageDetector)       // auto-detect + cache
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: {
      // Vite serves files from /public at the site root
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: { useSuspense: true },
  });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)                // load JSON over HTTP
  .use(LanguageDetector)       // auto-detect + cache
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: {
      // Vite serves files from /public at the site root
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: { useSuspense: true },
  });

export default i18n;

Here’s how your files should be organized:

public/
  locales/
    en/
      translation.json
    fr/
      translation.json

public/
  locales/
    en/
      translation.json
    fr/
      translation.json

With this setup, translation files are loaded from the server only when a language is needed. This keeps the initial bundle smaller, especially if your app supports many languages.

By following these two optimization tips, your React app can:

• Start in the user’s preferred language automatically
• Load translations only when needed, keeping your bundles lean