Wie erstelle ich eine mehrsprachige Anwendung mit Reactjs?

Um eine mehrsprachige Anwendung mit Reactjs zu erstellen, benötigen Sie eine Bibliothek zur Internationalisierung (i18n). Eine beliebte i18n-Lösung ist die React Intl-Bibliothek.

Folgen Sie diesen grundlegenden Schritten:

1. Installation der Bibliothek: Installieren Sie die React Intl-Bibliothek in Ihrem Projekt durch die Ausführung von `npm install react-intl` oder `yarn add react-intl`.

2. Locales- und Nachrichtendateien: Erstellen Sie für jede unterstützte Sprache eine eigenständige Nachrichtendatei (in der Regel JSON-Dateien). Diese Dateien enthalten die eigentlichen Übersetzungen aller Texte in Ihrer Anwendung.

3. Intl-Provider: Um die Übersetzungsdaten zu verwenden, muss die Anwendung in einen Intl-Provider eingehüllt werden:

```javascript
import { IntlProvider } from ‘react-intl’;

import messages_en from ‘./locales/en.json’;
import messages_es from ‘./locales/es.json’;

const messages = { ‘en’: messages_en, ‘es’: messages_es
};

const language = navigator.language.split(/[-_]/)⁰; // z.B. ‘en’

ReactDOM.render( , document.getElementById(‘root’)
);
```

4. Verwenden von internationalisierten Nachrichten: Um die übersetzten Nachrichten in Ihrer Komponente zu verwenden, nutzen Sie die React Intl-Hooks wie `useIntl` oder `FormattedMessage`.

```javascript
import { useIntl } from ‘react-intl’;

function MyComponent() { const intl = useIntl();

return

{intl.formatMessage({ id: ‘greeting’ })}

}

// oder

import { FormattedMessage } from ‘react-intl’;

function MyComponent() { return

}
```

In beiden Fällen schlägt ‘greeting’ auf einen Schlüssel in Ihren Nachrichtendateien zurück.

Das ist ein grundlegender Ansatz, wie man eine mehrsprachige Anwendung in React.js erstellt. Abhängig von Ihren Bedürfnissen könnten Sie auch darüber nachdenken, wie Nutzer die Sprache der Anwendung ändern können, regionsspezifische Formate für Zahlen oder Datumsangaben handhaben und viele andere Details.