Para configurar internationalization en una aplicación REACT, ursaremos la librería react-intl
1. Ejecutamos el siguiente comando en nuestra aplicación react para instalar la librería:
npm install react-intl
2. Creamos los archivos json donde estarán los labels por cada idioma. Yo los creo en la siguiente ruta:
src\i18n\locales\en.json
src\i18n\locales\es.json
3. Modificamos el archivo index.tsx (si estas usando typescript o index.js si estás usando javascript)
En este archivo haremos algunos imports, wrapearemos nuestra app (IntlProvider), y mandaremos como parámetros el idioma y de acuerdo a eso el archivo json que deberá leer. Sin tantas vueltas, debería quedar así:
4. Agregamos una función util que nos servirá para el tema de standard json notation. La función es flattenMessages:
5. Utilizamos los labels traducidos:
Hacemos un impor en el componente que vayamos a utilizarlo:
<FormattedMessage id="sign.in.forgot.password" />
Como ID nos basaremos en el JSON file que hemos estructurado previamente. También tiene otros parámetros, pero para mi caso me fue suficiente utilizar *id*