Desarrollo

Area de coordinación enfocada a Desarrollo

Tu primer REACT en 10 minutos

INDICE Requisitos.Que es y para que sirve React.Instalación de React.Estructura de proyecto.Que es y como funciona un Componente.Creacion de un Componente simple. 1º)Requisitos -Tener un editor de código: Visual Studio Code o similar. -OPCIONAL: gestor de paquetes yarn https://classic.yarnpkg.com/en/docs/install/#windows-stable Si no lo tenéis os dejo el link de descarga https://code.visualstudio.com 2º)¿Qué es y para que sirve React? Es una Librería desarrollada por Facebook. https://reactjs.org/ Lo podemos implementar en un proyecto clásico, es decir, en una web que tengamos completamente hecha con Java, con PHP y un framework como Laravel para tener ciertas funcionalidades…continue reading →

Usando e implementando Pipes (Angular)

Las pipes son clases que se encargan de formatear los datos para poder mostrar la información a los usuarios de una manera determinada. Este formateo sucede antes de que los datos sean recibidos por, por ejemplo, un componente. Angular tiene pipes auto implementadas; sin embargo; también permite crear pipes personalizadas. Empezaremos por ver cómo crear una pipe personalizada junto a cómo implementarla en distintas áreas de nuestra aplicación. Para empezar, vamos a pintar una tabla que mostrará los platos del menú de un restaurante. Esta tabla hará uso de una lista desplegable (select)…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 →

Pop ups con Dialog de Material UI en React

¿Qué es Material UI? Material UI es un framework de react que nos ayuda a construir nuestra página de forma rápida y sencilla. En este post explicaremos como instalarlo y como utilizar la herramienta Dialog ¿Cómo utilizar Material UI? Lo primero que debemos hacer para trabajar con Material UI es instalarlo por linea de comando con CMD, CMDER o el propio terminar de visual studio code. Podemos utilizar o bien si usamos npm npm install @material-ui/core o si queremos utilizar yarn yarn add @material-ui/core ¿Qué es Dialog? La herramienta Dialog de Material UI…continue reading →

Consumir API en un componente React utilizando Ajax JQuery

Queremos consumir un servicio API en un componente React, para ello, voy a utilizar Ajax con JQuery para poder hacer las operaciones CRUD y, por tanto, consumir el servicio. Debéis tener instalado el programa node.js para que el terminal nos pueda reconocer los comandos que vamos a utilizar en los siguientes apartados. https://nodejs.org/es/ Lo primero que vamos a necesitar para poder hacerlo es crearnos un proyecto React. Lo haremos utilizando el siguiente comando: https://flic.kr/p/2k6aN2J En este caso yo he llamado a mi proyecto crudjquery. He utilizado el programa Cmder que es un terminal…continue reading →

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 →