Nejlepší řešení pro internacionalizaci (i18n) v aplikacích React

Chcete rozšířit svou React aplikaci na nové trhy? TacoTranslate vám usnadní lokalizaci vašich React aplikací, díky čemuž můžete oslovit globální publikum bez zbytečných komplikací.

Proč zvolit TacoTranslate pro React?

Bezproblémová integrace: TacoTranslate je navržen speciálně pro React aplikace a snadno se integruje do vašeho stávajícího workflow.
Automatický sběr řetězců: Už žádná ruční správa JSON souborů. TacoTranslate automaticky sbírá řetězce z vašeho kódu.
Překlady poháněné AI: Využijte sílu umělé inteligence pro poskytování kontextově přesných překladů, které odpovídají tónu vaší aplikace.
Okamžitá podpora jazyků: Přidejte podporu nových jazyků pouhým kliknutím, čímž zpřístupníte svou aplikaci celosvětově.

Jak to funguje

Nainstalujte balíček TacoTranslate přes npm:

npm install tacotranslate

Když máte modul nainstalován, budete si muset vytvořit účet TacoTranslate, překladatelský projekt a přidružené API klíče. Založte si účet zde. Je to zdarma a nevyžaduje to přidání kreditní karty.

V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na záložku API klíčů. Vytvořte jeden read klíč a jeden read/write klíč. Uložíme je jako proměnné prostředí. read klíč nazýváme public a read/write klíč je secret. Například je můžete přidat do .env souboru v kořenovém adresáři vašeho projektu.

Budete také potřebovat přidat další dvě proměnné prostředí: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE: Výchozí kód náhradního lokalizačního jazyka. V tomto příkladu jej nastavíme na en pro angličtinu.
TACOTRANSLATE_ORIGIN: „složka“, kde budou vaše řetězce uloženy, například URL vašeho webu. Přečtěte si zde více o původech.

.env

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

Nezapomeňte nikdy neprozradit tajný read/write API klíč v produkčním prostředí na straně klienta.

Nastavení TacoTranslate

Inicializujte TacoTranslate ve vaší React aplikaci tím, že obalíte vaši aplikaci do poskytovatele 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>
	);
}

Nyní můžete komponentu Translate použít kdekoli ve vaší aplikaci pro zobrazení přeloženého textu! Nezapomeňte se podívat na naši dokumentaci pro více informací a návody na implementaci specifické pro vaše nastavení.

import {Translate} from 'tacotranslate/react';

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

Výhody používání TacoTranslate

Úspora času: Automatizuje únavný proces lokalizace a sběru řetězců, což vám šetří cenný čas.
Nákladová efektivita: Snižuje potřebu ručních překladů, čímž snižuje vaše náklady na lokalizaci.
Zlepšená přesnost: Překlady poháněné AI zajišťují kontextově přesné a kvalitní výsledky.
Škálovatelné řešení: Snadno přidávejte podporu nových jazyků, jak vaše aplikace a zákaznická základna rostou.

Začněte ještě dnes!

Vaše React aplikace bude automaticky přeložena, když přidáte jakýkoli řetězec do komponenty Translate. Všimněte si, že pouze prostředí s oprávněními read/write pro API klíč budou schopna vytvářet nové řetězce k překladu.

Doporučujeme mít uzavřené a zabezpečené staging prostředí, kde můžete testovat svou produkční aplikaci a přidávat nové řetězce před jejím uvedením do provozu. Tím se zabrání tomu, aby někdo ukradl váš tajný API klíč a potenciálně nafoukl váš překladatelský projekt přidáváním škodlivých řetězců.

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!