Javascript Programming Tutorials, Guides & Best Practices

Create i18n.js:

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

import en from './locales/en.json';
import fr from './locales/fr.json';

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

export default i18n;

• Text translation (i18n)
• Locale-aware formatting (dates, numbers, currencies)
• Cultural UX adaptations (e.g., RTL layouts, color symbolism)
• Language switching + SEO compatibility
• Region-based content rendering (e.g., laws, units, timezones)

In 2025, more users are accessing the web from non-English regions than ever before. Some reasons to globalize your React app:

/locales
  /en
    home.json
    dashboard.json
  /fr
    home.json
    dashboard.json

Then load them like:

Use shared in Module Federation to prevent loading duplicate libraries (like react, vue, etc.).

Use a design system or tokens for consistent UI/UX across micro-apps.

   import create from 'zustand';

   const useStore = create((set) => ({
     count: 0,
     increase: () => set((state) => ({ count: state.count + 1 })),
     decrease: () => set((state) => ({ count: state.count - 1 })),
   }));

   import React from 'react';
   import useStore from './store';

   function Counter() {
     const { count, increase, decrease } = useStore();
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={increase}>Increase</button>
         <button onClick={decrease}>Decrease</button>
       </div>
     );
   }

   export default Counter;