TacoTranslate
/
ДокументацияЦени
 
Статия
4 май

Най-доброто решение за интернационализация (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 адреса на вашия уебсайт. Прочетете повече за origin-ите тук.
.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:

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 ключа ще могат да създават нови низове за превод.

Препоръчваме да имате затворена и защитена тестова среда, в която да тествате вашето продукционно приложение, като добавяте нови низове преди да го пуснете на живо. Това ще попречи на някой някой да открадне вашия таен 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Произведено в Норвегия