Nejlepší řešení pro internacionalizaci (i18n) v aplikacích React
Chcete svou React aplikaci rozšířit na nové trhy? TacoTranslate výrazně usnadňuje lokalizaci vašich aplikací v Reactu, takže můžete oslovit globální publikum bez zbytečných komplikací.
Proč zvolit TacoTranslate pro React?
- Bezproblémová integrace: Navrženo speciálně pro aplikace React, TacoTranslate se hladce integruje do vašeho stávajícího pracovního postupu.
- Automatické shromažďování řetězců: Už žádné ruční spravování JSON souborů. TacoTranslate automaticky sbírá řetězce z vašeho kódu.
- Překlady poháněné umělou inteligencí: Využijte sílu umělé inteligence k zajištění kontextově přesných překladů, které odpovídají tónu vaší aplikace.
- Okamžitá podpora jazyků: Přidejte podporu nových jazyků jedním kliknutím a tím zpřístupněte svou aplikaci celosvětově.
Jak to funguje
Nainstalujte balíček TacoTranslate pomocí npm:
npm install tacotranslateJakmile budete mít modul nainstalovaný, budete si muset vytvořit účet TacoTranslate, překladový projekt a související API klíče. Vytvořte si účet zde. Je to zdarma a není potřeba zadávat platební kartu.
V uživatelském rozhraní aplikace TacoTranslate vytvořte projekt a přejděte na kartu API klíčů. Vytvořte jeden read klíč a jeden read/write klíč. Uložíme je jako proměnné prostředí. read klíč je to, čemu říkáme public a read/write klíč je secret. Například je můžete přidat do souboru .env v kořenovém adresáři vašeho projektu.
Také budete muset přidat dvě proměnné prostředí: TACOTRANSLATE_DEFAULT_LOCALE a TACOTRANSLATE_ORIGIN.
TACOTRANSLATE_DEFAULT_LOCALE: Výchozí kód záložní lokalizace. V tomto příkladu jej nastavíme naenpro angličtinu.TACOTRANSLATE_ORIGIN: „složka“, kde budou vaše řetězce uloženy, například adresa URL vašeho webu. Přečtěte si více o původech zde.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.comUjistěte se, že nikdy neprozradíte tajný read/write API klíč v produkčním prostředí na straně klienta.
Nastavení TacoTranslate
Inicializujte TacoTranslate ve své React aplikaci tím, že obalíte aplikaci poskytovatelem 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 k zobrazení přeloženého textu! Nezapomeňte se podívat na naši dokumentaci pro více informací a návody k 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 nudný proces lokalizace a sběru textových řetězců, čímž vám šetří drahocenný čas.
- Nákladově efektivní: Snižuje potřebu ručních překladů a tím i náklady na lokalizaci.
- Zlepšená přesnost: Překlady poháněné AI zajišťují kontextově přesné a vysoce kvalitní výsledky.
- Škálovatelné řešení: Snadno přidáte podporu nových jazyků, jak roste vaše aplikace a zákaznická základna.
Začněte ještě dnes!
Vaše React aplikace se automaticky přeloží, když do komponenty Translate přidáte jakékoli řetězce. Vezměte prosím na vědomí, že pouze prostředí s oprávněním read/write pro API klíč budou moci vytvářet nové řetězce určené k překladu.
Doporučujeme mít uzavřené a zabezpečené stagingové prostředí, kde můžete testovat svou produkční aplikaci a přidávat nové řetězce před jejím spuštěním. Tím zabráníte komukoli ukrást váš tajný API klíč a případně zaplnit váš překladový projekt přidáváním nežádoucí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!