Javascript Programming Tutorials, Guides & Best Practices

/src
  /locales
    en.json
    fr.json
  /pages
    Home.js
    About.js
  i18n.js
  App.js
  routes.js

Create i18n.js:

With mobile-first usage in emerging markets:

• Ensure localized content fits small screens
• Test RTL support on all breakpoints
• Use dynamic font scaling for languages like Arabic or Hindi
• Translate push notifications and in-app messages

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

// Import translation files
import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(LanguageDetector) // Detects user language
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // React already escapes
    },
    detection: {
      order: ['localStorage', 'navigator', 'htmlTag'],
      caches: ['localStorage'],
    },
  });

export default i18n;

Create folder structure:

Let’s say you’re building a dashboard app in React, but your analytics module is handled by another team using Vue. You don’t want to tightly couple the two.

With Webpack Module Federation, you can load the Vue-based analytics micro-frontend into the React host — all without bundling it directly.

Zustand presents a compelling alternative to Redux for state management in React applications. Its minimalistic API, ease of use, and performance optimizations make it suitable for a wide range of projects, from simple applications to more complex systems.

By reducing boilerplate and simplifying state management, Zustand allows developers to focus more on building features and less on configuring their state management setup.