End-to-end i18n

Rate this content
Bookmark

Existen algunas bibliotecas excelentes que ayudan con la internacionalización en React, pero sorprendentemente hay poca orientación sobre cómo manejar la internacionalización de principio a fin. En esta masterclass discutiremos las mejores prácticas y consejos prácticos para manejar las traducciones en React. Hablaremos sobre cómo extraer cadenas de texto de su código, cómo gestionar archivos de traducción, cómo pensar en el mantenimiento a largo plazo de sus traducciones e incluso cómo evitar errores comunes en los que suelen caer los desarrolladores que solo hablan un idioma.

26 min
25 Oct, 2021

Video Summary and Transcription

Gracias por unirse a mi masterclass sobre internacionalización de principio a fin. Te guiaré en la internacionalización de una aplicación React, cubriendo cadenas de texto traducidas, formato de moneda y fecha, gestión de traductores e inyección de cadenas de texto traducidas de nuevo en la aplicación. Las constantes utilizadas en toda la aplicación definen la configuración de localización y las traducciones. Se utiliza la biblioteca React Intel para gestionar las traducciones y se crean funciones personalizadas para el formato consistente de fechas y números. El proceso de traducción implica extraer cadenas de texto, utilizando herramientas como PO Edit y compilar las cadenas de texto traducidas en archivos JSON para la aplicación React.

Available in English

1. Introducción a la Internacionalización

Short description:

Gracias por unirse a mi charla sobre internacionalización de extremo a extremo. Soy Luke Ersman, cofundador e ingeniero de software en Gazelle. Gazelle es una empresa de software como servicio que automatiza los procesos comerciales para técnicos de piano. Tenemos una interfaz web en React, una aplicación móvil en React Native y un backend en Rails. Comercializamos nuestro producto a nivel mundial y necesitábamos internacionalizarlo por completo. En esta charla, te guiaré a través de la internacionalización de una aplicación en React, cubriendo cadenas traducidas, formato de moneda y fecha, gestión de traductores e inyección de cadenas traducidas de vuelta a la aplicación. Vamos a sumergirnos en la aplicación de demostración que he creado para mostrar estos conceptos.

Gracias por unirse a mi charla sobre internacionalización de extremo a extremo. Soy Luke Ersman. Soy uno de los cofundadores e ingenieros de software en Gazelle. Gazelle es una empresa de software como servicio enfocada en automatizar los procesos comerciales para técnicos de piano. Nos encargamos de cosas como programación, facturación, envío de recordatorios automáticos, todo adaptado específicamente al servicio de pianos industria. Ahora, en cuanto al contexto técnico, tenemos una interfaz web en React y una aplicación móvil en React nativo que utiliza Expo. Nuestro backend es una aplicación en Rails que proporciona un GraphQL a estas interfaces y compartimos mucho código entre la interfaz web y la aplicación móvil, incluyendo todas nuestras cadenas traducidas. Comercializamos nuestro producto a técnicos de piano en todo el mundo y actualmente estamos presentes en más de 30 países. Al principio, uno de los problemas técnicos con los que nos encontramos fue que necesitábamos internacionalizar por completo nuestro producto para atender a este mercado global. Esto parece algo bastante común, pero me sorprendió encontrar tan poca ayuda disponible para esto. Muchas personas han hecho pequeñas partes de esto, pero no pude encontrar mucha ayuda para internacionalizar completamente la aplicación de principio a fin, incluyendo todo tipo de cosas, no solo traducir las cadenas. Lo primero en lo que la gente piensa cuando piensa en internacionalizar es, ya sabes, traducir cadenas, y esto es una parte importante, pero no es lo único que debes tener en cuenta. Así que en la charla de hoy, te guiaré a través de cómo internacionalizar una aplicación en React de principio a fin. Cubriremos todos los aspectos, incluyendo cómo codificar la aplicación para manejar cadenas traducidas, cómo localizar la moneda, el formato de número y fecha, cómo extraer esas cadenas en algo que un traductor pueda usar, cómo encontrar y gestionar traductores y, finalmente, cómo tomar esas cadenas traducidas de los traductores y volver a inyectarlas en tu aplicación.

Ahora, para demostrar esto hoy, he creado esta aplicación de demostración muy sencilla. Se trata de un sistema de gestión de lista de compras donde puedes escribir algunos artículos. Aquí, déjame escribir bacon por $4.50, y digamos que necesitamos comprar lechuga por $1.25, y vamos a comprar algunos tomates por $3. De acuerdo. Ahora, cuando estemos de compras, podemos marcar algunos de estos artículos como completados, y verás que muestra la fecha en que lo marcamos como completado. Obviamente, este es un ejemplo ficticio y no es muy útil, pero lo hice porque muestra todos los diferentes componentes de internacionalizar y localizar tu aplicación. Tenemos cadenas de texto, tenemos números, tenemos fechas, todas estas cosas. Así que en este ejemplo, aquí arriba están mis configuraciones de localización. Puedo cambiar el idioma a francés, puedo cambiar la moneda a, digamos, euros. Puedo cambiar la ubicación del símbolo de la moneda para que esté al final, algunos idiomas lo formatean de esa manera. Puedo cambiar el formato de fecha, puedo cambiar el formato de número, y verás que todas estas cosas se localizan al instante. De acuerdo, voy a cambiar esto de vuelta a inglés para poder leerlo, porque en realidad no hablo francés. De acuerdo, déjame mostrarte, echemos un vistazo detrás del telón y veamos cómo está codificado esto en realidad. Déjame cargar mi editor aquí. Uso JetBrains como mi editor de código.

2. Introducción a las Constantes

Short description:

Comencemos por ver las constantes. En esta sección, te mostraré cómo hemos definido las configuraciones de localización para las monedas, los formatos de fecha y el formato de números. También tenemos una lista de diferentes ubicaciones y traducciones. Estas constantes se utilizarán en toda la aplicación.

Lo primero que quiero mostrar son nuestras constantes. Aquí es donde hemos definido todas las configuraciones de localización que podrías utilizar. Tenemos todas las diferentes monedas y aquí tenemos información sobre cómo deben formatearse esas monedas. De esta manera, puedo seleccionar USD y sé que tiene dos decimales, utiliza el símbolo del dólar y tenemos una etiqueta aquí para ello. De manera similar, tengo una lista de formatos de fecha. Estos son solo cadenas de formato que utilizo para formatear las fechas. Tengo información de formato de número. Hay tres tipos diferentes de formato de número que admito, ya sea que utilicemos comas para separadores y punto para separadores decimales o no. Y luego aquí abajo, tengo las diferentes ubicaciones, las diferentes traducciones y sus etiquetas. Por ejemplo, para inglés, es la ubicación ENUS.

3. Explicación de los Componentes de Orden Superior

Short description:

En esta aplicación de create react app, el componente principal es un componente de la aplicación. Hay tres componentes de orden superior: contexto de elementos, contexto de localización y proveedor de Intel. El contexto de elementos gestiona el estado de la aplicación, mientras que el contexto de localización recuerda las preferencias de idioma. El proveedor de Intel, que utiliza la biblioteca React Intel, gestiona las traducciones. El proceso de configuración implica proporcionar el idioma actual y una lista de cadenas traducidas.

Estas son solo constantes que he definido y que utilizaremos en toda la aplicación. Ahora, aquí en la aplicación de create react app, el componente principal es un componente de la aplicación. Y aquí tengo eso y puedes ver que este es el contenido principal de ese componente. Aquí tengo tres componentes de orden superior que quiero explicar y todos envuelven nuestro componente de lista de compras.

El primero que tenemos aquí es el contexto de elementos. Esto es solo lo que estoy utilizando para gestionar el estado de la aplicación. Aquí es donde se encuentra la lista de elementos que están en nuestra lista de compras. En un ejemplo del mundo real, probablemente esto sería una API que utilizarías para almacenar el estado y recordarlo. Pero aquí, solo por simplicidad, estoy utilizando un contexto y lo estoy almacenando en memoria. El segundo que tengo aquí es el contexto de localización. Esto es lo que recuerda nuestras preferencias de idioma. Y cuando las cambiaba en el selector de idioma allá arriba, actualizaba este contexto, que luego lo proporcionaba a todos los componentes de la aplicación. Y luego este tercero aquí es el proveedor de Intel. En realidad, estoy utilizando la biblioteca React Intel para gestionar las traducciones. Y React Intel es una biblioteca maravillosa. La recomiendo encarecidamente. Hay otras disponibles, pero esta es la que prefiero. Y parte del proceso de configuración es proporcionar este componente de orden superior. Y le decimos cuál es nuestro idioma actual. En este caso, era ENUS. O cuando lo cambié a francés, era FRCA. Y también proporcionamos la lista de mensajes. Ahora, estas son las cadenas traducidas. Este es el resultado final del proceso de traducción que proporciono aquí. Y esas están definidas aquí arriba. Y puedes ver cómo se vería esto si voy aquí. Este es el resultado final. Tenemos un ID y tenemos una cadena traducida. Eso es un vistazo a

4. Explorando Cadenas Internacionalizadas

Short description:

En esta sección, estamos obteniendo las traducciones para la configuración regional actual y estableciéndolas en el proveedor de Intel. El componente de la lista de compras consta del encabezado, selector de idioma, entrada para agregar elementos y la lista. Utilizamos la función format message en React intl para traducir cadenas. Esta función toma una estructura con la cadena a traducir y devuelve la cadena traducida.

el final de la charla. Voy a mostrar cómo obtenemos esto. Pero por ahora, simplemente estamos obteniendo esas traducciones aquí y alimentándolas en este proveedor de Intel. Ahora, ten en cuenta que está obteniendo la para mi configuración regional actual que he establecido. Entonces, si tengo configurada la configuración regional en francés, va a obtener las traducciones en francés y establecerlas aquí.

Muy bien. Permíteme ir al componente de la lista de compras y mostrarte cómo funciona esto. Pero antes de hacer eso, permíteme volver a la web. Y quiero recordarte cómo se ve esto, qué es lo que parece. El componente de la lista de compras tiene cuatro componentes principales. El superior es el encabezado justo aquí. Luego tenemos el selector de idioma justo aquí. Luego tenemos la entrada justo aquí donde puedes agregar nuevos elementos. Y luego tenemos la lista aquí abajo. Estos son los cuatro componentes principales que conforman esta aplicación. Y luego, si volvemos al código, puedes ver estos cuatro componentes aquí. Tenemos el encabezado. Tenemos el selector de idioma. Tenemos la entrada de elementos. Y tenemos nuestra lista aquí abajo. Muy bien. Así que hablemos sobre el formato de cadenas internacionalizadas. La forma en que React intl funciona es que tienen un componente o tienen una función llamada format message que toma una estructura que tiene la cadena que deseas traducir y devuelve la cadena traducida. Ahora están utilizando ese componente de orden superior. ¿Recuerdas que te dije sobre el proveedor intl donde estamos alimentando los mensajes traducidos? Pero aquí estoy definiendo el mensaje traducido y alimentándolo en la función format message. Ahora hay otras formas de hacerlo con React intl. También proporcionan este componente format message que es una forma perfectamente válida de hacerlo. De hecho, simplemente prefiero usar esto porque devuelve una cadena simple. Facilita su uso en otros lugares que no aceptan un componente como un texto de marcador de posición o cosas así. Así que simplemente

5. Explicación de React Intel

Short description:

React Intel requiere un ID y un mensaje predeterminado para cada cadena. También acepta una descripción para proporcionar contexto a los traductores, lo cual es extremadamente útil para obtener traducciones de calidad.

para mantener la consistencia, tiendo a usar solo esta función format message. Pero debes saber que esta otra función format message también está disponible. También notarás aquí que me gusta definir mis mensajes como constantes, y almacenarlos todos en un repositorio centralizado. En este caso, es solo un archivo llamado strings.ts. Permíteme ir a ese archivo y podrás ver cómo se ve esto. Entonces, React Intel requiere un ID para cada cadena y un mensaje predeterminado para cada cadena. Ahora, si no tienes un conjunto de traducciones o si una cierta cadena no está traducida, esto es lo que se mostrará. Este también es el texto que se enviará al traductor para que lo traduzca. Además, acepta una descripción, que es información adicional que puedes proporcionar a los traductores para darles contexto. Eso es una de las cosas que realmente me gusta de React Intel, que proporciona esto. Muchas de las otras soluciones de traducción que he visto no tienen este contexto proporcionado. Ahora, he descubierto que proporcionar esta información a los traductores es extremadamente útil para obtener traducciones de calidad. Les ayuda a comprender los matices del contexto. Y hay matices en el lenguaje a veces que necesitas entender el contexto de cómo se usa algo para traducirlo correctamente. Entonces, cuando definimos nuestras cadenas, no solo escribimos la cadena que queremos traducir. En realidad, nos tomamos el tiempo para describir cómo

6. Traducción, Localización y Formateo

Short description:

En Gazelle, tenemos dos aplicaciones, una aplicación móvil y una aplicación web. Podemos compartir cadenas y traducciones entre ellas para mantener la consistencia. Las opciones de formato de fecha y número de React Intel son inconsistentes en diferentes plataformas, por lo que escribí mis propias funciones, Formatear Moneda y Formatear Fecha, para garantizar la consistencia y simplificar el proceso.

esto se utiliza en contexto para ayudar a los traductores a proporcionar una mejor traducción. Vale. Y puedes ver que tengo todas nuestras cadenas traducidas aquí, o todas nuestras cadenas definidas aquí como constantes que utilizo en toda la aplicación. Y esto también es muy útil en Gazelle porque, como mencioné en la introducción, tenemos dos aplicaciones. Tenemos la aplicación móvil y la aplicación web, y podemos compartir estas cadenas entre ellas y podemos compartir las traducciones entre ellas. Así que nos ayuda para no tener que traducir dos veces, pero también para tener consistencia en la terminología que utilizamos en ambas aplicaciones.

Vale. Ahora, tenemos esta cadena traducida. La hemos pasado a React Intel y devuelve la cadena correcta para el idioma que hemos seleccionado. Vale. Pero hay más en la internacionalización que simplemente traducir cadenas. Aquí he traducido una cadena. Pero, ya sabes, también he mencionado la configuración de localización. Así que déjame ir a este elemento de lista porque aquí tenemos algunos números y fechas formateados. Antes de hacer eso, déjame volver a la web y recordarte cómo se ve esto. Tenemos el nombre del elemento aquí. Tenemos la cantidad en moneda aquí, que es un formato numérico, también un símbolo de moneda y tenemos el formato de fecha aquí también. Vale. Vuelvo al código y esto es lo que parece. Tenemos aquí la casilla de verificación. Tenemos la nota, la descripción aquí. Estamos formateando la moneda y luego formateamos la fecha aquí abajo. Ahora, React Intel proporciona algunas opciones de formato de fecha y número, pero en realidad he terminado escribiendo las mías propias para esto. La razón de esto es que encontré que React Intel se basa en la internacionalización específica de la plataforma, la cual he encontrado que es inconsistente en diferentes plataformas. Por ejemplo, la internacionalización de Android es diferente a la de iOS, especialmente en versiones antiguas de Android, y también es diferente a algunas de las internacionalizaciones que proporcionan los navegadores web. Así que terminé escribiendo las mías propias. También encontré que la de React Intel era demasiado compleja para lo que necesitaba. Solo quería pasarle una cadena y tener mi configuración de localización establecida en un solo lugar y no tener que volver a pensar en ello. Así que escribí la mía propia llamada Formatear Moneda, que toma la cantidad del elemento, el costo del elemento y toma nuestra configuración de localización que se definió en ese contexto que te mostré. Y, ya sabes, lo estoy utilizando aquí desde el contexto de localización aquí arriba en la parte superior. Y similar

7. Formateo de Fechas y Gestión de Traducciones

Short description:

En esta sección, expliqué cómo funciona la función de formato de mensajes para formatear fechas y variables en cadenas traducidas. También te mostré el resultado final del mensaje formateado, que es una sola cadena con la fecha traducida. Ahora, pasemos a la gestión del proceso de traducción. Implica codificar todo en JavaScript, definir cadenas utilizando constantes y trabajar con el idioma predeterminado. Luego, extraemos las cadenas y utilizamos archivos PO de gettext para entregárselas a los traductores, proporcionando información contextual para mejorar las traducciones.

formatear fecha. Toma la fecha aquí y creo que estoy usando DayJS aquí y luego estoy pasando la configuración regional que tiene la cadena de formato de DayJS aquí para formatear correctamente la fecha. Ahora no voy a entrar en la implementación de estas, son bastante simples en realidad. Puedes revisar mi repositorio de código si estás interesado y siéntete libre de usarlos en tus propios proyectos. Pero solo debes saber que esto funciona de manera muy similar a la función de formato de mensajes, que toma una cantidad de elemento, toma la configuración de localización y luego devuelve una cadena formateada en el formato correcto y lo mismo con la fecha. De acuerdo. Ahora, otra cosa a tener en cuenta aquí, hay algo más especial sucediendo con este mensaje formateado. Esto es en realidad tomando una variable llamada fecha. Entonces lo que estoy haciendo aquí es formatear la fecha. La paso como una variable de fecha a este mensaje formateado completado. Y luego el mensaje formateado toma eso y devuelve una cadena con toda la cadena traducida correctamente. Permíteme ir a completado en para mostrarte cómo se ve esto. Sabes, esto es solo un mensaje de React Intel, pero tiene una variable aquí y React Intel te permite usar variables de esta manera. Ahora esto es bueno en lugar de simplemente agregar la fecha al final de la cadena por separado. Esto es bueno porque algunas traducciones pueden querer, ya sabes, la forma en que la estructura del lenguaje donde podrías poner primero la fecha y luego las palabras, um, ya sabes, diferentes idiomas, um, colocan estas en diferentes lugares o, ya sabes, dependiendo de la sintaxis del idioma. Así que a veces quieres dejar este tipo de variables en la cadena, para que los traductores puedan moverlas donde sea necesario. Les da mucha más flexibilidad. De acuerdo. Entonces, um, el resultado final de todo esto, permíteme volver a la web de nuevo y mostrarte. Entonces, el resultado final de todo esto es que tenemos esta única cadena que fue generada por el mensaje formateado. Se le pasó esta variable, que es el contexto de la fecha formateada. Muy bien. Ahora que entiendes cómo funciona la aplicación, permíteme mostrarte cómo gestionar el proceso de traducción. Entonces, a un nivel muy alto, esto es solo un proceso de cinco pasos. Um, primero codificas todo en JavaScript. Definimos nuestras cadenas utilizando constantes con los valores predeterminados que te mostré. Um, y en general, haz que tu aplicación funcione con el idioma predeterminado. Um, luego debes tomar esas cadenas y extraerlas de tu código en algo que puedas entregar a tus traductores. En nuestro caso en Gazelle, usamos archivos PO de gettext para intercambiar con nuestros traductores. Una de las razones por las que me gustan los archivos PO es que tienen la capacidad de mostrar información contextual como comentarios a nuestros traductores, para ayudarles a crear mejores traducciones. Um, eso

8. Gestión de Traducciones y Agregado de Nuevas Cadenas

Short description:

En este paso, extraemos las nuevas cadenas y las empaquetamos en un archivo PO para cada idioma. Proporcionamos un script llamado extract strings que automatiza este proceso. Luego, entregamos el archivo PO a los traductores que pueden usar herramientas como Google Translate o servicios de traducción profesionales. Una vez que las traducciones están completas, construimos el archivo PO en un objeto JavaScript que se puede importar en nuestra aplicación de React. Finalmente, inyectamos las cadenas traducidas de vuelta en nuestro código. Este proceso de cinco pasos garantiza una gestión eficiente de las traducciones.

por qué hago esto en lugar de simplemente pasar archivos JSON de un lado a otro. Y también hay muchas herramientas excelentes para ayudar a gestionar archivos PO para los traductores. Entonces, para este paso, necesitamos extraer nuestras nuevas cadenas y empaquetarlas en un archivo PO para cada idioma. Ahora he escrito un script llamado extract strings que hace esto por nosotros. Está incluido en este repositorio de GitHub. Es gratuito para usar, siéntete libre de usarlo para tus propios proyectos, pero extrae esos componentes de cadena, las constantes de cadena del código y las formatea en un archivo PO de gettext. Luego, tomo ese archivo PO y se lo entrego a el traductor para que haga su magia. Ahora hay dos formas de hacer esto. La forma más económica es usar Google Translate y hacerlo tú mismo. Eso es lo que he hecho aquí hoy como ejemplo, pero no es realmente una buena solución porque a menudo se pierden matices del lenguaje, pero es gratuito y es un buen punto de partida. En Gazelle, en realidad usamos upwork.com y contratamos traductores freelance. Les enviamos los archivos PO y generalmente toma unos días. Luego nos envían el archivo traducido de vuelta con las nuevas cadenas traducidas. El siguiente paso que hacemos es tomar ese archivo PO y construirlo en algo que podamos importar en nuestra aplicación de React. Para esto, he escrito otro script llamado build strings que toma ese archivo PO y lo convierte en un objeto JavaScript simple indexado por el ID de la cadena. Finalmente, tomamos estos archivos JavaScript simples e inyectamos las cadenas de vuelta en nuestro código. Eso es una descripción general de este proceso de cinco pasos para gestionar las traducciones. Ahora quiero mostrarte cómo funciona esto en la vida real agregando una nueva cadena que necesita ser traducida. Así que volvamos aquí a la web y lo que vamos a hacer es agregar otra cadena aquí abajo que nos diga cuántos elementos tenemos en nuestra lista de compras. Bien. Así que volvamos a nuestro código y lo primero que tenemos que hacer es definir esta nueva cadena. Así que voy a ir aquí a nuestro archivo de constantes de cadena y agregar la cadena. Ahora estoy usando Jet Brains y tengo una macro que me facilita esto. Así que déjame hacer esto y llamémosla item count. Bien. Y ahora tengo todo esto preescrito aquí, así que no tengo que escribirlo todo. Déjame copiarlo y pegarlo aquí rápidamente. Y luego la traducción o el texto real será este.

9. Pluralización y Proceso de Traducción

Short description:

React Intel permite la pluralización basada en variables. En el componente de la lista de compras, agregamos un contador de elementos debajo del campo de entrada. Muestra el número de elementos en el componente. Sin embargo, la traducción aún no está implementada. Para solucionar esto, seguimos un proceso de cinco pasos. El primer paso es codificar la aplicación utilizando el idioma predeterminado. El segundo paso implica extraer las cadenas para su traducción utilizando un script llamado extract strings.

Ahí vamos. Vamos a eliminar esa nueva línea. Bien. Ahora notarás que estoy mostrando algo nuevo aquí. Estoy mostrando pluralización. React Intel te permite pluralizar cadenas también basado en una variable. En este caso, esto se leerá de manera diferente si tenemos un elemento versus varios elementos y hay una `s` en plural. Y esto es algo que React Intel hace por nosotros. Bien. Permíteme volver al componente de la lista de compras ahora. Ahora vamos a agregar esto debajo de nuestro campo de entrada pero antes de nuestra lista. Así que déjame agregar esto aquí. Hagámoslo como un componente h2. Y se llamaba item count. En realidad, MSG item. Ahí está. Y vamos, oops, a cerrar esto. Bien. Y también teníamos una variable aquí. Así que esto era creo que se llamaba num. Y vamos a incluir, era items.length para obtener el número de elementos que tenemos en este componente. Bien, volvamos. Y ahora hemos compilado, tenemos el elemento aquí, así que dice que tenemos tres elementos en nuestra lista. Pero notarás que esto no está traducido. Así que si cambio esto a francés, simplemente usa el inglés predeterminado porque no tenemos una traducción en francés o una traducción en japonés todavía. Bien, ¿cómo lo hacemos? Lo que hicimos fue el primer paso en nuestro proceso, codificamos la aplicación utilizando el idioma predeterminado y lo hicimos funcionar. Así que ahora tenemos eso que fue el primer paso en el proceso de cinco pasos. Ahora el segundo paso es que necesitamos extraer esto en algo que nuestros traductores puedan usar. Así que permíteme ir a mi terminal. Y voy a usar ese script que escribí llamado extract strings. Ahora esto lee esos mensajes y los coloca en un archivo de plantilla PO aquí. Ahora, lo que necesitamos hacer es tomar ese archivo de plantilla PO y actualizar nuestros archivos PO con esta plantilla, lo cual agregará las

10. Gestión de Traducciones con PO Edit

Short description:

Utilizo un programa llamado PO Edit para gestionar los archivos PO de gettext. Es una herramienta gratuita y fantástica. Abro las traducciones almacenadas en la localización de origen, edito el archivo PO en PO Edit y agrego la nueva cadena. Luego, actualizo el archivo POT y lo guardo. Finalmente, tengo dos archivos PO con la cadena actualizada para enviar a mis traductores.

nuevas cadenas en él. Así que utilizo un programa llamado PO Edit. Es una herramienta gratuita y fantástica, y es excelente para gestionar los archivos PO de gettext. Así que voy a abrir eso, abrir estas traducciones. Mira, lo tenemos almacenado en la localización de origen. Vamos a abrir el francés. Veamos, tengo tanto el archivo JSON como la versión compilada de esto que volvemos a incluir en nuestra aplicación. Este es el que vamos a entregar a nuestros traductores. Así que voy a editar el archivo PO. Y este es PO Edit. Aquí arriba, tiene una lista de nuestras cadenas que necesitan ser traducidas. Y aquí abajo es donde realmente escribes la traducción. Aquí en el lado, es un poco pequeño. No estoy seguro si puedes verlo. Aquí es donde tenemos esa cadena contextual que los traductores pueden usar para proporcionar un mejor contexto para la traducción. De acuerdo. Ahora notarás que mi nueva cadena no está aquí porque la función de extracción de cadenas o el script que escribí lo coloca en un archivo POT, un archivo de plantilla. Así que en PO Edit, necesito ir a actualizar desde el archivo POT y agregar esto. Aquí está el archivo POT. Y fíjate, ahí está. Así que agregó mi nueva cadena aquí. Y ahora voy a guardar esto. Voy a cerrar esto. Y ahora puedo entregar esa traducción en francés a mi traductor. Hagamos lo mismo para la traducción en japonés. Voy a abrir eso, ir a catálogo, actualizar desde el archivo POT. Y voy a agregar mi archivo POT que creamos. Va a agregar esta nueva cadena aquí abajo que necesita ser traducida. Voy a guardar esto. Y ahora tengo estos dos archivos PO con mi cadena actualizada.

11. Traducción y Compilación

Short description:

El tercer paso implica enviar los archivos a los traductores para su traducción. El cuarto paso es construir las cadenas traducidas en archivos JSON que React puede utilizar. Finalmente, en el quinto paso, la aplicación de React se vuelve a compilar con las nuevas traducciones, lo que resulta en un contenido correctamente pluralizado en varios idiomas.

Voy a enviar esos archivos a mis traductores. Bien, eso fue el paso dos. El paso tres es enviarlos a mis traductores, y ellos traducen los archivos. Así que voy a fingir que soy el traductor aquí. Voy a abrir esto. Voy a ir a esta nueva cadena, y resulta que tengo la traducción aquí. Voy a copiar y pegar. Ahí vamos. Voy a eliminar esa nueva línea allí. Y le doy a guardar como traductor, y el traductor luego me enviaría este archivo de vuelta.

Bien, voy a hacer lo mismo para la traducción en japonés. Tengo la versión en japonés aquí. Ahí vamos. Y voy a pegarlo. Bien, tenemos la traducción en japonés, el traductor ha terminado con esto. Voy a añadir un punto al final de eso. Ahí vamos. Y el traductor me envía esto de vuelta. Así que ahora tomo esos archivos, los vuelvo a colocar en mi directorio de localización. Y eso fue el paso tres, donde hemos conseguido que los traductores traduzcan los archivos. El paso cuatro es que necesitamos construir estas cadenas en algo que React pueda utilizar. Así que voy a utilizar este otro script que escribí llamado build strings, que toma esos archivos PO y luego los convierte en archivos JSON de JavaScript. Voy a hacer eso. Y ahora hemos actualizado estos archivos de traducción. Así que si voy a mostrarles cómo se ve esto. Aquí está el archivo JSON. Y aquí es donde está indexado por ID con la traducción. Y esto es lo que luego incluimos en nuestra aplicación de react que react utilizará cuando cambiemos nuestra configuración de traducción. Bien, eso fue el quinto paso. Lo siento, eso fue el cuarto paso, construimos las cadenas y las convertimos en archivos JSON. Ahora el quinto paso es que necesitamos volver a compilar nuestra aplicación de react con estos archivos JSON. Ahora estoy utilizando create react app, que se ejecuta automáticamente en segundo plano, y se vuelve a compilar automáticamente. Así que si voy aquí, verán que ahora tengo una traducción al francés para esto. Y ahora tengo una traducción en japonés también. Y estas están correctamente pluralizadas. Dice tres artículos, o como se pronuncie eso en francés, justo aquí. Ahora hay mucho más de lo que me gustaría hablar. Pero espero que esto al menos te oriente en la dirección correcta si estás buscando internacionalizar tu aplicación. No dudes en visitar este repositorio de GitHub. Puedes tomar el código, usarlo, siéntete libre de utilizar cualquier código en tus proyectos que desees. Gracias por acompañarme hoy, y espero que disfrutes el resto de la conferencia.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2022React Advanced Conference 2022
25 min
A Guide to React Rendering Behavior
Top Content
React is a library for "rendering" UI from components, but many users find themselves confused about how React rendering actually works. What do terms like "rendering", "reconciliation", "Fibers", and "committing" actually mean? When do renders happen? How does Context affect rendering, and how do libraries like Redux cause updates? In this talk, we'll clear up the confusion and provide a solid foundation for understanding when, why, and how React renders. We'll look at: - What "rendering" actually is - How React queues renders and the standard rendering behavior - How keys and component types are used in rendering - Techniques for optimizing render performance - How context usage affects rendering behavior| - How external libraries tie into React rendering
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Building Better Websites with Remix
Top Content
Remix is a new web framework from the creators of React Router that helps you build better, faster websites through a solid understanding of web fundamentals. Remix takes care of the heavy lifting like server rendering, code splitting, prefetching, and navigation and leaves you with the fun part: building something awesome!
React Advanced Conference 2023React Advanced Conference 2023
33 min
React Compiler - Understanding Idiomatic React (React Forget)
React provides a contract to developers- uphold certain rules, and React can efficiently and correctly update the UI. In this talk we'll explore these rules in depth, understanding the reasoning behind them and how they unlock new directions such as automatic memoization. 
React Advanced Conference 2022React Advanced Conference 2022
30 min
Using useEffect Effectively
Top Content
Can useEffect affect your codebase negatively? From fetching data to fighting with imperative APIs, side effects are one of the biggest sources of frustration in web app development. And let’s be honest, putting everything in useEffect hooks doesn’t help much. In this talk, we'll demystify the useEffect hook and get a better understanding of when (and when not) to use it, as well as discover how declarative effects can make effect management more maintainable in even the most complex React apps.
React Summit 2022React Summit 2022
20 min
Routing in React 18 and Beyond
Top Content
Concurrent React and Server Components are changing the way we think about routing, rendering, and fetching in web applications. Next.js recently shared part of its vision to help developers adopt these new React features and take advantage of the benefits they unlock.In this talk, we’ll explore the past, present and future of routing in front-end applications and discuss how new features in React and Next.js can help us architect more performant and feature-rich applications.
React Advanced Conference 2021React Advanced Conference 2021
27 min
(Easier) Interactive Data Visualization in React
Top Content
If you’re building a dashboard, analytics platform, or any web app where you need to give your users insight into their data, you need beautiful, custom, interactive data visualizations in your React app. But building visualizations hand with a low-level library like D3 can be a huge headache, involving lots of wheel-reinventing. In this talk, we’ll see how data viz development can get so much easier thanks to tools like Plot, a high-level dataviz library for quick & easy charting, and Observable, a reactive dataviz prototyping environment, both from the creator of D3. Through live coding examples we’ll explore how React refs let us delegate DOM manipulation for our data visualizations, and how Observable’s embedding functionality lets us easily repurpose community-built visualizations for our own data & use cases. By the end of this talk we’ll know how to get a beautiful, customized, interactive data visualization into our apps with a fraction of the time & effort!

Workshops on related topic

React Summit 2023React Summit 2023
170 min
React Performance Debugging Masterclass
Featured WorkshopFree
Ivan’s first attempts at performance debugging were chaotic. He would see a slow interaction, try a random optimization, see that it didn't help, and keep trying other optimizations until he found the right one (or gave up).
Back then, Ivan didn’t know how to use performance devtools well. He would do a recording in Chrome DevTools or React Profiler, poke around it, try clicking random things, and then close it in frustration a few minutes later. Now, Ivan knows exactly where and what to look for. And in this workshop, Ivan will teach you that too.
Here’s how this is going to work. We’ll take a slow app → debug it (using tools like Chrome DevTools, React Profiler, and why-did-you-render) → pinpoint the bottleneck → and then repeat, several times more. We won’t talk about the solutions (in 90% of the cases, it’s just the ol’ regular useMemo() or memo()). But we’ll talk about everything that comes before – and learn how to analyze any React performance problem, step by step.
(Note: This workshop is best suited for engineers who are already familiar with how useMemo() and memo() work – but want to get better at using the performance tools around React. Also, we’ll be covering interaction performance, not load speed, so you won’t hear a word about Lighthouse 🤐)
React Advanced Conference 2021React Advanced Conference 2021
132 min
Concurrent Rendering Adventures in React 18
Top Content
Featured WorkshopFree
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?

There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.

Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
React Summit Remote Edition 2021React Summit Remote Edition 2021
177 min
React Hooks Tips Only the Pros Know
Top Content
Featured Workshop
The addition of the hooks API to React was quite a major change. Before hooks most components had to be class based. Now, with hooks, these are often much simpler functional components. Hooks can be really simple to use. Almost deceptively simple. Because there are still plenty of ways you can mess up with hooks. And it often turns out there are many ways where you can improve your components a better understanding of how each React hook can be used.You will learn all about the pros and cons of the various hooks. You will learn when to use useState() versus useReducer(). We will look at using useContext() efficiently. You will see when to use useLayoutEffect() and when useEffect() is better.
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript, and TDD
Top Content
Featured WorkshopFree
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
React Advanced Conference 2021React Advanced Conference 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured WorkshopFree
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
React Summit 2023React Summit 2023
151 min
Designing Effective Tests With React Testing Library
Featured Workshop
React Testing Library is a great framework for React component tests because there are a lot of questions it answers for you, so you don’t need to worry about those questions. But that doesn’t mean testing is easy. There are still a lot of questions you have to figure out for yourself: How many component tests should you write vs end-to-end tests or lower-level unit tests? How can you test a certain line of code that is tricky to test? And what in the world are you supposed to do about that persistent act() warning?
In this three-hour workshop we’ll introduce React Testing Library along with a mental model for how to think about designing your component tests. This mental model will help you see how to test each bit of logic, whether or not to mock dependencies, and will help improve the design of your components. You’ll walk away with the tools, techniques, and principles you need to implement low-cost, high-value component tests.
Table of contents- The different kinds of React application tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting DOM elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RTL tests and how to handle them
Prerequisites- Familiarity with building applications with React- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Testing Library- Machine setup: Node LTS, Yarn