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.

 

Speaker

 

Mirco Zeiss
Mirco Zeiss befasst sich mit aktuellen Themen wie TypeScript, WebAssembly, React, Go, Rust und Swift. Er liebt es, Produkte zu bauen, die das Leben jedes Einzelnen einfacher machen. Sei es im beruflichen oder auch im privaten Umfeld. Er ist Teamleiter bei HBM Darmstadt, hat zwei Töchter, einen Hund und ist Gründer von @seriesci und @spolytics. Ihr findet ihn online unter zemirco.


MaibornWolff

enterJS-Newsletter

Ihr möchtet über die enterJS
auf dem Laufenden gehalten werden?

 

Anmelden