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 key. Gumawa ng account dito. Libre ito, at hindi kinakailangan na magdagdag ng credit card.

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

Kailangan mo ring magdagdag ng dalawang karagdagang 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 Ingles.
• TACOTRANSLATE_ORIGIN: Ang “folder” kung saan mase-save ang iyong mga strings, 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

Tiyaking huwag kailanman ilahad ang lihim na read/write API key sa mga client side production environment.

Pagsisimula sa 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 component 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 pagpapatupad 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 ng Oras: Ina-awtomatiko ang nakakapagod na proseso ng lokalasyon at pag-kolekta ng mga string, iniipon ang iyong mahalagang oras.
• Matipid sa Gastos: Pinabababa ang pangangailangan para sa manwal na pagsasalin, kaya mababawasan ang iyong gastos sa lokalasyon.
• Pinahusay na Katumpakan: Tinitiyak ng AI-powered na mga pagsasalin ang tama sa konteksto at mataas na kalidad na resulta.
• Nasusukat na Solusyon: Madaling magdagdag ng suporta para sa mga bagong wika habang lumalago ang iyong aplikasyon at customer base.

Magsimula na ngayon!

Ang iyong React application ay awtomatikong isasalin kapag nagdagdag ka ng anumang mga string sa isang Translate na component. Tandaan na tanging mga kapaligiran na may read/write na pahintulot sa API key lamang ang makakalikha ng mga bagong string na isasalin.

Inirerekomenda namin ang pagkakaroon ng isang sarado at ligtas na staging environment kung saan maaari mong subukan ang iyong production application, magdagdag ng mga bagong string bago ito ilunsad. Mapipigilan nito ang sinuman mula sa pagnakaw ng iyong lihim na API key, at posibleng pagdami ng mga rogue na string sa iyong proyekto ng pagsasalin.

Siguraduhing tingnan ang mga kumpletong halimbawa sa aming GitHub profile. Kung magkaroon ka ng anumang problema, huwag mag-atubiling makipag-ugnayan, at kami ay higit na magiging masaya na tumulong.

Pinapahintulutan ka ng TacoTranslate na awtomatikong i-localize ang iyong mga React application nang mabilis mula at patungo sa kahit anong wika. Magsalin nang libre!