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:

cmd, comando para crear el proyecto

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.

Carpetas y archivos

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).

Imports dentro del componente

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.

state y method

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:

Valores de la variable navigator

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”.

constante para comprobar el idioma

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í:

Método para comprobar el idioma

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.

Ejecutar el metodo

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.

Render del contenido html

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.

Componente cargado en el indexjs

Con esto ya tendríamos nuestra aplicación lista, solo nos faltaría ejecutarla, para lo cual usaremos el comando “yarn start”.

Ejecutar proyecto

Como veréis, si cambio la configuración del browser carga cosas distintas:

Español:

Página web en español

Inglés:

Página en ingles

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

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.