Cea mai bună soluție pentru internaționalizare (i18n) în aplicațiile React

Cum funcționează

Instalați pachetul TacoTranslate prin npm:

npm install tacotranslate

După ce ați instalat modulul, va trebui să creați un cont TacoTranslate, un proiect de traducere și cheile API asociate. Creați un cont aici. Este gratuit și nu necesită adăugarea unui card de credit.

În interfața aplicației TacoTranslate, creează un proiect și navighează la fila cheilor API. Creează o cheie read și o cheie read/write. Le vom salva ca variabile de mediu. Cheia read este ceea ce numim public iar cheia read/write este secret. De exemplu, le poți adăuga într-un fișier .env aflat în rădăcina proiectului tău.

De asemenea, va trebui să adăugați încă două variabile de mediu: TACOTRANSLATE_DEFAULT_LOCALE și TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Codul implicit al localei de rezervă. În acest exemplu, îl vom seta la en pentru limba engleză.
• TACOTRANSLATE_ORIGIN: „folderul” în care vor fi stocate șirurile tale de text, cum ar fi URL-ul site-ului tău. Află mai multe despre origini aici.

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

Asigurați-vă că nu divulgați niciodată cheia API secretă read/write în mediile de producție pe partea clientului.

Configurarea TacoTranslate

Inițializați TacoTranslate în aplicația dvs. React prin plasarea aplicației în provider‑ul de context 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>
	);
}

Acum puteți folosi componenta Translate oriunde în aplicația dvs. pentru a afișa text tradus! Asigurați-vă că consultați documentația noastră pentru mai multe informații și pentru ghiduri de implementare specifice configurării dvs.

import {Translate} from 'tacotranslate/react';

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

Beneficiile utilizării TacoTranslate

• Economisire de timp: Automatizează procesul plictisitor de localizare și de colectare a șirurilor de caractere, economisindu-vă timp prețios.
• Cost-eficient: Reduce necesitatea traducerilor manuale, scăzând costurile de localizare.
• Precizie îmbunătățită: Traducerile bazate pe AI asigură rezultate corecte din punct de vedere contextual și de înaltă calitate.
• Soluție scalabilă: Adăugați cu ușurință suport pentru limbi noi pe măsură ce aplicația și baza dvs. de clienți cresc.

Începeți astăzi!

Aplicația ta React va fi tradusă automat când adaugi orice șiruri de text într-o componentă Translate. Reține că numai mediile care au permisiuni read/write pentru cheia API vor putea crea noi șiruri care să fie traduse.

Recomandăm să ai un mediu de staging închis și securizat în care să poți testa aplicația ta de producție, adăugând noi șiruri înainte de lansare. Acest lucru va împiedica pe oricine oricine să îți fure cheia API secretă și, potențial, să umfle proiectul tău de traducere prin adăugarea de șiruri neautorizate.

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!