React i18n mit Context und Hooks

Mehrsprachige Applikationen können weltweit genutzt werden und sorgen dafür, dass sich niemand ausgeschlossen fühlt. Neuere React-Versionen haben zwei Funktionalitäten, die dabei helfen, Internationalisierung einzubauen, nämlich Context und Hooks. Dadurch brauchen wir keine weitere externe Abhängigkeit und können auf Standards zurückgreifen.

Wir nutzen das ICU-Format und speichern einzelne Sprachen in JSON-Dateien ab. Die eingestellte Sprache und Übersetzungsmethoden sind im React Context gespeichert. Dadurch stehen sie in der gesamten Applikation zur Verfügung. Mittels Callbacks in den Kindern können wir die Sprache umstellen. Durch explizite Typisierung haben wir zudem IDE-Unterstützung.

Vorkenntnisse

- React
- Context
- Hooks
- TypeScript

Lernziele

Das Publikum soll lernen, wie sie eine React-Applikation bauen, die mehrere Sprachen unterstützt. Dabei werden wir auf Standards des Frameworks zurückgreifen. Auf große externe Pakete wird verzichtet. Außerdem zeige ich, wie innerhalb einer Applikation mittels Context und Hooks zwischen Komponenten kommuniziert wird. Die Sprache ist in der Root-Komponente verankert und eine Änderung muss an alle Kinder weitergegeben werden.