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 ai instalat modulul, va trebui să creezi un cont TacoTranslate, un proiect de traducere și cheile API asociate. Creează un cont aici. Este gratuit și nu este nevoie să adaugi un card de credit.

În interfața aplicației TacoTranslate, creați un proiect și navigați la fila cheilor API. Creați 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 puteți adăuga într-un fișier .env în rădăcina proiectului.

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 localizării de rezervă. În acest exemplu, îl vom seta la en pentru limba engleză.
• TACOTRANSLATE_ORIGIN: „folderul” în care vor fi stocate șirurile tale, 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

Asigură-te că nu divulgi 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 înfășurarea acesteia în providerul 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 poți folosi componenta Translate oriunde în aplicația ta pentru a afișa text tradus! Asigură-te că verifici documentația noastră pentru mai multe informații și pentru ghiduri de implementare specifice configurației tale.

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 anevoios de localizare și colectare a șirurilor de text, economisindu-ți timp prețios.
• Rentabil: Reduce necesitatea traducerilor manuale, scăzând costurile tale de localizare.
• Acuratețe îmbunătățită: Traducerile bazate pe AI asigură rezultate contextuale precise și de înaltă calitate.
• Soluție scalabilă: Poți adăuga cu ușurință suport pentru limbi noi pe măsură ce aplicația și baza ta de utilizatori cresc.

Începeți astăzi!

Aplicația dvs. React va fi tradusă automat atunci când adăugați orice stringuri în componentul Translate. Rețineți că doar mediile care au permisiuni read/write asupra cheii API vor putea crea stringuri noi care să fie traduse.

Vă recomandăm să aveți un mediu de testare închis și securizat, în care să vă testați aplicația de producție și să adăugați stringuri noi înainte de lansare. Acest lucru va împiedica pe oricine oricine să vă fure cheia API secretă și, potențial, să umfle proiectul dvs. de traduceri prin adăugarea de stringuri 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!