Pinakamahusay na solusyon para sa internationalization (i18n) ng mga React app

Paano ito gumagana

I-install ang TacoTranslate package gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kailangan mong lumikha ng isang TacoTranslate account, isang proyektong pagsasalin, at mga kaugnay na API key. Lumikha ng account dito. Libre ito, at hindi mo kailangang magdagdag ng credit card.

Sa UI ng TacoTranslate application, gumawa ng isang proyekto at mag-navigate sa tab na API keys nito. Gumawa ng isang read key at isang read/write key. Ise-save namin ang mga ito bilang mga environment variables. Ang read key ang tinatawag naming public, at ang read/write key naman ay secret. Halimbawa, maaari mong idagdag ang mga ito sa isang .env file sa root ng iyong proyekto.

Kailangan mo ring magdagdag ng dalawang karagdagang environment variable: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na code ng fallback na locale. Sa halimbawang ito, itatakda natin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan iimbak ang iyong mga string, tulad ng URL ng iyong website. Basahin pa ang tungkol sa mga origin dito.

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

Siguraduhing huwag kailanman ilantad ang lihim na read/write API key sa mga client-side production environment.

Pagsasaayos ng TacoTranslate

I-initialize ang TacoTranslate sa iyong React application sa pamamagitan ng pag-wrap ng iyong aplikasyon sa TacoTranslate context provider:

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

Maaari mo na ngayong gamitin ang Translate na komponent kahit saan sa loob ng iyong aplikasyon upang ipakita ang isinaling teksto! Siguraduhing tingnan ang ang aming dokumentasyon para sa karagdagang impormasyon, at para sa mga gabay sa pagpapatupad na partikular sa iyong setup.

import {Translate} from 'tacotranslate/react';

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

Mga benepisyo ng paggamit ng TacoTranslate

• Nakakatipid ng oras: Awtomatikong isinasagawa ang nakakapagod na proseso ng lokalizasyon at pagkolekta ng mga string, kaya nakakatipid ka ng mahalagang oras.
• Makatipid sa gastos: Binabawasan nito ang pangangailangan para sa manu-manong pagsasalin, na nagpapababa ng iyong mga gastos sa lokalizasyon.
• Pinahusay na katumpakan: Ang mga pagsasaling pinapagana ng AI ay tinitiyak ang kontekstuwal na katumpakan at mataas na kalidad ng mga resulta.
• Masusukat na Solusyon: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalaki ang iyong aplikasyon at ang iyong base ng mga customer.

Magsimula na ngayon!

Awtomatikong isasalin ang iyong React application kapag nagdagdag ka ng anumang string sa isang Translate component. Tandaan na tanging mga environment na may read/write na permiso sa API key ang makakalikha ng mga bagong string na isasalin.

Inirerekomenda naming magkaroon ng isang sarado at secure na staging environment kung saan maaari mong subukan ang iyong aplikasyong nasa produksyon at magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinumang magnakaw ng iyong lihim na API key, at posibleng magdulot ng paglobo sa iyong proyekto ng pagsasalin sa pamamagitan ng pagdaragdag ng mga hindi awtorisadong string.

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!