Javascript Programming Tutorials, Guides & Best Practices

Sample fr.json:

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

i18n.changeLanguage('ar');

new Intl.DateTimeFormat('fr-FR').format(new Date());
// Output: 04/05/2025 (French format)

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',

import('./App');

Update src/App.js:

   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;

With these steps, you've set up a basic state management system using Zustand without the need for additional boilerplate or context providers.