Mehrsprachig werden mit Reacti18next

Einführung

Internationalisierung ist heutzutage ein wichtiger Bestandteil von Webanwendungen. Um das Geschäft auf der ganzen Welt auszuweiten, muss Ihre Anwendung einige spezifische Änderungen erfahren. Es gibt viele Möglichkeiten, die Lokalisierung in einer Anwendung zu handhaben, aber heute werden wir uns ansehen, wie man sie am Frontend mit ReactJS,i18next.

Moderne SPAs (Single Page Application) handhaben die Lokalisierung sehr optimal, indem sie den gesamten Inhalt ohne Seitenrefresh übersetzen. Wir werden Schritt für Schritt zeigen, wie man die Lokalisierung in einer neuen React-Anwendung implementiert.

Schritt # 01

Sie können diesen Schritt überspringen, wenn Sie bereits eine frische Kopie der laufenden React-Anwendung haben. React App erstellen ist immer ein guter Startpunkt für jede React-Anwendung. Erstellen Sie ein Verzeichnis und gehen Sie im Terminal dorthin und geben Sie den folgenden Befehl ein.

npx create-react-app

Dadurch wird eine neue Kopie der React-Anwendung in diesem Verzeichnis erstellt.

Lesen Sie auch: Die besten ReactJS-Entwickler finden

Schritt # 02

Jetzt müssen Sie einige npm Pakete in Ihr Projekt.

npm i i18next i18next-browser-languagedetector react-i18next

Damit ist die Installation abgeschlossen. Nun ist es an der Zeit, mit der Konfiguration zu beginnen.

Schritt # 03

Jetzt ist es an der Zeit, Übersetzungsdateien zu erstellen. Für die aktuelle Anwendung möchte ich die Sprachen Englisch und Spanisch unterstützen, also muss ich zwei  JSON Dateien, in denen die gesamte Übersetzung gespeichert und in die Anwendung importiert werden soll.
Die Verzeichnisstruktur in src sollte also etwa so aussehen.

[Your Application Name]/src/locales/en/translation.json
[Your Application Name]/src/locales/es/translation.json

Unter translation.json Datei sollten Ihre Sprach-Tags und deren Übersetzungen sein. zum Beispiel im Fall von locales/en/translation.json sollte die Datei in etwa so aussehen.

{
"title": "I am title",
"text": "I am some demo text"
}

während für locales/es/translation.json es sollte eine Übersetzung der englischen Version sein.

{
"title": "Soy titulo",
"text": "Soy un texto de demostración"
}

Jetzt, wo Sie die Übersetzungsdateien haben, ist es an der Zeit, sie zu konfigurieren i18next Beispiel. Hierfür müssen Sie eine Datei in /src Verzeichnis mit Namen i18n.js. Die Datei sollte in etwa so aussehen.

import i18n from 'i18next';


import {
   initReactI18next
} from "react-i18next";


//Translations Import


import translationEN from './locales/en/translation.json'


import translationES from './locales/es/translation.json'


i18n.use(initReactI18next).init({
   resources: {


       en: {
           translation: translationEN
       },


       es: {
           translation: translationES


       }


   },
   lng: "en",
   fallbackLng: "en",
   interpolation: {
       escapeValue: false
   }


})


export default i18n;

wir initiieren i18n in unserer Anwendung. Außerdem importieren wir die Übersetzungen, die wir zuvor erstellt haben, in die Datei. Sie können jederzeit zu dokumentation für eine ausführliche Erklärung.
Jetzt haben Sie also erfolgreich die i18next in Ihre Anwendung zu integrieren. Jetzt ist es an der Zeit, sie in unseren Komponenten zu verwenden und sie zum Leuchten zu bringen.

Schritt # 04

React i18next bietet verschiedene Arten von Ansätzen zur Übersetzung Ihrer Inhalte, je nachdem, welche Art von Anwendung und welches Designmuster Sie verfolgen. Persönlich mag ich ihre userTranslation (hook) und withTranslation (HOC) Ansatz. Aber es ist immer noch besser, die offizielle Dokumentation zu lesen, bevor man sich an die Arbeit macht. Für diese Anwendung werde ich diese beiden Methoden verwenden.

React App erstellen App.js als Ausgangspunkt für die Anwendung, und das ist, wo wir React i18n. unter App.js Folgendes einführen

import {withTranslation} from "react-i18next";
import i18n from "./i18n";

Zu Demozwecken werde ich einen Titel erstellen, der vom Englischen ins Spanische übersetzt wird, wenn der Benutzer auf die Schaltfläche klickt. Für die erste Methode verwende ich die HOC-Methode.

class App extends Component {
   constructor(props) {
       super(props)
       this.state = {
           selectedLang: 'en'
       }
       this.
       changeLanguageHandler = this.
       changeLanguageHandler.
       bind(this)
   }
   changeLanguageHandler(lang) {
       this.
       setState({
           selectedLang: lang
       })
       i18n.changeLanguage(lang)
   }
   render() {
       const {
           t
       } = this.props
       return ( < div > < h2 > {
           t('title')
       } < /h2> < button onClick = {
           () => this.
           changeLanguageHandler(this.state.selectedLang === 'en' ? 'es' : 'en')
       } > Translate to {
           this.state.selectedLang === 'en' ? "Spanish" : "English"
       } < /button> < /div>);
   }
}
export default withTranslation()(App);

Hier haben wir die Funktion Change language handler erstellt, die einfach den Tag lang als Eingabe nimmt und den Status der ausgewählten Sprache setzt und auslöst changeLanguage Methode von i18n Instanz.
während wir in der Vorlage die Funktion t von props empfangen haben, indem wir withTranslation HOC. Die Funktion t nimmt den Tag als Eingabe und sucht die Übersetzung in der translations.json die wir für eine bestimmte Sprache erstellen.

Verwendung von userTranslation (Hook) Methode ist ein sehr effizienter Weg, um Übersetzungen in Ihren funktionalen Komponenten zu erhalten.

import React, {
   useState
}
from 'react'
import {
   useTranslation
}
from "react-i18next";
import i18n
from "./i18n";
function App() {
   const {
       t
   } = useTranslation();
   const [selectedLang,
       setLang
   ] = useState('en');
   const changeLanguageHandler = lng => {
       setLang(lng)
       i18n.
       changeLanguage(lng);
   };
   return ( < div > < span > {
       t('title')
   } < /span> < button onClick = {
       () => changeLanguageHandler(selectedLang === 'en' ? 'es' : 'en')
   } > Translate to {
       selectedLang === 'en' ? "Spanish" : "English"
   } < /button> < /div>);
}
export default App

wir importieren t Funktion von useTranslation und die Einstellung der gewählten Sprache mit useState Haken.
VOILA Sie haben Ihre React-Anwendung mit mehrsprachiger Unterstützung erstellt.

Lesen Sie auch: Zustandslose funktionale Komponenten in React

Bild mit freundlicher Genehmigung (i18next.com)