Renderizando Elementos Multimedia con React JS 16

4 minuto(s)

Demo Github

Cuando estas creando un proyecto con React JS es habitual el uso de elementos o archivos multimedia, por ello queremos compartirte una forma de renderizarlos, existen muchas maneras de hacerlo, cada forma cambia según lo que necesites hacer. Si no sabes que es React JS te recomendamos leer nuestro artículo Que es React JS, Historia y otros detalles para que estés familiarizado con este tutorial.

La forma más sencilla de crear los elementos es simplemente creando la etiqueta del elemento que puede ser una <img>, <iframe>, <video> o <audio> , Pero vamos a usar una variable const para almacenar los datos que va cargar cada elemento multimedia, así mantenemos un orden y limpieza en nuestro código.

Los elementos que vamos a renderizar son un Mapa de Google, Imagen, Audio, Video MP4 y un Video de Youtube, vamos con ello.

Mapa de Google

Creamos un componente llamado GoogleMap.js y agregamos lo siguiente, en el código colocamos unos comentarios que explican para que sirve cierta parte del componente


React JS nos pide agregar la etiqueta title para que pueda cargar el elemento iframe para el mapa. Así mismo no olvides agregar tu API Key de Google Maps.

Imagen

Quizás sea un elemento muy usado en la mayoría de proyectos, pero nunca esta de más recordar como se renderiza en Reac JS, creamos un componente llamado Imagen.js y agregamos lo siguiente, en el código colocamos unos comentarios que explican que hace cada parte del componente


React JS nos pide agregar el atributo alt como requisito para renderizar la imagen.

Audio

Este elemento es muy utilizado en los proyectos de música, creamos un componente llamado Audio.js y agregamos lo siguiente, igualmente en el código colocamos unos comentarios para explicar que hace cada parte del componente


No olvides que debemos de especificar el tipo de formato que tiene el archivo de audio que deseas reproducir, esto le dirá al navegador que tipo de archivo es para poder reproducirlo sin problemas.

Video

Existen muchas páginas que usan videos en su plataforma, pero también las que no, de igual forma es importante que sepas como renderizar este importante formato multimedia, crea un componente llamado Video.js y agrega lo siguiente, agregamos comentarios para explicar que hacen ciertas partes del componente.


Recuerda especificar el formato del video, esto le dará una idea al navegador, sobre que debe de reproducir.

Youtube

En la actualidad hasta la fecha de este Tutorial, los videos de Youtube siguen siendo quizás uno de los elementos más usados en las páginas Web, bien para este elemento crea un componente llamado Youtube.js y agrega lo siguiente, también colocamos comentarios para explicar que hace cada parte del componente


Si deseas ver el resultado final de los elementos, puedes ver la Demo que esta al inicio de este tutorial.

Notas

  • La forma de renderizar los elementos pueden cambiar en futuras  versiones de React JS, esto no depende de nosotros si no de los desarrolladores que dan soporte a React JS.
  • La versión exacta que usamos para este tutorial es React JS 16.8.5

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.