TacoTranslate
/
ДокументацияЦенообразуване
 
Статия
04.05.2025 г.

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