Comencemos usando una implementación react-redux del todomvc como base para nuestra aplicación, y luego agregaremos características de internacionalización a medida que avanzamos en esta guía. Para una rápida recapitulación de cómo empezar con react-redux, revisa la documentación. Este proyecto utiliza create-react-app, que es un típico proyecto de React sin opinar, con un mínimo de requisitos, útil para empezar de nuevo.
Antes de empezar, tendremos que instalar las bibliotecas que necesitamos:
1npm instalar i18next react-i18next i18next-xhr-backend
nodo
A continuación, crearemos un archivo llamado i18n.js en la carpeta src, donde guardaremos la configuración para nuestro proceso de localización.
1234567891011121314151617181920212223// src/i18n.jsimport i18n from "i18next";importBackendfrom "i18next-xhr-backend";import{ initReactI18next }from "react-i18next";i18n // cargar la traducción usando xhr - use(Backend)// pasar la instancia i18n para react-i18next..use(initReactI18next)// init i18next// para todas las opciones lea: https://www.i18next.com/overview/configuration-options.init({ fallbackLng: "en", debug:false, interpolation:{ escapeValue:false// no es necesario para reaccionar ya que escapa por defecto}});exportdefault i18n;javascript
El i18next-xhr-backend espera que todos los archivos de traducción se sirvan desde la carpeta pública de nuestra aplicación.
También podríamos obtener dinámicamente el idioma del usuario en el navegador usando un plugin i18n:
1npm instalar i18next-browser-languagedetector
nodo
Y la actualización del i18n.js sería:
12345678910111213141516171819202122// src/i18n.jsimport i18n from "i18next";importBackendfrom "i18next-xhr-backend";importLanguageDetectorfrom "i18next-browser-languagedetector";import{ initReactI18next }from "react-i18next";i18n . use(Backend)// detectar el lenguaje del usuario// más información: https://github.com/i18next/i18next-browser-languageDetector.use(LanguageDetector).use(initReactI18next).init({ fallbackLng: "de", debug:true, interpolation:{ escapeValue:false}});exportdefault i18n;javascript
Luego incluimos la i18n.js en el src/index.js de nuestra aplicación:
12345678910111213141516// src/index.jsimportReact,{Suspense}de "react";import{ render }de "react-dom";import{Proveedor}de "react-redux";importAppfrom"./componentes/App";import configureStore from". /store";import "todomvc-app-css/index.css";import"./i18n";render(<Provider store={configureStore()};javascript
La estructura de carpetas por defecto para nuestros archivos de traducción es la siguiente:
123456-public/--- locales/----- de------- translation.json----- en------- translation.json
javascript
Nuestros archivos de traducción tendrían el siguiente contenido:
1234567891011// de/translation.json{"title": "todos", "placeholder": "Was muss getan werden?"}// en/translation.json{"title": "todos", "placeholder": "What needs to be done?"}javascript
Nota : Todos los archivos de traducción se cargan asincrónicamente.
Por último, conectamos las traducciones a nuestro componente a través del gancho de uso de la traducción.
12345678910111213141516171819202122232425262728293031// src/components/Header.jsimportReactfrom "react";importPropTypesfrom "prop-types";import{ useTranslation }from "react-i18next";importTodoTextInputfrom". /TodoTextInput";constHeader=({ addTodo })={const{ t }=useTranslation();return(<header className="header"<h1>{t("title")}</h1><TodoTextInput newTodo onSave={text==={if(text. longitud!==0){addTodo(texto);}}}cabecera={t("placeholder")}/;/cabecera;};Cabecera.propTypes={ addTodo:PropTypes.func.isRequired};exportdefaultHeader;javascript
El gancho UseTranslation devuelve un objeto que contiene las siguientes propiedades:
- t() – La función t acepta un parámetro obligatorio como clave de traducción (public/locales/en/translation.json), y el segundo parámetro opcional es el llamado texto de trabajo. Siempre que no hay traducción, por defecto se utiliza el texto de trabajo o la clave de traducción si no hay texto de trabajo en primer lugar.
- i18n – Esta es la instancia inicial de i18n. Contiene varias funciones, una de las cuales podemos usar para cambiar el idioma actualmente seleccionado. Véase el ejemplo a continuación:
123456789101112131415161718// src/components/LanguageSelector.jsimportReactfrom "react";import{ useTranslation }from "react-i18next";exportdefaultfunctionLanguageSelector(){const{ i18n }=useTranslation();constchangeLanguage=lng={ i18n. changeLanguage(lng);};return(<div className="LanguageSelector"--> --> botón onClick={()=;changeLanguage("de")};de</button(;<botón onClick={()== cambiarLanguage("en")};en</button(;</div;);}javascript
Nota : El uso del gancho de traducción activará un suspenso si no está listo (por ejemplo, la carga pendiente de los archivos de traducción).
La biblioteca react-i18n tiene un componente Trans que podemos usar para interpolar elementos HTML internos, pero la mayoría de las veces, probablemente no lo necesitemos.