为 React 应用轻松实现本地化

您是否想将 React 应用拓展到新的市场？TacoTranslate 让本地化 React 应用变得极其简单，让您无烦恼地触达全球受众。

为什么为 React 选择 TacoTranslate？

无缝集成： 专为 React 应用设计，TacoTranslate 可无缝融入您现有的工作流程。
自动收集字符串： 不再需要手动管理 JSON 文件。TacoTranslate 会自动从您的代码库中收集字符串。
AI 驱动的翻译： 利用 AI 的能力提供符合上下文且贴合您应用语气的准确翻译。
即时语言支持： 只需点击即可添加对新语言的支持，让您的应用面向全球用户。

工作原理

通过 npm 安装 TacoTranslate 包：

npm install tacotranslate

安装好模块后，您需要创建一个 TacoTranslate 帐户、一个翻译项目以及相关的 API 密钥。在这里创建帐户。这是免费的，无需您提供信用卡信息。

在 TacoTranslate 应用的 UI 中，创建一个项目，然后进入其 API 密钥选项卡。创建一个 read 密钥和一个 read/write 密钥。我们会把它们保存为环境变量。read 密钥就是我们所称的 public，而 read/write 密钥则是 secret。例如，您可以将它们添加到项目根目录下的 .env 文件中。

您还需要再添加两个环境变量： TACOTRANSLATE_DEFAULT_LOCALE 和 TACOTRANSLATE_ORIGIN.

TACOTRANSLATE_DEFAULT_LOCALE：默认回退的本地化（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

在你的 React 应用中，通过将应用包裹在 TacoTranslate 的上下文提供器中来初始化 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 驱动的翻译可确保符合上下文且高质量的结果。
可扩展的解决方案：随着您的应用和客户群增长，轻松添加对新语言的支持。

今天就开始！

当你将任何字符串添加到 Translate 组件时，你的 React 应用将会被自动翻译。请注意，只有在 API 密钥上拥有 read/write 权限的环境才能创建要翻译的新字符串。

我们建议设置一个封闭且安全的预发布环境，在那里你可以测试你的生产应用，并在上线前添加新字符串。这样可以防止任何人窃取你的秘密 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!