Traduzca aplicaciones React con IA de calidad humana

Configure la internacionalización de React (con ejemplos de commit)

Si ya tiene una aplicación React, pase al paso 2.

Para crear una nueva aplicación React + TypeScript, abra su terminal, navegue a la carpeta donde guarda sus proyectos y ejecute:

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

npm create vite@latest react-localization-demo -- --template react-ts
cd react-localization-demo
npm install
npm run dev

Esto inicia un servidor de desarrollo y abre la página predeterminada de Vite + React en su navegador.

Antes de añadir react-i18next, necesita preparar el texto del idioma de origen que desea traducir. Abra src/App.tsx y añada sus cadenas de texto orientadas al usuario:

function App() {
  return (
    <div>
      <h1>Bienvenido</h1>
      <p>Esta es una demostración de localización.</p>
      <button onClick={() => alert('Click me')}>Haga clic aquí</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>This is a localization demo.</p>
      <button onClick={() => alert('Click me')}>Click me</button>
    </div>
  );
}

Para los fines de nuestra demostración, hemos mantenido nuestra interfaz de usuario simple con un encabezado, descripción y botón.

Ahora que su aplicación React muestra algo de texto básico en inglés, es hora de conectar react-i18next para que esas cadenas provengan de un archivo de traducción en lugar de estar codificadas.

Este paso tiene tres partes:

1. Instale i18next y react-i18next
2. Cree su archivo de traducción al inglés (en.json)
3. Actualice su componente para usar el enlace useTranslation

3.1 instale las bibliotecas i18n

Desde la carpeta de su proyecto, instale las bibliotecas:

npm install i18next react-i18next

npm install i18next react-i18next

En este ejemplo:

• i18next es la biblioteca central de internacionalización
• react-i18next añade enlaces de React como el hook useTranslation

3.2 cree el archivo de origen en inglés para la traducción (en.json)

Cree la siguiente estructura de carpetas:

src/
 i18n/
 locales/
 en.json

src/
  i18n/
    locales/
      en.json

Luego añada sus cadenas de texto en inglés a src/i18n/locales/en.json:

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

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

Cada clave (welcome, description, clickMe) se asigna al texto que desea mostrar en la interfaz de usuario.

3.3 actualice app.tsx para usar useTranslation

Reemplace su texto en inglés codificado con llamadas a la función de traducción t().

El hook useTranslation() le da a su componente acceso a:

• t() – busca una cadena por clave
• i18n – le permite cambiar de idioma programáticamente

Actualice src/App.tsx:

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>
  );
}

export default App;

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>
  );
}

export default App;

En este momento, su componente llama a t('welcome'), pero i18next aún no sabe:

• Dónde vive en.json
• Qué idiomas existen
• Cuál debería ser el idioma predeterminado

En este paso, inicializará i18next y le dirá que cargue todos los archivos JSON de su carpeta de locales automáticamente utilizando import.meta.glob de Vite.

4.1 cree el archivo de configuración i18n

Cree un nuevo archivo en:

src/i18n/index.ts

src/i18n/index.ts

Añada la siguiente configuración:

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

type TranslationResources = string | { [k: string]: TranslationResources } | TranslationResources[];

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

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};

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';

type TranslationResources = string | { [k: string]: TranslationResources } | TranslationResources[];

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

const resources: Record<string, { translation: Record<string, TranslationResources> }> = {};

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;

Esta configuración es útil porque:

• Cada archivo *.json que añada a src/i18n/locales/ estará disponible automáticamente.
• Cuando PTC crea nuevos archivos de idioma (por ejemplo, ar.json), esta configuración los cargará automáticamente, sin necesidad de importaciones ni cambios de código.

4.2 importe i18n en su punto de entrada de la aplicación

Antes de que React renderice su aplicación, i18next necesita la oportunidad de inicializarse. Para que eso suceda, debe importar su configuración i18n en el archivo de entrada.
Si omite este paso, t() simplemente devolverá claves de traducción en lugar de texto traducido.

Abra src/main.tsx y añada la importación resaltada:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n' // ← ¡Añada esta importación!

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import './i18n'  // ← Add this import!

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Hasta ahora, solo ha utilizado cadenas estáticas como “Bienvenido” y “Haga clic aquí”. Pero las aplicaciones reales necesitan contenido dinámico:

• Incluir enlaces o formato dentro del texto traducido
• Saludar a los usuarios por su nombre
• Mostrar recuentos (“1 mensaje nuevo” vs “3 mensajes nuevos”)

5.1 interpolación: añadir variables a las traducciones

En lugar de codificar valores que cambian en tiempo de ejecución, puede interpolarlos en sus traducciones.

Para hacer esto, incluya una variable dentro de {{ }} en su JSON, luego pase el valor real al llamar a t().

Actualice src/i18n/locales/en.json:

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

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

Ahora actualice su componente para usar el saludo interpolado:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: 'Sarah' };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: 'Sarah' };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('description')}</p>
      <button onClick={() => alert(t('clickMe'))}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

El segundo argumento para t() es un objeto con los valores que desea sustituir. Puede tener tantas variables como necesite, solo asegúrese de que cada una aparezca en sus traducciones.

5.2 Añada formas plurales

Algunos cambios de texto basados en un número. Por ejemplo, “1 mensaje nuevo” vs “3 mensajes nuevos”. i18next maneja esto automáticamente cuando proporciona formas plurales.

Actualice src/i18n/locales/en.json:

{
 "welcome": "Welcome",
 "userGreeting": "Welcome back, {{firstName}}!",
 "description": "This is a localization demo.",
 "clickMe": "Click me",
 "newMessages_one": "Tiene {{count}} mensaje nuevo.",
 "newMessages_other": "Tiene {{count}} mensajes nuevos."
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "description": "This is a localization demo.",
  "clickMe": "Click me",
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages."
}

Para que la pluralización funcione, la variable interpolada debe llamarse count. i18next utiliza este valor para elegir la forma plural correcta para cada idioma.

Ahora utilícelo en su componente:

import { useTranslation } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: 'Sarah' };
 const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
 setMessageCount(messageCount + 1);
 };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('newMessages', { count: messageCount })}</p>
      <p>{t('description')}</p>
      <button onClick={handleIncrement}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: 'Sarah' };
  const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
    setMessageCount(messageCount + 1);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('userGreeting', { firstName: user.firstName })}</p>
      <p>{t('newMessages', { count: messageCount })}</p>
      <p>{t('description')}</p>
      <button onClick={handleIncrement}>{t('clickMe')}</button>
    </div>
  );
}

export default App;

i18next elegirá automáticamente newMessages (singular) cuando count sea 1, y newMessages_other (plural) para cualquier otro número.

5.3 componente trans: añadir formato y enlaces

A veces necesita formato (como texto en negrita) o elementos interactivos (como enlaces) dentro de una cadena traducida. El componente Trans le permite incluir elementos JSX (JavaScript XML) dentro de sus traducciones.

Primero, importe el componente Trans:

import { useTranslation, Trans } from 'react-i18next';

import { useTranslation, Trans } from 'react-i18next';

Añada una nueva clave a src/i18n/locales/en.json:

{
 "welcome": "Welcome",
 "userGreeting": "Welcome back, {{firstName}}!",
 "newMessages_one": "You have {{count}} new message.",
 "newMessages_other": "You have {{count}} new messages.",
 "description": "This is a localization demo.",
 "termsText": "I agree to the <1>Terms of Service1> and <3>Privacy Policy3>.",
 "clickMe": "Click me"
}

{
  "welcome": "Welcome",
  "userGreeting": "Welcome back, {{firstName}}!",
  "newMessages_one": "You have {{count}} new message.",
  "newMessages_other": "You have {{count}} new messages.",
  "description": "This is a localization demo.",
  "termsText": "I agree to the <1>Terms of Service</1> and <3>Privacy Policy</3>.",
  "clickMe": "Click me"
}

Observe las etiquetas <1> y <3>. Estos son marcadores de posición que se asignan a componentes secundarios por índice (comenzando desde 0).

Ahora utilice el componente Trans en su JSX:

import { useTranslation, Trans } from 'react-i18next';

function App() {
 const { t } = useTranslation();
 const user = { firstName: "Sarah" };
 const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
 setMessageCount(messageCount + 1);
 };

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("userGreeting", { firstName: user.firstName })}</p>
      <p>{t("newMessages", { count: messageCount })}</p>
      <p>{t("description")}</p>

      <p>
        <Trans i18nKey="termsText">
  Acepto los  <a href="/terms">Términos de Servicio</a> y la  
          <a href="/privacy">Política de Privacidad</a>.
        </Trans>
      </p>

      <button onClick={handleIncrement}>{t("clickMe")}</button>
    </div>
 );
}

export default App;

import { useTranslation, Trans } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  const user = { firstName: "Sarah" };
  const [messageCount, setMessageCount] = useState<number>(1);

  const handleIncrement = () => {
    setMessageCount(messageCount + 1);
  };

  return (
    <div>
      <h1>{t("welcome")}</h1>
      <p>{t("userGreeting", { firstName: user.firstName })}</p>
      <p>{t("newMessages", { count: messageCount })}</p>
      <p>{t("description")}</p>

      <p>
        <Trans i18nKey="termsText">
          I agree to the <a href="/terms">Terms of Service</a> and 
          <a href="/privacy">Privacy Policy</a>.
        </Trans>
      </p>

      <button onClick={handleIncrement}>{t("clickMe")}</button>
    </div>
  );
}

export default App;