jueves 18 julio 2024

Cómo implementar internacionalización en un proyecto React

Instalación

Primero, necesitas instalar las dependencias necesarias. Puedes hacer esto usando npm o yarn. Aquí te mostramos cómo hacerlo con npm:

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

Estas son las bibliotecas que instalaremos:

react-i18next: Enlace entre React y i18next.
i18next: Framework de internacionalización.
i18next-http-backend: Backend para cargar archivos de traducción desde el servidor.
i18next-browser-languagedetector: Detecta automáticamente el idioma del navegador.

Configuración Inicial

Crea una carpeta llamada locales en tu proyecto y dentro de ella, subcarpetas para cada uno de los idiomas que deseas soportar (por ejemplo, en para inglés y es para español). Dentro de cada subcarpeta, crea un archivo translation.json que contendrá las traducciones.

Estructura de carpetas:

/public
  /locales
    /en
      translation.json
    /es
      translation.json

Ejemplo de translation.json para inglés (/public/locales/en/translation.json):

{
  "welcome": "Welcome",
  "description": "This is an example of internationalization in React"
}

Ejemplo de translation.json para español (/public/locales/es/translation.json):

{
  "welcome": "Bienvenido",
  "description": "Este es un ejemplo de internacionalización en React"
}

Configurando i18next

Crea un archivo i18n.js en la raíz de tu proyecto para configurar i18next:

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

i18n
  .use(HttpBackend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false, // React already does escaping
    },
    backend: {
      loadPath: '/locales/{{lng}}/translation.json',
    },
  });

export default i18n;

Uso de i18n en Componentes React

En tu componente principal (por ejemplo, App.js), importa y configura i18next:

import React from 'react';
import { useTranslation } from 'react-i18next';
import './i18n';

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

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('es')}>Español</button>
    </div>
  );
}

export default App;

En este componente, useTranslation es un hook proporcionado por react-i18next que te permite acceder a la función t para traducir claves y a i18n para cambiar el idioma.

Cambio de Idioma

Hemos añadido botones para cambiar el idioma a inglés y español llamando a i18n.changeLanguage(). Cuando se llama a esta función, i18next cargará el archivo de traducción correspondiente y actualizará el contenido de la aplicación automáticamente.

Depuración

La opción debug: true en la configuración de i18next es útil durante el desarrollo para ver en la consola los mensajes de depuración. Puedes desactivarla en producción.

Etiquetas:

react javascript i18n desarrollo web

Creado por:

Jorge García

Fullstack developer