TacoTranslate
/
ДокументацијаЦени
 
Статија
04 мај

Најдоброто решение за интернационализација (i18n) во React апликации

Дали сакате да ја проширите вашата React апликација на нови пазари? TacoTranslate го прави локализирањето на вашите React апликации неверојатно лесно, овозможувајќи ви да допрете до глобална публика без никаков проблем.

Зошто да го изберете TacoTranslate за React?

  • Безпрекорно интегрирање: Дизајнирано специјално за React апликации, TacoTranslate се интегрира без напор во вашиот постоечки работен тек.
  • Автоматско собирање низи: Повеќе не е потребно рачно управување со JSON датотеки. TacoTranslate автоматски ги собира низите од вашиот код.
  • Преводи со помош на ВИ: Искористете ја моќта на ВИ за да добиете контекстуално точни преводи кои одговараат на тоналитетот на вашата апликација.
  • Моментална поддршка за јазици: Додадете поддршка за нови јазици со само еден клик, што ја прави вашата апликација глобално достапна.

Како функционира

Инсталирајте го пакетот TacoTranslate преку npm:

npm install tacotranslate

Откако ќе го инсталирате модулот, ќе треба да креирате TacoTranslate сметка, проект за превод и поврзани API клучеви. Креирајте сметка тука. Бесплатно е и не бара да внесете кредитна картичка.

Во корисничкиот интерфејс на апликацијата TacoTranslate, создадете проект и одете на табот за API клучеви. Создадете еден read клуч и еден read/write клуч. Ние ќе ги зачуваме како променливи на околината. read клучот го нарекуваме public а read/write клучот е secret. На пример, можете да ги додадете во .env фајл во основната папка на вашиот проект.

Исто така ќе треба да додадете уште две променливи на средината: TACOTRANSLATE_DEFAULT_LOCALE и TACOTRANSLATE_ORIGIN.

  • TACOTRANSLATE_DEFAULT_LOCALE: Стандардниот локален код за враќање. Во овој пример, ќе го поставиме на en за англиски.
  • TACOTRANSLATE_ORIGIN: „Папката“ каде што ќе се чуваат вашите низа, како URL-то на вашата веб-страница. Прочитајте повеќе за origins овде.
.env
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com

Обавезно никогаш не го откривајте тајниот read/write API клуч во клиентски производни средини.

Поставување на TacoTranslate

Иницијализирајте го TacoTranslate во вашата React апликација така што ќе ја обвивате вашата апликација во 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>
	);
}

Сега можете да го користите Translate компонентот на кое било место во вашата апликација за да прикажете преведен текст! Обавезно проверете ја нашата документација за повеќе информации и за водичи за имплементација специфични за вашата конфигурација.

import {Translate} from 'tacotranslate/react';

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

Придобивки од користењето на TacoTranslate

  • Заштеда на време: Автоматизира монотониот процес на локализација и собирање низи, штедејќи ви вредно време.
  • Исплатливо: Ги намалува потребите за рачни преводи, со што ги намалува трошоците за локализација.
  • Подобрена прецизност: Преводите со поддршка од вештачка интелигенција обезбедуваат контекстуално точни и квалитетни резултати.
  • Решение што може да се шири: Лесно додадете поддршка за нови јазици како што расте вашата апликација и база на корисници.

Започнете денес!

Вашата React апликација ќе се преведува автоматски кога ќе додадете било кои стрингови во Translate компонентата. Имајте предвид дека само околини со read/write дозволи на API клучот ќе можат да креираат нови стрингови за превод.

Препорачуваме да имате затворена и обезбедена средина за тестирање (staging) каде што можете да ја тестирате вашата продукциска апликација, додавајќи нови стрингови пред да ја пуштите во живо. Ова ќе спречи некој да украде вашиот таен API клуч и потенцијално да го зголеми проектот за превод со додавање на несакани стрингови.

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!

Производ од NattskiftetНаправено во Норвешка