La millor solució per a la internacionalització (i18n) d'aplicacions React

Com funciona

Instal·la el paquet TacoTranslate amb npm:

npm install tacotranslate

Quan hagis instal·lat el mòdul, hauràs de crear un compte de TacoTranslate, un projecte de traducció i les claus d'API associades. Crea un compte aquí. És gratuït, i no requereix que afegeixis una targeta de crèdit.

Dins de la interfície d'usuari de l'aplicació TacoTranslate, crea un projecte i ves a la pestanya de claus API. Crea una clau read i una clau read/write. Les desarem com a variables d'entorn. La clau read és la que anomenem public i la clau read/write és secret. Per exemple, les podries afegir a un fitxer .env a l'arrel del teu projecte.

També hauràs d'afegir dues variables d'entorn més: TACOTRANSLATE_DEFAULT_LOCALE i TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: El codi de localització per defecte que s'utilitzarà com a reserva. En aquest exemple, el configurarem a en per a l'anglès.
• TACOTRANSLATE_ORIGIN: La “carpeta” on s'emmagatzemaran les teves cadenes, com la URL del teu lloc web. Llegeix més sobre els orígens aquí.

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

Assegureu-vos de no filtrar mai la clau secreta de l'API read/write als entorns de producció del costat del client.

Configuració de TacoTranslate

Inicialitzeu TacoTranslate a la vostra aplicació React envoltant la vostra aplicació amb el proveïdor 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>
	);
}

Ara podeu utilitzar el component Translate en qualsevol lloc de la vostra aplicació per mostrar text traduït! Assegureu-vos de consultar la nostra documentació per obtenir més informació i per a guies d'implementació específiques de la vostra configuració.

import {Translate} from 'tacotranslate/react';

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

Avantatges d'utilitzar TacoTranslate

• Estalvi de temps: Automatitza el tediós procés de localització i la recopilació de cadenes, estalviant-te un temps preciós.
• Rendible: Redueix la necessitat de traduccions manuals, disminuint les despeses de localització.
• Precisió millorada: Les traduccions amb IA garanteixen resultats precisos i d'alta qualitat tenint en compte el context.
• Solució escalable: Afegeix fàcilment suport per a nous idiomes a mesura que la teva aplicació i la teva base de clients creixen.

Comença avui mateix!

La teva aplicació React es traduirà automàticament quan afegeixis qualsevol cadena a un component Translate. Tingues en compte que només els entorns amb permisos read/write a la clau d'API podran crear noves cadenes per traduir.

Recomanem disposar d'un entorn de preproducció tancat i segur on puguis provar la teva aplicació de producció i afegir noves cadenes abans de publicar-la. Això evitarà que algú robi la teva clau d'API secreta i, potencialment, que el teu projecte de traducció s'infli afegint cadenes no desitjades.

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!