One component, four locales: Intl does the formatting
The same data, four results: grouping (lakh grouping in India), decimal sign, currency position, the yen's lack of decimals, the word order of dates, "yesterday" and the list joiner all come from the locale. The German amount contains a non-breaking space (U+00A0) before the €, which is why a test that compares against a typed "1.234.567,89 €" fails.
Internationalisation (i18n) means building the app so it can speak any language and follow any region's rules: format numbers, money, dates and lists with the browser's Intl APIs, choose plural forms with Intl.PluralRules, keep all text in translation files read through a t() function (react-i18next, FormatJS), and lay out pages with logical CSS so right-to-left languages work.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a useRelativeTime(date, now) hook that returns text such as "3 minutes ago" or "in 2 days" with Intl.RelativeTimeFormat in the current locale, choosing the largest sensible unit.
Convert this CSS to logical properties: .toast { position: fixed; right: 16px; padding-left: 12px; border-left: 4px solid; text-align: left; }.
Explain it without notes
How would you add internationalisation to an existing React app?
Why can't you write plural messages as count === 1 ? a : b, and what do you use instead?
What problems do time zones cause in a React app, especially with server rendering?
How do you support right-to-left languages?
Preview
Console
Nothing logged yet.Expected console output
en-US: $1,234,567.89 | January 15, 2024 at 10:30 AM | yesterday | Asha, Ben, and Chen
de-DE: 1.234.567,89 € | 15. Januar 2024 um 10:30 | gestern | Asha, Ben und Chen
hi-IN: ₹12,34,567.89 | 15 जनवरी 2024 को 10:30 am बजे | कल | Asha, Ben, और Chen
ja-JP: ￥1,234,568 | 2024年1月15日 10:30 | 昨日 | Asha、Ben、Chen