top of page

Cómo localizar una aplicación React usando i18next

En el mercado global de hoy, alcanzar una audiencia más amplia a menudo requiere localizar tu aplicación. En este blog, exploraremos cómo localizar una aplicación React utilizando i18next, un marco de internacionalización completo para JavaScript. Además, demostraremos cómo usar i18nowAI para automatizar el proceso de traducción de manera eficiente.


React

Paso 1: Configurar i18next en tu proyecto React


Para integrar i18next en tu proyecto React, comienza instalando los paquetes necesarios:

bash
npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

Una vez instalados, debes configurar i18next. Crea un nuevo archivo llamado i18n.js en la carpeta src de tu proyecto. Este lugar ayuda a mantener toda la configuración relacionada con la internacionalización en un solo lugar, facilitando su gestión. Aquí te mostramos cómo puedes configurar i18next en el archivo i18n.js:


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

i18n
  .use(HttpBackend) // carga traducciones usando http
  .use(LanguageDetector) // detecta el idioma del usuario
  .use(initReactI18next) // pasa i18n a React
  .init({
    fallbackLng: 'en',
    debug: true,
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
  });

export default i18n;

Para más detalles sobre la configuración, consulta la documentación oficial de i18next.


Paso 2: Crear archivos JSON para las traducciones


i18next utiliza archivos JSON para almacenar traducciones. Crea una estructura de directorios bajo public/locales en tu proyecto React. Dentro de este directorio, crea archivos JSON para cada idioma que planees soportar, como es.json, en.json, etc. Aquí tienes un ejemplo del archivo es.json que contiene traducciones básicas:


json
{
  "welcome_message": "¡Bienvenido a nuestra aplicación!",
  "about_us": "Sobre nosotros",
  "contact_us": "Contáctanos",
  "login": "Iniciar sesión",
  "logout": "Cerrar sesión",
  "user_profile": "Perfil del usuario",
  "settings": "Configuraciones",
  "search": "Buscar",
  "language_select_label": "Elige tu idioma:",
  "home": "Inicio",
  "page_not_found": "Página no encontrada",
  "error_message": "Ha ocurrido un error. Por favor, intenta de nuevo más tarde.",
  "footer_text": "Derechos de autor 2021, Todos los derechos reservados"
}

Paso 3: Usar i18nowAI para generar traducciones automáticas


Para simplificar el proceso de traducción, utiliza i18nowAI. Comienza registrándote en www.i18now.ai. Luego, sigue estos pasos:

  1. Sube tu archivo JSON de texto fuente: Sube el archivo JSON que contiene las cadenas en el idioma original.

  2. Selecciona los idiomas objetivo: Elige los idiomas a los cuales deseas traducir tu aplicación.

  3. Descarga los archivos JSON traducidos: Una vez que i18nowAI haya procesado tus archivos, descárgalos y reemplaza los originales en tu proyecto.


Para obtener más información sobre cómo usar i18nowAI con i18next, consulta estos artículos útiles:


Paso 4: Usar las traducciones en tu aplicación React


Finalmente, para usar las traducciones en tu aplicación, emplea el hook useTranslation de react-i18next. Así es cómo podrías hacerlo:

javascript
import React from 'react';
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('welcome_message')}</h1>
      <p>{t('footer_text')}</p>
    </div>
  );
}

export default HomePage;

Este sistema permitirá que tu aplicación sea accesible en múltiples idiomas, mejorando la experiencia del usuario y expandiendo tu alcance global. Sigue estos pasos para gestionar eficientemente las traducciones en tu aplicación React.

Comentarios

bottom of page