React – Modal popup con React portals

¿Qué son los React Portals? Portals es una Api de React que nos permite renderizar cualquier componente o código html fuera de nuestro árbol de componentes Dom (por defecto <div id=”root”>  dentro de index.html). Para hacernos una idea, un portal sería como un agujero de gusano donde en un nodo tendríamos un <div id="otroDiv"> aislado en index.html y en otro nodo tendríamos un trozo de código html o un componente declarado en otro <div id="root"> . Este componente usaría métodos en el componente donde lo declaramos, pero a la hora de ser pintado,…continue reading →

MaterialUI en Angular (for dummies)

Buenas a todxs! Hoy vamos a ver una pequeña parte de nuestro mundo como desarrolladores. Veremos básicamente lo que es Angular Material: una libreria de componentes UI con una guía de estilos ya creadas por Google, y que están casi destinadas a la responsividad y en general a Android y sus aplicaciones. En resumidas cuentas, Angular Material es un conjunto de estilos con una lógica por detrás para poder hacerles referencia. Lo que vamos a necesitar será: -Un proyecto de angular ya creado o nuevo -Angular CLI 10.2 -Consola de comandos (Yo he…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 →

React Google Maps

¿Cómo utilizar Google Maps en React? Como ya es sabido por todos Google Maps es un servidor de aplicaciones de mapas en la web con infinitas posibilidades de uso, En este tutorial vamos a mostraros la manera más sencilla de tener un componente React capaz de mostrar un mapa de Google Maps con las cordenadas deseadas, muy útil para empresas y desarrolladores que deseen agregarlo sus proyectos. Tutorial. Lo primero que debemos hacer es instalar Node.js https://nodejs.org y comprobar su versión con el comando “ node -v “ una vez hecho esto comprobamos…continue reading →

Introducción a Material en Angular

Hola, bienvenidos a este nuevo post donde veremos una breve introducción a Material en Angular. ¿Qué es Material? Es un kit de componentes que nos permite incorporar elementos tales como botones, tablas, paginadores con un diseño, animaciones creados ya predeterminados. A continuación se empezará la explicación desde cero, necesitamos Visual Studio Code y la consola de Windows para poder trabajar. Empecemos! Para crear el proyecto debemos abrir la terminal de Windows e ir hacia la ruta que deseemos para guardar nuestro proyecto, nosotros lo haremos en una carpeta en el escritorio llamada Angular.…continue reading →

Lectura Servicios API en Angular

En esta ocasión lo que haremos es mostrar el paso a paso detalladamente para leer un servicio API que hemos creado en Azure, se trata de consultas de selección de todos los alumnos, por curso y por detalles de alumno.La URL que usaremos será: https://apialumnos.azurewebsites.net/ la cual contendrá todos las consultas de lectura del servicio. Las peticiones serán: Alumnos: URL + api/Alumnos Alumnos por Curso: URL + api/Alumnos/detallesAlumno/{codigo} Detalles Alumno: URL + api/Alumnos/getalumnosGrado/{grado} Bien, lo primero que haremos es ir a la ruta de la dirección donde queremos guardar nuestro proyecto, utilizaremos una…continue reading →