Die beste Lösung für Internationalisierung (i18n) in React-Apps
Möchten Sie Ihre React-Anwendung auf neue Märkte ausweiten? TacoTranslate macht es unglaublich einfach, Ihre React-Apps zu lokalisieren, sodass Sie ohne zusätzlichen Aufwand ein weltweites Publikum erreichen können.
Warum TacoTranslate für React wählen?
- Nahtlose Integration: Speziell für React-Anwendungen entwickelt, fügt sich TacoTranslate mühelos in Ihren bestehenden Workflow ein.
- Automatische Erfassung von Textstrings: Keine manuelle Verwaltung von JSON-Dateien mehr. TacoTranslate erfasst automatisch Textstrings aus Ihrer Codebasis.
- KI-gestützte Übersetzungen: Nutzen Sie die Kraft der KI, um kontextuell genaue Übersetzungen bereitzustellen, die zum Ton Ihrer Anwendung passen.
- Sofortige Sprachunterstützung: Fügen Sie mit nur einem Klick Unterstützung für neue Sprachen hinzu, sodass Ihre Anwendung weltweit zugänglich ist.
So funktioniert es
Installieren Sie das TacoTranslate-Paket über npm:
npm install tacotranslate
Sobald Sie das Modul installiert haben, müssen Sie ein TacoTranslate-Konto, ein Übersetzungsprojekt und die zugehörigen API‑Schlüssel anlegen. Erstellen Sie hier ein Konto. Es ist kostenlos und erfordert keine Angabe einer Kreditkarte.
Erstellen Sie in der TacoTranslate-Anwendungsoberfläche ein Projekt und navigieren Sie zur Registerkarte für API-Schlüssel. Erstellen Sie einen read
Schlüssel und einen read/write
Schlüssel. Wir speichern diese als Umgebungsvariablen. Der read
Schlüssel ist das, was wir public
nennen, und der read/write
Schlüssel ist secret
. Zum Beispiel könnten Sie sie in eine .env
Datei im Stammverzeichnis Ihres Projekts hinzufügen.
Sie müssen außerdem zwei weitere Umgebungsvariablen hinzufügen: TACOTRANSLATE_DEFAULT_LOCALE
und TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Der standardmäßige Fallback-Locale-Code. In diesem Beispiel setzen wir ihn aufen
für Englisch.TACOTRANSLATE_ORIGIN
: Der „Ordner“, in dem Ihre Strings gespeichert werden, z. B. die URL Ihrer Website. Mehr über Origins erfahren Sie hier.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Stellen Sie sicher, dass der geheime read/write
API‑Schlüssel niemals in clientseitige Produktionsumgebungen gelangt.
TacoTranslate einrichten
Initialisieren Sie TacoTranslate in Ihrer React-Anwendung, indem Sie Ihre Anwendung in den TacoTranslate-Kontext-Provider einbetten:
import React, {useState} from 'react';
import TacoTranslate, {Translate} from 'tacotranslate/react';
const tacoTranslate = createTacoTranslateClient({
apiKey: 'YOUR_API_KEY',
});
export default function App() {
const [locale, setLocale] = useState('en');
return (
<TacoTranslate client={tacoTranslate} locale={locale}>
<Translate string="Hello, world!"/>
</TacoTranslate>
);
}
Sie können die Translate
Komponente nun überall in Ihrer Anwendung verwenden, um übersetzten Text anzuzeigen! Sehen Sie sich unbedingt unsere Dokumentation für weitere Informationen und Implementierungsanleitungen an, die speziell auf Ihre Konfiguration zugeschnitten sind.
import {Translate} from 'tacotranslate/react';
export default async function Component() {
return (
<Translate string="Hello? This is TacoTranslate speaking." />
);
}
Vorteile der Verwendung von TacoTranslate
- Zeitersparnis: Automatisiert den mühsamen Prozess der Lokalisierung und des Sammelns von Zeichenketten und spart Ihnen wertvolle Zeit.
- Kosteneffektiv: Verringert den Bedarf an manuellen Übersetzungen und senkt so Ihre Lokalisierungskosten.
- Verbesserte Genauigkeit: KI-gestützte Übersetzungen sorgen für kontextuell präzise und hochwertige Ergebnisse.
- Skalierbare Lösung: Fügen Sie ganz einfach Unterstützung für neue Sprachen hinzu, wenn Ihre Anwendung und Ihre Kundenbasis wächst.
Jetzt loslegen!
Ihre React-Anwendung wird automatisch übersetzt, wenn Sie Strings zu einer Translate
Komponente hinzufügen. Beachten Sie, dass nur Umgebungen mit read/write
Berechtigungen für den API-Schlüssel neue zu übersetzende Strings erstellen können.
Wir empfehlen, eine geschlossene und gesicherte Staging-Umgebung einzurichten, in der Sie Ihre Produktionsanwendung testen und neue Strings hinzufügen können, bevor Sie live gehen. Das verhindert, dass jemand Ihren geheimen API-Schlüssel stiehlt und möglicherweise Ihr Übersetzungsprojekt durch das Hinzufügen von unerwünschten Strings aufbläht.
Be sure to check out the complete examples over at our GitHub profile. If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Translate for free!