Hacer tu aplicación multilenguaje o internacionalizada en ReactJs implica que tu aplicación podrá ser vista y entenderse en múltiples idiomas. Para lograrlo, se deberán dar los siguientes pasos:
1. Instala las librerías ‘react-i18next’ y ‘i18next’:
```
npm install react-i18next
npm install i18next
```
2. Crear archivos de lenguajes:
Crear un archivo para cada idioma que desees que tu aplicación soporte. Por ejemplo, para inglés puedes crear un archivo en.js y para español un archivo es.js dentro de un nuevo folder llamado “translations”. En estos archivos vas a traducir todas las cadenas de texto que usarás en tu aplicación. El formato para los archivos es JSON.
Ejemplo en.js:
```
{
“welcome”: “Welcome to our application“
}
```
Ejemplo es.js:
```
{
“welcome”: “Bienvenido a nuestra aplicación“
}
```
3. Configurar i18next: Dentro de tu archivo principal (por ejemplo, index.js), necesitas inicializar ‘i18next’ con tus archivos de lenguajes. Aquí también estableces el lenguaje por defecto para la aplicación.
Ejemplo:
```
import i18n from ‘i18next’;
import { initReactI18next } from ‘react-i18next’;
import en from ‘./translations/en’;
import es from ‘./translations/es’;
i18n.use(initReactI18next).init({
resources: {
en: { translation: en },
es: { translation: es },
},
lng: “en”,
fallbackLng: “en”,
interpolation: {
escapeValue: false
}
});
```
4. Uso de las traducciones en la aplicación: Puedes utilizar el hook `useTranslation` de ‘react-i18next’:
```
import React from ‘react’;
import { useTranslation } from ‘react-i18next’;
function Componente() { const { t, i18n } = useTranslation();
const cambiarLenguaje = (lng) => { i18n.changeLanguage(lng); }; return (export default Componente;
```
En este ejemplo hemos añadido dos botones para cambiar el idioma y se muestra la traducción de la cadena ‘welcome’ que se encuentra en nuestros archivos de traducción.
Con estos pasos, ya tienes lo necesario para cambiar el idioma en la aplicación completa.
