Traduzca aplicaciones React con IA de calidad humana

Ejemplo de i18n React: demostración de un proyecto React traducible

Si su proyecto de React aún no está configurado para la localización, no se preocupe. En esta sección, le guiaremos a través de una aplicación de demostración y ejemplos de referencias de confirmación.

Esta guía asume que ya tiene una aplicación React + TypeScript en ejecución (Vite, CRA, Next o similar) y al menos algunas cadenas de interfaz de usuario (UI) en inglés. Añadiremos soporte de internacionalización (i18n), organizaremos los archivos de traducción y utilizaremos Private Translation Cloud para generar traducciones de forma rápida y sencilla.

Para preparar su aplicación para la localización, necesita mover el texto fuera de los componentes y dentro de los archivos de traducción. Esto hace posible añadir otros idiomas más adelante sin cambiar su código.

La forma más común de hacer esto en React es utilizando i18next y su paquete de integración React react-i18next.

1. Instale las bibliotecas:

npm install i18next react-i18next

npm install i18next react-i18next

2. Cree una carpeta para los archivos de traducción:

src/i18n/
└── locales/
 └── en.json

src/i18n/
└── locales/
    └── en.json

Aquí es donde vivirán todas las traducciones. Cada archivo dentro de src/i18n/locales/ representa un solo idioma. Por ahora, solo necesita en.json para inglés. Más adelante, Private Translation Cloud generará archivos adicionales como fr.json (francés) o de.json (alemán) y los colocará en esta misma carpeta, para que todo permanezca organizado en un solo lugar.

3. Añada sus cadenas de idioma de origen (inglés) a en.json:

{
 "welcome": "Welcome",
 "description": "This is a localization demo.",
 "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "description": "This is a localization demo.",
  "clickMe": "Click me"
}

4. Reemplace el texto codificado en App.tsx con claves de traducción que hagan referencia al archivo JSON:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

Si se pregunta de dónde viene la función t, la configuraremos en el siguiente paso al configurar i18n. Por ahora, la parte importante es que su componente ya no depende del texto en inglés codificado.

En el paso anterior, creó en.json y actualizó su componente para hacer referencia a las claves de traducción. Sin embargo, ahora mismo, i18n no sabe dónde buscar esos archivos JSON. Necesitamos configurarlo para que la función t() pueda realmente extraer las cadenas correctas.

En lugar de importar cada archivo de idioma manualmente, puede utilizar Vite’s import.meta.glob para cargar automáticamente cada archivo *.json dentro de src/i18n/locales/. Esto significa que cuando más adelante añada archivos como fr.json o de.json (de Private Translation Cloud), se detectarán sin trabajo adicional.

1. Cree src/i18n/index.ts y configure i18next para cargar sus archivos JSON automáticamente:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
 { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
 const lang = path.match(/.\/locales\/(.*)\.json$/)?.[1];
 if (lang) {
 resources[lang] = { translation: modules[path].default };
 }
}

i18n
 .use(initReactI18next)
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const modules = import.meta.glob('./locales/*.json', { eager: true }) as Record<
  string,
  { default: Record<string, any> }
>;

const resources: Record<string, { translation: any }> = {};
for (const path in modules) {
  const lang = path.match(/\.\/locales\/(.*)\.json$/)?.[1];
  if (lang) {
    resources[lang] = { translation: modules[path].default };
  }
}

i18n
  .use(initReactI18next)
  .init({
    resources,
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
  });

export default i18n;

2. Importe esta configuración una vez en su archivo de entrada (src/main.tsx) para que i18next esté listo antes de que se renderice la aplicación:

import './i18n';

import './i18n';

Con esto, su aplicación React sabe dónde encontrar los archivos de traducción. Cuando Private Translation Cloud genere más adelante nuevos archivos, como fr.json, no necesitará cambiar su código ni añadir importaciones. Todo lo que necesitará hacer es asegurarse de que el archivo traducido vaya a src/i18n/locales/. La próxima vez que ejecute la aplicación, i18n hará que el francés esté disponible automáticamente junto con el inglés.

Ahora que su aplicación lee los mensajes de src/i18n/locales/en.json, puede utilizar Private Translation Cloud para generar las traducciones a otros idiomas.

1. Una vez que se registre para una prueba gratuita o inicie sesión en su cuenta de Private Translation Cloud, abra el asistente de configuración y añada su archivo de origen en inglés como un recurso traducible:

src/i18n/locales/en.json

src/i18n/locales/en.json

A continuación, establezca la ruta de salida para que Private Translation Cloud sepa dónde colocar los archivos traducidos:

src/i18n/locales/{{lang}}.json

src/i18n/locales/{{lang}}.json

Este patrón crea un archivo por idioma (por ejemplo, fr.json y de.json) en la misma carpeta que en.json.

Private Translation Cloud necesita unos minutos para generar las traducciones de IA. Cuando estén listas, recibirá un archivo JSON por idioma. Cada archivo debe colocarse en su proyecto bajo la carpeta src/i18n/locales/.

Por ejemplo, si tradujo al francés, el archivo será:

src/i18n/locales/fr.json

src/i18n/locales/fr.json

Ejemplo del contenido dentro de src/i18n/locales/fr.json:

La forma en que obtiene los archivos depende de cómo utilice Private Translation Cloud. En esta demostración, elegimos la integración de Git, lo que significa que Private Translation Cloud abrió una solicitud de combinación con los archivos traducidos ya colocados en la carpeta correcta.

Con sus traducciones en su lugar, el paso final es actualizar App.tsx y añadir un simple selector de idiomas. Esto le permite cambiar entre idiomas en su aplicación React y confirmar que todo funciona correctamente.

import { useTranslation } from 'react-i18next';

function App() {
 const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
 );
}

import { useTranslation } from 'react-i18next';

function App() {
  const { t, i18n } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>

      <button onClick={() => i18n.changeLanguage('en')}>EN</button>
      <button onClick={() => i18n.changeLanguage('fr')}>FR</button>
    </div>
  );
}

Ahora puede cambiar entre inglés y francés. Cuando ejecute la aplicación en francés, el diseño debería verse exactamente igual que en inglés, solo cambia el idioma del texto.

React app in English

React app in French

Una vez que su aplicación React esté localizada y funcionando en varios idiomas, puede desbloquear algunas opciones avanzadas en i18next para mejorar el rendimiento y la experiencia del usuario:

• Detectar automáticamente el idioma del usuario

Por defecto, la aplicación se inicia en inglés y permite a los usuarios cambiar de idioma manualmente con un selector de idiomas. Para que se abra automáticamente en el idioma preferido del usuario, instale el plugin de detección de idioma:

npm install i18next-browser-languagedetector

npm install i18next-browser-languagedetector

A continuación, actualice su src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(LanguageDetector) // detect browser/localStorage/etc.
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
 interpolation: { escapeValue: false },
 detection: {
 order: ['querystring', 'localStorage', 'cookie', 'navigator'],
 caches: ['localStorage', 'cookie'],
 },
 react: {
 useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
 },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)       // detect browser/localStorage/etc.
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr', 'de', 'ar'], // adjust to your supported languages
    interpolation: { escapeValue: false },
    detection: {
      order: ['querystring', 'localStorage', 'cookie', 'navigator'],
      caches: ['localStorage', 'cookie'],
    },
    react: {
      useSuspense: true, // set false if you don’t wrap <App /> in <Suspense>
    },
  });

export default i18n;

Con esta configuración, i18n comprobará el idioma del navegador (y las preferencias almacenadas) en la primera carga y cambiará automáticamente al idioma preferido del usuario cuando esté disponible.

• Carga diferida de traducciones para paquetes más pequeños

En el paso 2 de esta guía, configuró import.meta.glob con { eager: true }, que agrupa todos los archivos de traducción en la carga inicial de la aplicación. Esto es simple, pero si admite muchos idiomas, puede aumentar el tamaño de su paquete.

Para optimizar, puede cargar las traducciones de forma diferida utilizando i18next-http-backend:

npm install i18next-http-backend

npm install i18next-http-backend

Actualice src/i18n/index.ts:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
 .use(Backend) // load JSON over HTTP
 .use(LanguageDetector) // auto-detect + cache
 .use(initReactI18next)
 .init({
 fallbackLng: 'en',
 supportedLngs: ['en', 'fr'],
 interpolation: { escapeValue: false },
 backend: {
 // Vite serves files from /public at the site root
 loadPath: '/locales/{{lng}}/{{ns}}.json',
 },
 react: { useSuspense: true },
 });

export default i18n;

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)                // load JSON over HTTP
  .use(LanguageDetector)       // auto-detect + cache
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    supportedLngs: ['en', 'fr'],
    interpolation: { escapeValue: false },
    backend: {
      // Vite serves files from /public at the site root
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    react: { useSuspense: true },
  });

export default i18n;

Así es como deben organizarse sus archivos:

public/
 locales/
 en/
 translation.json
 fr/
 translation.json

public/
  locales/
    en/
      translation.json
    fr/
      translation.json

Con esta configuración, los archivos de traducción se cargan desde el servidor solo cuando se necesita un idioma. Esto mantiene el paquete inicial más pequeño, especialmente si su aplicación admite muchos idiomas.

Siguiendo estos dos consejos de optimización, su aplicación React puede:

• Iniciar automáticamente en el idioma preferido del usuario
• Cargar las traducciones solo cuando sea necesario, manteniendo sus paquetes ligeros