Labākais risinājums React lietotņu internacionalizācijai (i18n)

Kā tas darbojas

Instalējiet TacoTranslate pakotni, izmantojot npm:

npm install tacotranslate

Kad modulis būs instalēts, jums būs jāizveido TacoTranslate konts, tulkošanas projekts un atbilstošas API atslēgas. Izveidojiet kontu šeit. Tas ir bez maksas, un nav nepieciešams pievienot kredītkarti.

TacoTranslate lietotnes saskarnē izveidojiet projektu un dodieties uz tā API atslēgu cilni. Izveidojiet vienu read atslēgu un vienu read/write atslēgu. Mēs tās saglabāsim kā vides mainīgos. Atslēga read ir tā, ko mēs saucam par public, un atslēga read/write ir secret. Piemēram, jūs tās varat pievienot .env failam jūsu projekta saknē.

Jums arī būs jānorāda vēl divi vides mainīgie: TACOTRANSLATE_DEFAULT_LOCALE un TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Noklusējuma rezerves lokalizācijas valodas kods. Šajā piemērā to iestatīsim uz en — angļu valodai.
• TACOTRANSLATE_ORIGIN: "mape", kurā tiks glabātas jūsu virknes, piemēram, jūsu vietnes URL. Lasiet vairāk par origin šeit.

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

Pārliecinieties, ka nekad neizpaužat slepeno read/write API atslēgu klientpuses ražošanas vidēs.

TacoTranslate iestatīšana

Inicializējiet TacoTranslate savā React lietotnē, iesaiņojot savu lietotni TacoTranslate konteksta nodrošinātājā:

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

Tagad varat izmantot komponentu Translate jebkur savā lietotnē, lai attēlotu tulkotu tekstu! Noteikti apskatiet mūsu dokumentāciju, lai uzzinātu vairāk un iegūtu īstenošanas norādījumus, kas pielāgoti jūsu konfigurācijai.

import {Translate} from 'tacotranslate/react';

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

TacoTranslate izmantošanas priekšrocības

• Laika ietaupījums: Automatizē nogurdinošo lokalizācijas un virkņu vākšanas procesu, ietaupot jums vērtīgu laiku.
• Izdevīgi: Samazina nepieciešamību pēc manuāliem tulkojumiem, pazeminot jūsu lokalizācijas izmaksas.
• Uzlabota precizitāte: Ar mākslīgā intelekta atbalstu veiktie tulkojumi nodrošina kontekstuāli precīzus un augstas kvalitātes rezultātus.
• Mērogojams risinājums: Viegli pievienojiet atbalstu jaunām valodām, kā jūsu lietotne un klientu bāze aug.

Sāciet jau šodien!

Jūsu React lietotne tiks automātiski tulkota, kad komponentā Translate pievienosiet jebkādas teksta virknes. Ņemiet vērā, ka tikai vidēs, kurām API atslēgai ir read/write atļaujas, būs iespējams izveidot jaunas virknes, kas tiks tulkotas.

Mēs iesakām izveidot slēgtu un drošu testēšanas (staging) vidi, kurā varat pārbaudīt savu produkcijas lietotni un pievienot jaunas virknes pirms palaišanas. Tas pasargās jūsu slepeno API atslēgu no nozagšanas un novērsīs iespēju, ka kāds pievieno nesankcionētas virknes, kas potenciāli var uzpūst jūsu tulkošanas projektu.

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!