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

Paano ito gumagana

I-install ang pakete ng TacoTranslate gamit ang npm:

npm install tacotranslate

Kapag na-install mo na ang module, kailangan mong gumawa ng TacoTranslate account, isang proyekto ng pagsasalin, at mga kaukulang API key. Gumawa ng account dito. Libre ito, at hindi mo kailangang magbigay ng credit card.

Sa loob ng UI ng TacoTranslate application, gumawa ng isang proyekto, at mag-navigate sa tab ng API keys nito. Lumikha ng isang read key, at isang read/write key. Ise-save namin ang mga ito bilang mga environment variable. Ang read key ang tinatawag naming public at ang read/write key ay secret. Halimbawa, maaari mo silang idagdag 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 na locale code. Sa halimbawang ito, itatakda namin ito sa en para sa Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan itatago ang iyong mga string, tulad ng URL ng iyong website. Basahin pa ang 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

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

Pagsasaayos ng TacoTranslate

Simulan ang TacoTranslate sa iyong React na aplikasyon 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 component 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

• Time saving: Inaawtomatiko nito ang nakakapagod na proseso ng lokalisasyon at pagkolekta ng mga string, na nakakatipid ng iyong mahalagang oras.
• Cost-effective: Binabawasan ang pangangailangan para sa manwal na pagsasalin, na nagpapababa ng iyong gastos sa lokalisasyon.
• Improved accuracy: Tinitiyak ng mga pagsasaling pinapagana ng AI na ang mga resulta ay tama ayon sa konteksto at mataas ang kalidad.
• Scalable Solution: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at base ng mga customer.

Magsimula na ngayon!

Ang iyong React application ay awtomatikong maisasalin kapag nagdagdag ka ng anumang string sa isang Translate component. Tandaan na tanging mga kapaligiran na may read/write na pahintulot 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 sinuman sinuman na nakawin ang iyong sikretong API key, at posibleng maiwasan ang hindi kinakailangang pagdami ng mga hindi awtorisadong string sa iyong translation project.

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!