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:

Set up your translation files, detect user language, and switch languages dynamically using:

i18n.changeLanguage('ar');

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:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
const path = require('path');

module.exports = {
  mode: 'development',
  devServer: {
    port: 8080,
  },
  entry: './src/bootstrap.js',
  output: {
    publicPath: 'http://localhost:8080/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app_shell',
      remotes: {
        analytics_app: 'analytics_app@http://localhost:8081/remoteEntry.js',
      },
      shared: require('./package.json').dependencies,
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

Update src/bootstrap.js:

• Simplicity: Create stores using a straightforward API without the need for reducers or action types.
• Performance: Optimized for performance with selective rendering and minimal re-renders.
• Flexibility: Supports custom hooks, middleware, and integration with other libraries.
• No Providers: Unlike Redux, Zustand doesn't require wrapping your app with context providers.

These features make Zustand an attractive choice for developers looking to manage state in a more concise and efficient manner.