Mühelose Lokalisierung für React-Anwendungen

Wie es funktioniert

Installieren Sie das TacoTranslate‑Paket über npm:

npm install tacotranslate

Wenn Sie das Modul installiert haben, müssen Sie ein TacoTranslate‑Konto, ein Übersetzungsprojekt und die zugehörigen API‑Schlüssel erstellen. Erstellen Sie hier ein Konto. Es ist kostenlos, und Sie müssen keine Kreditkarte angeben.

Erstellen Sie innerhalb der TacoTranslate-Anwendungsoberfläche ein Projekt und wechseln Sie zur Registerkarte für API-Schlüssel. Erstellen Sie einen read Key und einen read/write Key. Wir speichern diese als Umgebungsvariablen. Den read Key nennen wir public und den read/write Key secret. Zum Beispiel könnten Sie sie in einer .env Datei im Stammverzeichnis Ihres Projekts ablegen.

Sie müssen außerdem zwei weitere Umgebungsvariablen hinzufügen: TACOTRANSLATE_DEFAULT_LOCALE und TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Der Standard-Fallback-Locale-Code. In diesem Beispiel setzen wir ihn auf en für Englisch.
• TACOTRANSLATE_ORIGIN: Der „Ordner“, in dem Ihre Strings gespeichert werden, z. B. die URL Ihrer Website. Weitere Informationen zu Origins finden Sie hier.

TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Achte darauf, den geheimen read/write API‑Schlüssel niemals in clientseitigen Produktionsumgebungen offenzulegen.

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! Schauen 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 das Sammeln von Strings und spart Ihnen wertvolle Zeit.
• Kosteneffizient: Reduziert den Bedarf an manuellen Übersetzungen und senkt Ihre Lokalisierungskosten.
• Verbesserte Genauigkeit: KI-gestützte Übersetzungen sorgen für kontextuell genaue und hochwertige Ergebnisse.
• Skalierbare Lösung: Fügen Sie ganz einfach Unterstützung für neue Sprachen hinzu, wenn Ihre Anwendung und Ihre Nutzerbasis wächst.

Jetzt loslegen!

Ihre React-Anwendung wird automatisch übersetzt, wenn Sie beliebige 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 zu haben, in der Sie Ihre Produktionsanwendung testen und vor dem Livegang neue Strings hinzufügen können. Dadurch verhindern Sie, dass irgendjemand irgendjemand Ihren geheimen API‑Schlüssel stiehlt und möglicherweise Ihr Übersetzungsprojekt durch das Hinzufügen unerwünschter 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!