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 TacoTranslate account, isang proyekto para sa pagsasalin, at mga kaugnay na API keys. Gumawa ng account dito. Libre ito, at hindi nangangailangan na magdagdag ka ng credit card.

Sa loob ng UI ng TacoTranslate application, gumawa ng isang proyekto, at pumunta sa tab ng API keys nito. Gumawa ng isang read key, at isang read/write key. Ise-save natin ang mga ito bilang environment variables. Ang read key ang tinatawag nating public at ang read/write key ay secret. Halimbawa, maaari mo itong idagdag sa isang .env file sa root ng iyong proyekto.

Kakailanganin mo ring magdagdag ng dalawang environment variables: TACOTRANSLATE_DEFAULT_LOCALE at TACOTRANSLATE_ORIGIN.

• TACOTRANSLATE_DEFAULT_LOCALE: Ang default na fallback locale code. Sa halimbawang ito, itatakda natin ito sa en para sa English.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan iimbak ang iyong mga string, tulad ng URL ng iyong website. Magbasa pa 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 ipahamak ang lihim na read/write API key sa client side production environments.

Pagse-set up ng TacoTranslate

I-initialize ang TacoTranslate sa iyong React application sa pamamagitan ng pag-wrap ng iyong application 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 nang gamitin ang Translate na bahagi 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 angkop 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 sa Oras: Inaayos nang awtomatiko ang matrabahong proseso ng lokalisisyon at pagkolekta ng mga string, na nakakatipid ng mahalagang oras para sa iyo.
• Matipid sa Gastos: Binabawasan ang pangangailangan para sa manual na pagsasalin, kaya lumiliit ang iyong gastos sa lokalisisyon.
• Pinahusay na Katumpakan: Tinitiyak ng mga pagsasaling pinapagana ng AI na kontekstuwal na tama at mataas ang kalidad ng mga resulta.
• Scalable na Solusyon: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at 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 ang mga kapaligiran lamang na may read/write na mga permiso sa API key ang makakalikha ng mga bagong string na isasalin.

Inirerekomenda namin na 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 gawin live. Makakaiwas ito sa iba na nakawin ang iyong secret API key, at posibleng mapalaki nang hindi kinakailangan ang iyong translation project sa pamamagitan ng pagdaragdag ng mga rogue 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!