Най-доброто решение за интернационализация (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-ите тук.
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
- Спестяване на време: Автоматизира трудоемкия процес на локализация и събиране на низове, спестявайки ви ценно време.
- Икономично: Намалява нуждата от ръчни преводи, като понижава разходите ви за локализация.
- Подобрена точност: Преводите, захранвани от AI, осигуряват контекстно точни и висококачествени резултати.
- Мащабируемо решение: Лесно добавяйте поддръжка за нови езици, докато вашето приложение и клиентската ви база растат.
Започнете още днес!
Вашето 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!