React

React con Leaflet y acceso a API Aemet y API OpenDataSoft

En este blog vamos a ver cómo implementar un mapa con la librería Leaflet, accediendo a la Api opendatasoft para poder localizar mediante coordenadas las diferentes provincias y municipios de España. Además, accederemos a la Api de Aemet para acceder al tiempo de cada zona interesada. La tecnología que se va a utilizar es React. Instalación de dependencias Leaflet Para comenzar vamos a crear un proyecto nuevo con el comando npx create-react-app mapaleaflet. Una vez tengamos el proyecto inyectaremos las dependencias de las librerías que vamos a utilizar: npm install -s react react-dom…continue reading →

Implementación de REDUX en React

Configuración y aplicación del patrón Redux en una aplicación de React. Para que puedas hacerte una idea del funcionamiento de Redux te dejo el siguiente esquema que explica como trabaja redux. La documentación oficial de Redux se encuentra en el siguiente enlace:  https://es.redux.js.org/ Y la instalación de este se realiza mediante el comando npm i redux. Comenzaremos yendo al siguiente enlace https://react-redux.js.org/. En el cuál nos encontraremos con lo siguiente: Pulsaremos en el botón Get Started el cuál nos llevara a la página donde nos explicará las instalaciones que tendremos que realizar para…continue reading →

Componentes libres en React para imágenes y vídeo

React player A menudo queremos agregar vídeos a una de nuestras aplicaciones, se puede dar un montón de situaciones: que queramos poner ese vídeo en autoplay,  cambiar el volumen del vídeo original, poner los controles originales de la plataforma de vídeo o unos custom. Podemos no siempre estar conformes con las settings de ese servicio o disparar algún evento cuando se reproduzca o se pause un vídeo por ejemplo, aunque en estos  dos últimos temas no voy a profundizar. Para solucionar todos estos problemas os voy a presentar esta fantástico componente de uso…continue reading →

Ciclo de vida de los Componentes en React

¿Estás tenido problemas para entender el ciclo de vida de React? No te preocupes, en este post te lo voy a resumir para que lo aprendas fácilmente. Primero, avisarte de que en la última versión de React han comentado que van a dejar soporte a determinados métodos que se estan quedando antiguos, pero no te preocupes porque esos no los vamos a ver, y con esto comentado, empezemos ¿Qué son los métodos de ciclos de vida? Son la serie de eventos que sucede desde que se crea el componente hasta su destrucciónPara que…continue reading →

Google Maps en React, utilizando API Google

Google Maps En la actualidad el 85% de la población conoce Google Maps, ya que es una herramienta de gran utilidad que nos ayuda en nuestro día a día a la hora de localizar un sitio, poder ver la ruta más cercana por la que podemos ir, incluso podemos ver los medios de transporte que podemos utilizar desde el punto de partida al de destino, destacar también la implementación de la vista Street View en la cual podemos ver en detalle el lugar que buscamos como si estuviéramos ahí. Requisitos previos Debemos tener…continue reading →

React-Select(SELECCION MULTIPLE)

https://flic.kr/p/2iHHbBg Es un control de entrada selectivo flexible para ReactJS con soporte de selección múltiple, autocompletado, asíncrono y creatable. Esta creado por Jed Watson React Select está financiado por Thinkmill y Atlassian. Característica Enfoque flexible de los datos, con funciones personalizables.API de estilo extensible con emociónAPI de inyección de componentes para un control completo sobre el comportamiento de la interfaz del usuarioAccesorios de estado controlables y arquitectura modularFunciones solicitadas durante mucho tiempo como grupos de opciones, soporte de portal, animación y más Props comunes autoFocus - enfoca el control cuando se montaclassName - aplicar un className al…continue reading →