Ang pinakamahusay na solusyon para sa internationalization (i18n) sa mga React app

Paano ito gumagana

I-install ang package ng TacoTranslate gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kakailanganin mong gumawa ng isang TacoTranslate account, isang proyekto para sa pagsasalin, at mga kaugnay na API key. Gumawa ng account dito. Libre ito, at hindi kailangan mong magdagdag ng credit card.

Sa UI ng TacoTranslate application, gumawa ng isang proyekto at pumunta sa tab na API keys nito. Lumikha ng isang read key at isang read/write key. I-save natin ang mga ito bilang mga environment variable. Ang read key ang tinatawag nating public at ang read/write key ang 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 fallback locale code. Sa halimbawang ito, itatakda namin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan ise-save ang iyong mga string, tulad ng URL ng iyong website. Basahin ang higit pa tungkol sa mga pinagmulan dito.

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

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

Pagsasaayos ng TacoTranslate

I-initialize ang TacoTranslate sa iyong React na aplikasyon sa pamamagitan ng pag-wrap nito 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>
	);
}

Magagamit mo na ngayon ang Translate komponent kahit saan sa loob ng iyong aplikasyon upang ipakita ang isinalin na teksto! Siguraduhing tingnan ang aming dokumentasyon para sa karagdagang impormasyon, at para sa mga gabay sa implementasyon na partikular sa iyong setup.

import {Translate} from 'tacotranslate/react';

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

Mga pakinabang ng paggamit ng TacoTranslate

• Nakakatipid ng oras: Ina-automate ang nakakapagod na proseso ng lokalipikasyon at pagkolekta ng mga string, kaya nakakatipid ka ng mahahalagang oras.
• Makatipid sa gastos: Binabawasan ang pangangailangan para sa manwal na pagsasalin, kaya pinapababa ang iyong gastos sa lokalipikasyon.
• Pinahusay na katumpakan: Tinitiyak ng mga pagsasaling pinapagana ng AI ang kontekstuwal na katumpakan at mataas na kalidad ng mga resulta.
• Solusyong madaling palawakin: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at ang iyong base ng mga customer.

Magsimula na ngayon!

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

Iminumungkahi naming magkaroon ng isang sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application at magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang pagnanakaw ng iyong lihim na API key, at posibleng maiwasan ang paglobo ng iyong proyekto sa pagsasalin dahil sa 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!