Om je React-applicatie geschikt te maken voor meerdere talen en culturen, kun je gebruik maken van een internationalisatie (i18n) bibliotheek zoals react-i18next. Hieronder vind je een stapsgewijze uitleg inclusief voorbeeldcode: 1. Installeer benodigde pakketten: ```bash npm install react-i18next i18next ``` 2. Maak vertaalbestanden aan: Maak bijvoorbeeld een map `public/locales/` met submappen voor elke taal, zoals `nl` en `en`. Bijvoorbeeld: `public/locales/nl/translation.json`: ```json { "welcome": "Hallo Wereld", "date": "Vandaag is {{date, date}}", "currency": "De prijs is {{amount, currency}}" } ``` `public/locales/en/translation.json`: ```json { "welcome": "Hello World", "date": "Today is {{date, date}}", "currency": "The price is {{amount, currency}}" } ``` 3. Configureer i18next: Maak een bestand `i18n.js` aan: ```js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; i18n .use(initReactI18next) .init({ resources: { nl: { translation: require('./locales/nl/translation.json') }, en: { translation: require('./locales/en/translation.json') } }, lng: 'nl', // standaardtaal fallbackLng: 'en', interpolation: { escapeValue: false, format: function(value, format, lng) { if (format === 'date') { return new Intl.DateTimeFormat(lng).format(value); } else if (format === 'currency') { return new Intl.NumberFormat(lng, { style: 'currency', currency: 'EUR' }).format(value); } return value; } } }); export default i18n; ``` 4. Importeer i18n in je hoofdapplicatiebestand: ```js import './i18n'; function App() { const { t, i18n } = useTranslation(); const wisselTaal = (taal) => { i18n.changeLanguage(taal); }; const vandaag = new Date(); return ( <div> <h1>{t('welcome')}</h1> <button onClick={() => wisselTaal('nl')}>Nederlands</button> <button onClick={() => wisselTaal('en')}>English</button> <p>{t('date', { date: vandaag })}</p> <p>{t('currency', { amount: 1234.56 })}</p> </div> ); } export default App; ``` 5. Dynamisch wisselen van taal: Gebruik de functie `changeLanguage` zoals in het voorbeeld hierboven om de taal te veranderen op basis van gebruikersactie. 6. Datum- en valutafomaten aanpassen: De `interpolation.format` functie in de i18n-configuratie zorgt ervoor dat datums en valuta automatisch worden aangepast aan de geselecteerde taal en cultuur. Met deze aanpak kun je eenvoudig je React-applicatie ondersteunen voor meerdere talen en culturen, vertalingen beheren, van taal wisselen en datum- en valutaformaten aanpassen.

Hier is een stapsgewijze handleiding om i18n in je React-applicatie te integreren: ### 1. Installeer benodigde packages ```bash npm install react-i18next i18next ``` ### 2. Basisconfiguratie Maak een bestand `i18n.js` in je src-map: ```javascript import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; // Vertaalbronnen const resources = { en: { translation: { "Hallo Wereld": "Hello World", "welkom": "Welcome" } }, nl: { translation: { "Hallo Wereld": "Hallo Wereld", "welkom": "Welkom" } }, fr: { translation: { "Hallo Wereld": "Bonjour le monde", "welkom": "Bienvenue" } } }; i18n .use(initReactI18next) .init({ resources, lng: "nl", // standaard taal fallbackLng: "en", interpolation: { escapeValue: false } }); export default i18n; ``` ### 3. Importeer i18n in je hoofdcomponent ```javascript import './i18n'; ``` ### 4. Pas je App-component aan ```javascript import { useTranslation } from 'react-i18next'; function App() { const { t, i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <div> <h1>{t('Hallo Wereld')}</h1> <p>{t('welkom')}</p> <button onClick={() => changeLanguage('en')}>English</button> <button onClick={() => changeLanguage('nl')}>Nederlands</button> <button onClick={() => changeLanguage('fr')}>Français</button> </div> ); } ``` ### 5. Datum- en valutaformaten Voor lokale formattering gebruik je `Intl` API: ```javascript // Datum formattering const formatDate = (date, locale) => { return new Intl.DateTimeFormat(locale).format(date); }; // Valuta formattering const formatCurrency = (amount, currency, locale) => { return new Intl.NumberFormat(locale, { style: 'currency', currency: currency }).format(amount); }; // Gebruik in component const MyComponent = () => { const { i18n } = useTranslation(); return ( <div> <p>Datum: {formatDate(new Date(), i18n.language)}</p> <p>Prijs: {formatCurrency(99.99, 'EUR', i18n.language)}</p> </div> ); }; ``` ### 6. Geavanceerde structuur voor vertalingen Maak aparte JSON-bestanden per taal: ``` src/ locales/ nl.json en.json fr.json ``` Voorbeeld `nl.json`: ```json { "common": { "welcome": "Welkom", "hello": "Hallo Wereld" }, "navigation": { "home": "Home", "about": "Over ons" } } ``` ### 7. Namespace ondersteuning Update je i18n config: ```javascript i18n .use(Backend) // voor lazy loading .use(LanguageDetector) // voor automatische taaldetectie .init({ fallbackLng: 'nl', debug: true, interpolation: { escapeValue: false, } }); ``` ### 8. Gebruik met namespaces ```javascript const { t } = useTranslation('common'); t('welcome'); // "Welkom" ``` ### Extra tips: - Gebruik sleutels i.p.v. directe tekst: `t('helloWorld')` i.p.v. `t('Hallo Wereld')` - Implementeer taalpersistentie met localStorage - Overweeg `i18next-http-backend` voor vertalingen vanuit een API - Gebruik `i18next-browser-languagedetector` voor automatische taaldetectie Deze setup biedt een schaalbare internationale ondersteuning voor je React-applicatie!