Най-доброто решение за интернационализация (i18n) в React приложения
Търсите ли да разширите вашето React приложение към нови пазари? TacoTranslate прави локализирането на вашите React приложения изключително лесно, позволявайки ви да достигнете до глобална аудитория без излишни усложнения.
Защо да изберете TacoTranslate за React?
- Безпроблемна интеграция: Специално проектиран за React приложения, TacoTranslate се интегрира лесно във вашия съществуващ работен процес.
- Автоматично събиране на низове: Без повече ръчно управление на JSON файлове. TacoTranslate автоматично събира низове от вашата кодова база.
- Преводи с AI поддръжка: Използвайте мощта на AI, за да осигурите контекстуално точни преводи, които пасват на тона на вашето приложение.
- Моментална езикова поддръжка: Добавяйте поддръжка за нови езици с едно щракване, правейки приложението ви достъпно глобално.
Как работи
Инсталирайте пакета 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 тук.
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!