Die beste oplossing vir internasionalisering (i18n) in React-toepassings

Hoe dit werk

Installeer die TacoTranslate-pakket via npm:

npm install tacotranslate

Wanneer jy die module geïnstalleer het, moet jy ’n TacoTranslate-rekening skep, ’n vertaalprojek, en geassosieerde API-sleutels. Skep hier ’n rekening. Dit is gratis, en vereis nie dat jy ’n kredietkaart moet voeg nie.

Binnen die TacoTranslate-toepassingskoppelvlak, skep ’n projek, en navigeer na sy API-sleutels-oortjie. Skep een read sleutel, en een read/write sleutel. Ons sal dit as omgewingsveranderlikes stoor. Die read sleutel is wat ons public noem en die read/write sleutel is secret. Byvoorbeeld, jy kan dit by ’n .env lêer by die wortel van jou projek voeg.

Jy sal ook twee ekstra omgewingveranderlikes moet byvoeg: TACOTRANSLATE_DEFAULT_LOCALE en TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Die standaard terugval-lokalisasie-kode. In hierdie voorbeeld stel ons dit op en vir Engels.
• TACOTRANSLATE_ORIGIN: Die "lêergids" waar jou stringe gestoor sal word, soos die URL van jou webwerf. Lees hier meer oor oorspronge.

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

Maak seker dat u nooit die geheime read/write API-sleutel lek na kliëntkant-produksie-omgewings nie.

TacoTranslate opstel

Initialiseer TacoTranslate in jou React-toepassing deur jou toepassing in die TacoTranslate konteksverskaffer te vou:

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

Jy kan nou die Translate komponent enige plek binne jou toepassing gebruik om vertaalde teks te vertoon! Maak seker dat jy ons dokumentasie nagaan vir meer inligting en vir implementeringsgidse spesifiek vir jou opstelling.

import {Translate} from 'tacotranslate/react';

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

Voordele van die gebruik van TacoTranslate

• Tydsbesparing: Outomatiseer die vervelige proses van lokalisering en insameling van stringe, wat jou waardevolle tyd bespaar.
• Koste-effektief: Verminder die behoefte aan handmatige vertalings, wat jou lokalisasiekoste verlaag.
• Verbeterde akkuraatheid: KI-gedrewe vertalings verseker kontekstueel akkurate en hoë kwaliteit resultate.
• Skaleerbare oplossing: Voeg maklik ondersteuning vir nuwe tale by namate jou toepassing en klantbasis groei.

Begin vandag!

Jou React-toepassing sal outomaties vertaal word wanneer jy enige stringe by ʼn Translate komponent voeg. Let daarop dat slegs omgewings met read/write toestemming op die API-sleutel nuwe stringe kan skep om vertaal te word.

Ons beveel aan om ʼn geslote en beveiligde staging-omgewing te hê waar jy jou produksietoepassing kan toets en nuwe stringe kan byvoeg voordat dit aanlyn gaan. Dit sal voorkom dat enigiemand jou geheime API-sleutel steel en moontlik jou vertaalprojek laat groei deur ongemagtigde stringe by te voeg.

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!