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

Red = luck in China, danger in the West.

• Adapt units and metrics

Implementing i18n is no longer optional — it's essential in 2025 as user bases go global and inclusive design becomes the standard.

With i18next and react-i18next, you can:

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

module.exports = {
  mode: 'development',
  devServer: {
    port: 8081,
  },
  entry: './src/main.js',
  output: {
    publicPath: 'http://localhost:8081/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'analytics_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Analytics': './src/components/Analytics.vue',
      },
      shared: require('./package.json').dependencies,
    }),
    new HtmlWebpackPlugin({ template: './public/index.html' }),
  ],
};

Create src/components/Analytics.vue:

   import create from 'zustand';

   const useStore = create((set) => ({
     count: 0,
     increase: () => set((state) => ({ count: state.count + 1 })),
     decrease: () => set((state) => ({ count: state.count - 1 })),
   }));

   import React from 'react';
   import useStore from './store';

   function Counter() {
     const { count, increase, decrease } = useStore();
     return (
       <div>
         <h1>{count}</h1>
         <button onClick={increase}>Increase</button>
         <button onClick={decrease}>Decrease</button>
       </div>
     );
   }

   export default Counter;