Detectar el idioma del navegador con react.
En este post voy a explicar cómo realizar una aplicación web capaz de detectar parámetros del navegador web en el que se lanza, más concretamente la configuración de idioma para presentar el contenido en el idioma que se detecte. Usare el framework React para ello.
El primer paso será crear un nuevo proyecto con react, para ello ejecutaremos el comando:
Una vez este creado el proyecto, crearemos la carpeta “components” dentro de src, donde crearemos cualquier componente que queramos usar. Por organización, también crearemos carpetas dentro de components para diferenciar cada componente.
Una vez tengamos el componente hecho, realizaremos estos imports y exportaremos el componente para poder usarlo en la app (las imagines deben ser importadas dentro del componente para poder renderizarlas).
Ya tenemos el componente preparado para empezar a programar.
Lo siguiente será hacer una variable de state, será lo que usaremos más tarde para renderizar el idioma que hemos detectado, además de obtener el path de los recursos (por ejemplo videos) que queramos usar, en este ejemplo no se usaran dichos recursos, solo imágenes. También crearemos un método con la sintaxis de lambda, de momento vacío, pero será donde realizaremos el chequeo del idioma.
Ahora, realizaremos el chequeo del idioma. Para ello crearemos una constante dentro del método, en mi caso la he llamado “browserLanguage”. Esta constante la igualaremos a la variable “navigator” que es nativa de react. Navigator nos devuelve muchos valores relacionados con el navegador que estemos usando:
Pero en este caso solo nos interesa “language”. Gracias a este parámetro podremos detectar el idioma del navegador También usaremos la expresión OR ( || ) puesto que algunos navegadores llamaran a este valor “userLanguage”.
Una vez hemos recuperado el idioma, usaremos un if else (o un switch, es cuestión de preferencia) para ir igualando la variable state a los valores acordes al idioma que hemos recuperado. Nuestro método quedaría así:
Ya hemos recuperado el idioma del navegador y seteado la variable state, que luego usaremos a la hora de la renderización. Ahora solo faltaría ejecutar el método, y realizar los render para los html.
Dentro de los render realizaremos una estructura de if else, para comprobar en qué idioma debe cargar el contenido html. Dentro de cada if, introducimos el contenido necesario de cada idioma.
Las imágenes debemos importarlas dentro del componente, sino react no será capaz de usarlas correctamente.
Por último cargaremos el componente dentro de index.js.
Con esto ya tendríamos nuestra aplicación lista, solo nos faltaría ejecutarla, para lo cual usaremos el comando “yarn start”.
Como veréis, si cambio la configuración del browser carga cosas distintas:
Español:
Inglés:
Autor/a: José Antonio Lozano Torres
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2021-2022
Github: https://github.com/escalona322/proyectopost
Linkedin: https://www.linkedin.com/in/jose-antonio-lozano-torres