Commit dbbd3244 by Sebastián Tobar

updated readme with links

parent c7225e9c
......@@ -8,12 +8,16 @@ La traducción de cualquier tipo de frontend implica que, en vez de usarse strin
Para esta implementación me basé en [una respuesta específica de stackoverflow](http://stackoverflow.com/a/33422278), e implementé en base a ella un sistema de provisión de strings para componentes de React.
En [nuestro repositorio de Gitlab](http://gitlab.nursoft.cl/canarius/blog-react-i18n) pueden encontrar el código usado. Este código es prácticamente el mismo que está en producción actualmente, en la aplicación traducida.
Parámetro idioma
-
Para configurar el idioma de forma global se usa el contexto de React, guardándolo también en localStorage para hacerlo persistente; sin embargo, como los cambios en el contexto no actualizan todos los componentes, hace falta recargar la aplicación completa, configurando el contexto al inicializar la aplicación.
La primera vez que se fija el idioma, este se obtiene del parámetro `navigator.language`, y se revisa si existe en los idiomas disponibles. Si no existe, se deja un lenguaje por defecto.
De ser posible, es muy recomendable usar una store como Redux para guardar el parámetro idioma, con lo cual al cambiar el idioma todos los componentes se traducen automáticamente, sin necesidad de recargar.
En el repositorio, esto se hace en el archivo [LanguageHelper.js](http://gitlab.nursoft.cl/canarius/blog-react-i18n/blob/master/LanguageHelper.js).
Diccionario de strings dinámicos
-
Tras fijar el parámetro idioma, se pueden generar los strings dinámicos. Para este caso, estos están centralizados en un archivo JSON: estos definen un objeto con la siguiente estructura:
......@@ -35,6 +39,8 @@ Tras fijar el parámetro idioma, se pueden generar los strings dinámicos. Para
En la estructura va un parámetro `code`, que identifica al idioma; un parámetro `Languages`, que nombra el resto de los idiomas; y un objeto por cada componente que quiera traducirse, compuesto de claves y valores que después son accedidas directamente por el componente a traducir.
Una posibilidad era hacer un diccionario completo de strings que podría usar cualquiera de los componentes que requieran traducción; sin embargo se descartó esa opción por considerar esta más ordenada. Cada grupo de componentes tiene su propio subdiccionario, los cuales no interactúan entre sí, pudiendo dejar cada frase con su propio contexto.
Puse dos diccionarios de ejemplo en la carpeta [i18n](http://gitlab.nursoft.cl/canarius/blog-react-i18n/tree/master/i18n).
Provisión de diccionarios a componentes
-
Luego de hacer un diccionario para cada idioma, es necesaria alguna manera de pasarle este diccionario a cada componente que lo requiera. Esto se logra en React con componentes de alto orden (o _higher order component_ en inglés), los cuales son componentes que devuelven otro componente, con alguna modificación.
......@@ -43,12 +49,14 @@ En este caso, se usan componentes de alto orden para inyectar a un componente el
Este componente realiza los siguientes pasos:
* carga los diccionarios de todos los idiomas disponibles
* obtiene el idioma seleccionado mediante el contexto, y lo ocupa para cargar el diccionario adecuado
* obtiene el idioma seleccionado mediante el contexto (o mediante Redux), y lo ocupa para cargar el diccionario adecuado
* recibe la clave del subdiccionario deseado, como `FirstComponent` o `SecondComponent`
* obtiene el subdiccionario y lo inyecta al componente con el nombre "strings"
Agregando las validaciones correspondientes a la obtención del diccionario de idioma y al subdiccionario de componente, resulta una implementación robusta que no deshabilita el programa completo, si es que se le pide un idioma que no existe o un componente mal escrito.
Este componente se encuentra en los archivos translate.jsx: [uno usando contexto](http://gitlab.nursoft.cl/canarius/blog-react-i18n/blob/master/translate-context.jsx), [otro usando Redux](http://gitlab.nursoft.cl/canarius/blog-react-i18n/blob/master/translate-redux.jsx).
Usando el diccionario
-
Una vez que ya se le pasa el subdiccionario al componente, basta con que este acceda a el, mediante sus props. Esto implica reemplazar cada instancia de un string por su equivalente `this.props.strings.string`, lo cual es la parte más larga de toda la operación.
......@@ -57,6 +65,8 @@ Desde entonces, recomiendo encarecidamente que, si usted está planeando una apl
Hacer que un componente dependa de un prop `strings` tiene el potencial de aumentar mucho el acoplamiento; se recomienda usar el parámetro `defaultProps` para configurar un componente de forma inicial. Así, un componente puede reutilizarse fácilmente en otros proyectos.
[Acá hay un ejemplo](http://gitlab.nursoft.cl/canarius/blog-react-i18n/blob/master/Example1.jsx) del componente `translate` en acción.
Conclusión
-
He intentado describir a grandes rasgos los pasos tomados para implementar una traducción de una aplicación en React.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment