Javascript Programming Tutorials, Guides & Best Practices

npm install react-router-dom i18next react-i18next i18next-browser-languagedetector

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

Switch dir dynamically:

document.documentElement.setAttribute('dir', i18n.language === 'ar' ? 'rtl' : 'ltr');

import ICU from 'i18next-icu';

i18n
  .use(ICU) // Enables datetime and currency formatting
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    ...
    interpolation: {
      format: (value, format, lng) => {
        if (format === 'datetime') {
          return new Intl.DateTimeFormat(lng).format(value);
        }
        if (format === 'currency') {
          return new Intl.NumberFormat(lng, {
            style: 'currency',
            currency: lng === 'fr' ? 'EUR' : 'USD',
          }).format(value);
        }
        return value;
      },
    }
  });

In large apps, structure your translation files modularly:

Now let’s set up the main container app.

npx create-react-app app-shell
cd app-shell
npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin

By selecting only the necessary state slices, you can optimize component rendering and improve performance.

While Redux remains a powerful tool for state management, there are scenarios where Zustand might be a better fit: