React + react-intl: Der komplette Lokalisierungs-Guide [2026]

Schnelle Antwort

Um Lokalisierung in React mit react-intl zu implementieren, musst du das Paket installieren, deine App mit IntlProvider wrappen und Komponenten wie <FormattedMessage /> verwenden. react-intl ist Teil der FormatJS-Suite und exzellent für standardisierte Formatierung von Zahlen, Daten und Strings.

---

Einführung

Der Aufbau einer globalen Anwendung mit React erfordert eine solide Strategie für Lokalisierung. In diesem Guide gehen wir durch, wie man react-intl von Grund auf einrichtet.

Warum react-intl?

• Standards: Basiert auf der nativen Intl API des Browsers.
• Formatierung: Exzellenter Support für Daten, Währungen und Zahlen.
• Geschichte: Eine der ältesten und getestetsten Bibliotheken.

---

Schritt 1: Installation

TerminalCopy
npm install react-intl

Schritt 2: Konfiguration

Wrappe deine App im Stammverzeichnis.

JavaScriptCopy
1import { IntlProvider } from 'react-intl';
2import messages_de from "./locales/de.json";
3import messages_en from "./locales/en.json";
4
5const messages = {
6  'de': messages_de,
7  'en': messages_en
8};
9
10const language = navigator.language.split(/[-_]/)[0];  // Sprache ohne Region-Code
11
12ReactDOM.render(
13  <IntlProvider locale={language} messages={messages[language]}>
14    <App />
15  </IntlProvider>,
16  document.getElementById('root')
17);

Schritt 3: Verwendung

JavaScriptCopy
1import { FormattedMessage } from 'react-intl';
2
3export default function HelloWorld() {
4  return (
5    <FormattedMessage
6      id="app.greeting"
7      defaultMessage="Hello, World!"
8      description="Welcome greeting on home page"
9    />
10  );
11}

---

Verwaltung von Übersetzungen mit IntlPull

FormatJS (react-intl) ermutigt zur Extraktion von Nachrichten aus dem Code. IntlPull integriert sich perfekt in diesen Workflow:

1. Extrahieren: Verwende das formatjs CLI, um Nachrichten in ein JSON zu extrahieren.
2. Übersetzen: Sende das JSON an IntlPull.
3. Synchronisieren: Hole die Übersetzungen für alle deine Sprachen.

TerminalCopy
npx @intlpullhq/cli push

---

Fazit

react-intl ist der Standard für Anwendungen, die präzise Lokalisierung von Zahlen und Daten zusätzlich zu Text benötigen. Seine deklarative Syntax fügt sich gut in das React-Ökosystem ein.