A legjobb megoldás a lokalizációhoz (i18n) React alkalmazásokban

Hogyan működik

Telepítse a TacoTranslate csomagot az npm segítségével:

npm install tacotranslate

Miután telepítetted a modult, létre kell hoznod egy TacoTranslate fiókot, egy fordítási projektet és a hozzá tartozó API kulcsokat. Hozz létre itt egy fiókot. Ingyenes, és nem kell hitelkártyát megadnod.

A TacoTranslate alkalmazás felhasználói felületén hozz létre egy projektet, majd navigálj az API kulcsok fülre. Hozz létre egy read kulcsot, és egy read/write kulcsot. Ezeket környezeti változókként fogjuk menteni. Az read kulcsot nevezzük public kulcsnak, az read/write kulcs pedig secret. Például hozzáadhatod őket a projekted gyökerében lévő .env fájlhoz.

Továbbá hozzá kell adnod még két környezeti változót: TACOTRANSLATE_DEFAULT_LOCALE és TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Az alapértelmezett tartalék helyi beállítás kódja. Ebben a példában az en-t állítjuk be angol nyelvhez.
• TACOTRANSLATE_ORIGIN: Az a „mappa”, ahol a szövegeid tárolva lesznek, például a weboldalad URL-je. További információk az eredetekről itt.

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

Ügyelj arra, hogy a titkos read/write API kulcsot soha ne szivárogtasd ki ügyféloldali éles környezetbe.

A TacoTranslate beállítása

Inicializálja a TacoTranslate-et a React alkalmazásában úgy, hogy az alkalmazását a TacoTranslate kontextus szolgáltatója veszi körül:

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

Most már használhatod a Translate komponenst az alkalmazásodban bárhol a lefordított szöveg megjelenítéséhez! Mindenképp nézd meg dokumentációnkat.

import {Translate} from 'tacotranslate/react';

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

A TacoTranslate használatának előnyei

• Időmegtakarítás: Automatizálja a lokalizációs és karakterláncgyűjtési fárasztó folyamatát, így értékes időt takarít meg Önnek.
• Költséghatékony: Csökkenti a manuális fordítások szükségességét, így alacsonyabbá teszi a lokalizációs költségeket.
• Pontosabb eredmények: Az MI által támogatott fordítások kontextusban pontos és kiváló minőségű eredményeket biztosítanak.
• Skálázható megoldás: Könnyedén adhat hozzá új nyelveket, ahogy az alkalmazása és ügyfélköre bővül.

Kezdje el még ma!

A React alkalmazásod automatikusan lefordításra kerül, amikor bármilyen szöveget hozzáadsz egy Translate komponenshez. Ne feledd, hogy csak azok a környezetek, amelyek rendelkeznek read/write jogosultsággal az API kulcson, tudnak új, fordítandó szövegeket létrehozni.

Javasoljuk, hogy legyen egy zárt és biztonságos staging környezeted, ahol tesztelheted az éles alkalmazásodat, új szövegeket hozzáadva, mielőtt élőbe lépnél. Ez megakadályozza, hogy bárki ellopja a titkos API kulcsodat, és megóvja a fordítási projektedet a rosszindulatúan hozzáadott szövegektől.

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!