Javascript Programming Tutorials, Guides & Best Practices

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;

Sample en.json:

• Use locale-sensitive images and icons

e.g., currency symbols, cultural clothing, time formats

With i18next and react-i18next, you can:

• Translate your app without performance loss
• Format dates, numbers, currencies natively
• Scale your translations across large React apps

At the core of this revolution is Webpack 5’s Module Federation Plugin, which allows independently deployed builds to share code dynamically.

Module Federation is a feature in Webpack 5 that enables one JavaScript application (host) to dynamically load code from another (remote) at runtime.

Zustand allows you to select specific parts of the state to prevent unnecessary re-renders:

const count = useStore((state) => state.count);