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

Com funciona

Instal·leu el paquet TacoTranslate mitjançant npm:

npm install tacotranslate

Un cop tinguis el mòdul instal·lat, hauràs de crear un compte de TacoTranslate, un projecte de traducció i les claus 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 navega fins a la pestanya de claus API. Crea una clau read i una clau read/write. Les guardarem com a variables d'entorn. La clau read és el que anomenem public i la clau read/write és secret. Per exemple, podries afegir-les 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 de reserva. En aquest exemple, el configurarem com en per a anglès.
• TACOTRANSLATE_ORIGIN: La "carpeta" on s'emmagatzemaran les teves cadenes, com per exemple l'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 d’API secreta read/write en entorns de producció del client.

Configuració de TacoTranslate

Inicialitza TacoTranslate a la teva aplicació React envoltant la teva aplicació amb el proveïdor de context de 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 pots utilitzar el component Translate a qualsevol lloc dins de la teva aplicació per mostrar text traduït! Assegura't de consultar la nostra documentació per a més informació i per a guies d'implementació específiques per a la teva configuració.

import {Translate} from 'tacotranslate/react';

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

Beneficis d'utilitzar TacoTranslate

• Estalvi de temps: Automatitza el procés feixuc de localització i recopilació de cadenes, estalviant-vos un temps valuós.
• Rendible: Redueix la necessitat de traduccions manuals, disminuint els costos de localització.
• Precisió millorada: Les traduccions impulsades per IA asseguren resultats contextualment precisos i d’alta qualitat.
• Solució escalable: Afegeix fàcilment suport per a nous idiomes a mesura que la vostra aplicació i base de clients creixen.

Comença avui mateix!

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

Recomanem disposar d’un entorn de proves tancat i segur on pugueu provar la vostra aplicació de producció, afegint noves cadenes abans de posar-la en funcionament. Això evitarà que algú robi la vostra clau API secreta i que, potencialment, s’inflï el vostre projecte de traducció 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!