我轻松地将我的 React.js 应用程序翻译成了多种语言。具体方法如下……🤯

将应用程序翻译成多种语言（本地化）是许多应用程序的棘手部分。

Tolgee 正在简化本地化流程，并通过消除重复任务来节省开发人员的时间🔁❌

节省时间？这正是我想要的。教我如何本地化我的 React 应用！

Tolgee 是什么

Tolgee 是一个开源的i18n 工具，它结合了本地化平台和 SDK，为开发人员和翻译人员提供了翻译 Web 应用程序的简单方法。

Tolgee 不仅仅是一个提供集成功能、仅将本地数据与后端同步的软件本地化平台。相反，Tolgee 是通过 SDK 真正集成到您的应用中的。

上下文翻译📖

作为本地化应用程序的开发人员，您可能每次需要更改文本时都必须修改本地化数据。

因此，您必须打开文件，添加或找到要修改的密钥，保存它并检查应用程序中的所有内容是否都已正确更改。

使用 Tolgee，您只需ALT + click在应用程序中输入实际翻译的文本，💥boom💥翻译对话框就会出现，您可以立即进行翻译。

自动截图生成📸

本地化的另一个棘手部分是为译员提供上下文。仅仅导出源语言的关键词和译文并不总是足够的。

Tolgee 允许您直接在上下文翻译对话框中截取并上传屏幕截图。这样就无需手动截取和上传屏幕截图了。

包含本地化平台✅

Tolgee 也是一个本地化平台，您可以在此管理所有本地化字符串。您可以为译员提供访问权限，让他们在此翻译文本。

如果您之前上传过截图，他们就完全了解翻译的上下文，并且可以产生完美的结果。

整合起来难道不难吗？不难！

要开始，您只需按照平台提供的集成指南进行操作即可。

1. 登录Tolgee Cloud或使用您自己托管的Tolgee 实例。

2. 点击Add右上角的按钮创建一个新项目。填写项目名称。

   

   您可以选择添加多种语言来翻译您的应用。

3. Integrate从侧面菜单中选择，选择React（Vite）并生成一个已检查所有范围的 API 密钥。

1. 成功！🎉现在您只需按照集成指南操作即可。

让我们将它集成到 React App 中

1. 生成全新的 React App 并用您最喜欢的编辑器打开它

   npm create vite@latest tolgee-hello-world -- --template react-ts
   # follow the vite guide
   

2. 安装 Tolgee 软件包 ⬇️

   npm install @tolgee/react
   

3. 从集成指南中复制Tolgee 属性并将其添加到您的开发文件.env中env.development.local

   VITE_APP_TOLGEE_API_URL=https://app.tolgee.io
   VITE_APP_TOLGEE_API_KEY=<your API key>
   

4. 使用 TolgeeProvider 组件在 main.tsx 中包装你的 App 组件。同样，你可以从集成指南中复制它。

5. 转到App.tsx并用简单的“Hello world！”消息替换所有废话。

   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <h1>Hello world!</h1>
       </div>
     );
   }
   
   export default App;
   

6. 用组件包装“Hello world！”<T>并添加 keyName 属性。

   import './App.css';
   import { T } from '@tolgee/react';
   
   function App() {
     return (
       <div className="App">
         <h1>
           <T keyName="hello_world">Hello world!</T>
         </h1>
       </div>
     );
   }
   
   export default App;
   

7. 让我们在浏览器中运行该应用程序，看看它的效果吧！🪄

   按住ALT键并将鼠标移到文本上。该文本应该会突出显示。
   点击后，会打开对话框，您可以编辑文本或生成屏幕截图。

   

   点击更新按钮后，您的Hello World!文本将立即更改为新值！

恭喜！你完成了！🎉🎉🎉

现在您可以翻译您的 React 应用程序了。要了解更多关于 Tolgee 的信息或了解如何翻译更复杂的情况，请访问我们的文档。

Tolgee - 开发人员友好的本地化工具

Tolgee 帮助团队轻松本地化应用程序。我们通过实时更新和轻松集成到您的工作流程，让翻译变得简单。

告别复杂的文件管理，专注于打造优质产品。快速、流畅，专为开发者打造。

如果您喜欢本教程，请给我们一个星标。这有助于我们创作更多类似的文章💖

为 Tolgee 仓库加星标 ⭐