Javascript Programming Tutorials, Guides & Best Practices

{
  "routes": {
    "home": "accueil",
    "about": "a-propos"
  },
  "title": "Bienvenue sur notre site !"
}

Create routes.js:

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

• Use locale-sensitive images and icons

Then load them like:

resources: {
  en: {
    home: require('./locales/en/home.json'),
    dashboard: require('./locales/en/dashboard.json'),
  },
  fr: {
    home: require('./locales/fr/home.json'),
    dashboard: require('./locales/fr/dashboard.json'),
  },
},
ns: ['home', 'dashboard'],
defaultNS: 'home',

In webpack.config.js of app-shell:

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' }),
  ],
};

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: