Plurals and placeholders: a tiny t() with Intl.PluralRules
English needs two forms; Polish needs four, and 22 takes the same form as 2 ("few") while 5 takes "many" and a fraction takes "other". A count === 1 check can't express that. Switch the menu to Polski and watch the list change.
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: 1 file selected / 2 files selected / 5 files selected / 22 files selected / 1.5 files selected
pl: Wybrano 1 plik / Wybrano 2 pliki / Wybrano 5 plików / Wybrano 22 pliki / Wybrano 1.5 pliku
Cześć, Asha!