𝗛𝗼𝘄 𝘁𝗼 𝗔𝗰𝗵𝗶𝗲𝘃𝗲 𝗟𝗼𝗰𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀

🌍 𝗛𝗼𝘄 𝘁𝗼 𝗔𝗰𝗵𝗶𝗲𝘃𝗲 𝗟𝗼𝗰𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀 (Step by Step)

Your React app works perfectly — in one language.
The moment you go global? Everything breaks. 😶

Here's the complete step-by-step localisation setup 👇

---

🧠 𝗪𝗵𝗮𝘁 𝗪𝗲'𝗿𝗲 𝗕𝘂𝗶𝗹𝗱𝗶𝗻𝗴

👉 Multi-language React app
👉 Auto language detection
👉 Dynamic language switching
👉 Formatted dates, numbers & currencies

English → French → Japanese → Arabic (RTL)
All from one codebase. Zero rewrites.

---

📦 1️⃣ 𝗜𝗻𝘀𝘁𝗮𝗹𝗹 𝗗𝗲𝗽𝗲𝗻𝗱𝗲𝗻𝗰𝗶𝗲𝘀

npm install i18next react-i18next
npm install i18next-browser-languagedetector
npm install i18next-http-backend

✔ i18next — core translation engine
✔ react-i18next — React bindings & hooks
✔ browser-languagedetector — auto detects user's language
✔ http-backend — lazy loads translation files

---

🗂️ 2️⃣ 𝗙𝗼𝗹𝗱𝗲𝗿 𝗦𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲

👉 Keep translations outside your components

src/
├── i18n/
│   ├── index.js          ← i18n config
│   └── locales/
│       ├── en/
│       │   └── translation.json
│       ├── fr/
│       │   └── translation.json
│       └── ja/
│           └── translation.json

✔ One folder per language
✔ Same key structure across all files
✔ Easy to hand off to translators

---

📝 3️⃣ 𝗖𝗿𝗲𝗮𝘁𝗲 𝗧𝗿𝗮𝗻𝘀𝗹𝗮𝘁𝗶𝗼𝗻 𝗙𝗶𝗹𝗲𝘀

👉 Same keys, different values per language

// locales/en/translation.json
{
  "welcome": "Welcome, {{name}}!",
  "logout": "Logout",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items",
  "errors": {
    "required": "This field is required"
  }
}

// locales/fr/translation.json
{
  "welcome": "Bienvenue, {{name}}!",
  "logout": "Se déconnecter",
  "items_one": "{{count}} article",
  "items_other": "{{count}} articles",
  "errors": {
    "required": "Ce champ est obligatoire"
  }
}

✔ Use nested keys for grouping
✔ {{variable}} syntax for dynamic values
✔ _one / _other suffix for plurals

---

⚙️ 4️⃣ 𝗖𝗼𝗻𝗳𝗶𝗴𝘂𝗿𝗲 𝗶𝟭𝟴𝗻

// src/i18n/index.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',       // default if language not found
    debug: false,

    detection: {
      order: ['localStorage', 'navigator'],
      cacheUserLanguage: true  // remembers user choice
    },

    backend: {
      loadPath: '/locales/{{lng}}/translation.json'
    },

    interpolation: {
      escapeValue: false       // React handles XSS
    }
  });

export default i18n;

✔ fallbackLng — safety net if translation key missing
✔ cacheUserLanguage — persists language in localStorage
✔ loadPath — lazy loads only needed language file

---

🚀 5️⃣ 𝗖𝗼𝗻𝗻𝗲𝗰𝘁 𝘁𝗼 𝗥𝗲𝗮𝗰𝘁 𝗔𝗽𝗽

// src/main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './i18n/index.js';   // ← import before App renders

ReactDOM.createRoot(document.getElementById('root'))
  .render(<App />);

✔ Import i18n before App renders
✔ No Provider needed — i18next is global
✔ Translations load automatically on mount

---

🔤 6️⃣ 𝗨𝘀𝗲 𝗧𝗿𝗮𝗻𝘀𝗹𝗮𝘁𝗶𝗼𝗻𝘀 𝗶𝗻 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀

import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      {/* Basic translation */}
      <h1>{t('welcome', { name: 'John' })}</h1>

      {/* Nested key */}
      <span>{t('errors.required')}</span>

      {/* Pluralisation — auto picks _one or _other */}
      <p>{t('items', { count: 5 })}</p>
    </div>
  );
}

✔ t('key') — translate a string
✔ t('key', { var }) — with dynamic values
✔ t('key', { count }) — automatic pluralisation

---

🌐 7️⃣ 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲 𝗦𝘄𝗶𝘁𝗰𝗵𝗲𝗿 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁

import { useTranslation } from 'react-i18next';

const languages = [
  { code: 'en', label: 'English' },
  { code: 'fr', label: 'Français' },
  { code: 'ja', label: '日本語' },
  { code: 'ar', label: 'العربية' }
];

function LanguageSwitcher() {
  const { i18n } = useTranslation();

  const changeLanguage = (code) => {
    i18n.changeLanguage(code);

    // Handle RTL languages
    document.dir = code === 'ar' ? 'rtl' : 'ltr';
  };

  return (
    <div>
      {languages.map(({ code, label }) => (
        <button
          key={code}
          onClick={() => changeLanguage(code)}
          className={i18n.language === code ? 'active' : ''}
        >
          {label}
        </button>
      ))}
    </div>
  );
}

✔ i18n.changeLanguage() — switches instantly
✔ document.dir = 'rtl' — flips layout for Arabic
✔ Language saved in localStorage automatically

---

📅 8️⃣ 𝗗𝗮𝘁𝗲𝘀, 𝗡𝘂𝗺𝗯𝗲𝗿𝘀 & 𝗖𝘂𝗿𝗿𝗲𝗻𝗰𝘆

function PriceDisplay({ amount, date }) {
  const { i18n } = useTranslation();
  const locale = i18n.language;

  // Format currency
  const price = new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: locale === 'ja' ? 'JPY' : 'USD'
  }).format(amount);

  // Format date
  const formattedDate = new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);

  return (
    <div>
      <p>{price}</p>
      <p>{formattedDate}</p>
    </div>
  );
}

✔ Always use Intl API — never manual formatting
✔ Currency code changes per locale
✔ Date format adapts automatically

---

⏳ 9️⃣ 𝗛𝗮𝗻𝗱𝗹𝗶𝗻𝗴 𝗟𝗼𝗮𝗱𝗶𝗻𝗴 𝗦𝘁𝗮𝘁𝗲

👉 Translations load async — handle the loading state

import { useTranslation } from 'react-i18next';
import { Suspense } from 'react';

// Wrap app in Suspense
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Dashboard />
    </Suspense>
  );
}

// Or check inside component
function Dashboard() {
  const { t, ready } = useTranslation();

  if (!ready) return <Spinner />;

  return <h1>{t('welcome')}</h1>;
}

✔ ready — true when translations are loaded
✔ Suspense — cleaner loading handling at app level
✔ Never render untranslated content to users

---

🚨 𝗖𝗼𝗺𝗺𝗼𝗻 𝗠𝗶𝘀𝘁𝗮𝗸𝗲𝘀

❌ Hardcoding strings inside JSX
❌ Not handling RTL layout for Arabic/Hebrew
❌ Using English keys as translation keys t('Welcome back!')
❌ Formatting dates manually instead of Intl API
❌ Bundling all language files — lazy load instead
❌ Adding i18n after the app is built — costs 10x more

---

💡 𝗦𝗲𝗻𝗶𝗼𝗿-𝗟𝗲𝘃𝗲𝗹 𝗜𝗻𝘀𝗶𝗴𝗵𝘁

Translation is 10% of localisation. Dates, RTL, plurals, and culture are the other 90%.
Build the infrastructure on day one — adding it later is a full rewrite.

---

🎯 𝗜𝗻𝘁𝗲𝗿𝘃𝗶𝗲𝘄 𝗢𝗻𝗲-𝗟𝗶𝗻𝗲𝗿

Localisation in React is achieved using react-i18next for translation management, the browser LanguageDetector for auto-detection, the Intl API for dates, numbers and currencies, and dynamic RTL switching via document.dir — all configured once and consumed anywhere via the useTranslation hook.

---

#ReactJS #Localisation #i18n #Frontend #WebDevelopment #JavaScript #InterviewPrep #GlobalProduct #EngineeringMindset