Najlepšie riešenie pre internacionalizáciu (i18n) v React aplikáciách

Ako to funguje

Nainštalujte balík TacoTranslate cez npm:

npm install tacotranslate

Keď máte modul nainštalovaný, budete si musieť vytvoriť účet TacoTranslate, prekladový projekt a súvisiace API kľúče. Vytvorte si účet tu. Je to zadarmo a nie je potrebné zadávať kreditnú kartu.

V používateľskom rozhraní aplikácie TacoTranslate vytvorte projekt a prejdite na kartu API kľúčov. Vytvorte jeden read kľúč a jeden read/write kľúč. Uložíme ich ako premenné prostredia. Kľúč read nazývame public, a kľúč read/write je secret. Napríklad ich môžete pridať do súboru .env v koreňovom priečinku vášho projektu.

Tiež budete musieť pridať ďalšie dve premenné prostredia: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Predvolený kód náhradnej (fallback) lokality. V tomto príklade ho nastavíme na en pre angličtinu.
• TACOTRANSLATE_ORIGIN: "zložka", kde budú uložené vaše reťazce, napríklad URL vašej webovej stránky. Viac informácií o originách nájdete tu.

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

Uistite sa, že nikdy neprezradíte tajný read/write API kľúč v produkčných prostrediach na strane klienta.

Nastavenie TacoTranslate

Inicializujte TacoTranslate vo svojej React aplikácii tak, že aplikáciu obalíte poskytovateľom kontextu TacoTranslate:

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>
	);
}

Teraz môžete komponent Translate použiť kdekoľvek vo vašej aplikácii na zobrazovanie preloženého textu! Nezabudnite si pozrieť našu dokumentáciu pre viac informácií a implementačné návody špecifické pre vaše nastavenie.

import {Translate} from 'tacotranslate/react';

export default async function Component() {
	return (
		<Translate string="Hello? This is TacoTranslate speaking." />
	);
}

Výhody používania TacoTranslate

• Úspora času: Automatizuje zdĺhavý proces lokalizácie a zbierania reťazcov, čím vám šetrí cenný čas.
• Nákladovo efektívne: Znižuje potrebu manuálnych prekladov, čím znižuje náklady na lokalizáciu.
• Zlepšená presnosť: Preklady poháňané umelou inteligenciou zabezpečujú kontextovo presné a vysoko kvalitné výsledky.
• Škálovateľné riešenie: Jednoducho pridajte podporu pre nové jazyky, keď vaša aplikácia a zákaznícka základňa rastú.

Začnite ešte dnes!

Vaša React aplikácia sa bude automaticky prekladať, keď pridáte akékoľvek reťazce do komponentu Translate. Všimnite si, že iba prostredia s oprávneniami read/write pre API kľúč budú môcť vytvárať nové reťazce určené na preklad.

Odporúčame mať uzavreté a zabezpečené stagingové prostredie, kde môžete otestovať produkčnú aplikáciu a pridávať nové reťazce pred jej nasadením. Tým zabránite komukoľvek ukradnúť váš tajný API kľúč a potenciálne nafúknuť váš projekt prekladov pridaním nevhodných reťazcov.

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!