Web Development Programming Tutorials, Guides & Best Practices

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

i18n.changeLanguage('ar');

Example en.json:

{
  "welcome": "Welcome to our platform!",
  "language": "Language",
  "date_example": "Today's date is {{date, datetime}}",
  "price_example": "Price: {{price, currency}}"
}

import React from 'react';

// Lazy load the remote Vue component
const Analytics = React.lazy(() => import('analytics_app/Analytics'));

function App() {
  return (
    <div className="App">
      <h1>Host Dashboard</h1>
      <React.Suspense fallback={<div>Loading Analytics...</div>}>
        <Analytics />
      </React.Suspense>
    </div>
  );
}

export default App;

Start the remote app (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;

Best Practices:

   const ThemeContext = React.createContext();
   const UserContext = React.createContext();