DEV Community: Angel Rodríguez

Deploy con React en Netlify

Angel Rodríguez — Tue, 17 Aug 2021 23:51:29 +0000

Introducción.

Al terminar de desarrollar tu aplicación con React, a menudo nos preguntamos como subir nuestra aplicación a algún servidor para poderla visualizar en Internet y compartirla.

El día de hoy te explicaré una de las maneras para poder realizarlo, en Netlify.

¿Qué es Netlify?.

Netlify es un sistema de gestión de contenido de código abierto para un flujo de trabajo con Git, es una plataforma para un alojamiento gratuito.

Algo muy interesante, es que Netlify viene con CI/CD integrado y otras herramientas útiles para que nuestra aplicación sea fácil de implementar. Solo necesitamos enviar nuestro código a un repositorio en la nube como GitHub o GitLab y Netlify hace el resto para que nuestra aplicación esté en línea.

CI/CD: Son las prácticas combinadas de integración continua (CI) y entrega continua o implementación continua (CD).

Requisitos:

Una cuenta de Github
Cuenta en Netlify Netlify
Instalar Git
Instalar NodeJS

Configuración en tu proyecto React

Cuando nosotros usamos React, normalmente creamos nuestra aplicación usando el siguiente comando en la terminal:

npx create-react-app example-app

Para iniciar nuestra aplicación usamos el comando yarn start.

Hay dos formas de ver nuestro proyecto compilado:

1.- Cuando usamos el comando anterior (yarn start), automáticamente nos abre en nuestro navegador predeterminado el proyecto.

2.- Abrimos directamente desde el navegador la siguiente URL: http://localhost:3000

En ambas formas veremos lo siguiente:

Configuración - GitHub

Github lo vamos a utilizar para alojar nuestro proyecto y poder activar Netlify, de esta forma lo haremos en línea cada vez que introduzcamos nuevas funciones (cambios) en nuestro repositorio.

Primero, creamos nuestro repositorio, no importa si es público o privado. Después de esto, copiamos la URL del repositorio.

Nota:

La URL del repositorio tiene dos tipos. **HTTPS y SSH**. HTTP requiere que inserte el nombre de usuario y la contraseña de GitHub cada vez que haga cambios. Y SSH requiere que se configure SSH-Key entre nuestra computadora y GitHub.

Ahora tenemos que compilar nuestro proyecto con el comando yarn build en la terminal, este comando ejecutará la construcción de nuestro proyecto y creará una carpeta con el nombre "build" en raíz de todo el proyecto. "Es muy importante realizar este paso porque en Netlify configuraremos el comando de construcción."

Configuración - Netlify

A continuación, iniciamos sesión con nuestra cuenta de Netlify.

Clic en crear nuevo sitio:

Y clic en GitHub:

Al realizar estos primeros pasos, vamos a elegir nuestro repositorio que creamos anteriormente.

Ahora, damos clic en "Configure Netlify on Github", donde nos saldrá una pantalla de GitHub para darle acceso a Netlify y poder buscar nuestro repositorio. (Esta pantalla nos saldrá por única vez cuando conectemos un nuevo repositorio con Netlify).

Hay que asegurarnos de proporcionar el valor correcto en cada campo.

Branch to deploy: La rama (en GitHub) que Netlify extraerá, compilará y publicará nuestra aplicación. Por lo general, es nuestra rama de producción.

Build command: Es un comando que Netlify ejecutará para construir nuestra aplicación.

Una vez completando los campos de configuración, daremos clic en el botón "Deploy site" para comenzar a compilar y publicar nuestra aplicación.

Se vera algo similar cuando finalice el Deploy:

Por defecto, Netlify le dará a nuestra aplicación un subdominio único, pero podemos cambiarlo en el botón "Domain settings."

Clic en "Options" y seleccionamos "Edit site name".

Una vez que cambiamos nuestro sitio y guardemos nuestra aplicación, la visitaremos. En este caso, el nombre de mi aplicación es:

https://pokedex-angeel.netlify.app/

Como vemos, hemos terminado de subir nuestra aplicación en Netlify, una de sus ventajas, es que en automático reconoce los cambios de tu repositorio y realiza el deploy para tener actualizada la versión.

Conclusión:

Con estos pasos que acabamos de ver, podemos darnos cuenta que Netlify es una plataforma con procesos sencillos, interfaces amigables, y lo mejor es que es gratuito, te aconsejo tener muy claro tus comandos de construcción (npm build), tu directorio publico y el nombre de tu repositorio para no tener problemas en el deploy.

Nos vemos!

Sígueme:

Twitter.

Destructuring en Javascript

Angel Rodríguez — Tue, 10 Aug 2021 15:22:21 +0000

Definición.

Destructuring, o destructuración, es una nueva característica de ES6 para Javascript que nos da la posibilidad de poder tomar los datos de objetos o arrays directamente y de manera múltiple, para extraerlos a variables o constantes. Lo cuál la desestructuración nos permite escribir código limpio y legible.

¿Dónde se puede aplicar?

El destructuring se puede aplicar en diferentes sitios, suelen ser:

Retornos de funciones
Parámetros en las funciones
Funciones de trabajo con arrays
Destructuring múltiple
Importación de objetos
Destructuring en React

"Desestructurar" no significa "destructivo".

Se llama "asignación de desestructuración" porque se "desestructura" copiando elementos en variables. Pero la matriz en sí no se modifica.

Es solo una forma más corta y limpia de escribir y/o entender el código.

Sintaxis

La sintaxis del destructuring es muy sencilla. Por un lado tenemos el objeto que queremos destructurar. Para extraer sus propiedades usamos las "llaves" { }, metiendo dentro de ellas sus respectivos nombres y con esto tenemos nuevas variables que contienen estas propiedades:

Si queremos poner nombres específicos para estas nuevas variables bastará con poner "dos puntos" :, seguido del nuevo nombre de variable que queramos asignar en las propiedades destructuradas:

Desestructuración de objetos (Object destructuring)

La asignación de destructuring también funciona con objetos, como lo vimos en las anteriores imágenes.

En la siguiente imagen observamos las propiedades options.title, options.width y options.height que se asignan a las variables correspondientes.

Por ejemplo:

El orden no importa. Esto también funciona:

Si tenemos un objeto complejo con muchas propiedades, podemos extraer solo lo que necesitamos:

El patrón de descanso "..."

¿Qué pasa si el objeto tiene más propiedades de las variables que tenemos? ¿Podemos tomar un poco y luego asignar el "resto" a alguna parte?

Podemos usar el patrón de descanso, (también se puede realizar en matrices). No es compatible con algunos navegadores más antiguos (IE, use Babel para rellenarlo), pero funciona en los modernos.

Un ejemplo:

Desestructuración de arreglos (Arrays destructuring)

Acceder a los elementos de la matriz manualmente

En la siguiente imagen se muestra un ejemplo para acceder manualmente a los elementos de la matriz:

La mayoría de las veces, el tamaño de una matriz es grande y usamos un bucle para recorrer cada elemento de las matrices. A veces, es posible que tengamos arreglos cortos. Si el tamaño de la matriz es muy corto, está bien acceder a los elementos manualmente como se muestra arriba, pero a continuación veremos una mejor manera de acceder al elemento de la matriz que se está desestructurando.

Acceder a elementos de la matriz mediante desestructuración

En la siguiente imagen se muestra un ejemplo para acceder mediante destructuring a los elementos de la matriz:

Durante el destructuring, cada variable debe coincidir con el índice del elemento deseado en la matriz. Por ejemplo, la variable mex coincide con el índice 0 y la variable col coincide con el índice 2. ¿Cuál sería el valor de arg si tiene una variable arg después de col?

Si intento la tarea anterior, confirmó que el valor no está definido. En realidad, podemos pasar un valor predeterminado a la variable, y si el valor de ese índice específico no está definido, se utilizará el valor predeterminado.

Desestructuración anidada (Nested destructuring)

Si un objeto o una matriz contiene otros objetos y matrices anidados, podemos usar patrones del lado izquierdo más complejos para extraer porciones más profundas.

Saltarse un objeto durante la desestructuración

Durante el destructuring, si no estamos interesados en todos los elementos, podemos omitir un elemento determinado poniendo una coma en ese índice. Saquemos solo México, Colombia y Brasil de la matriz. A continuación en la siguiente imagen se puede observar con más claridad:

Obtener el resto de la matriz usando el operador de propagación usamos tres puntos (...) para extender u obtener el resto de una matriz durante el destructuring.

Desestructuración en React (React Destructuring)

Destructuring es una técnica usada mucho en los componentes React ya que les da mucha más legibilidad. Las props suelen ser un blanco fácil para poder realizar el destructuring siempre que se use más de una.

Si comparamos las siguiente imágenes con o sin destructuring podemos ver la diferencia y legibilidad entre ellos.

Sin destructuring:

Con destructuring:

Conclusión

Destructuring es una nueva característica muy potente del lenguaje que nos permite escribir código más legible, aunque por mi experiencia, como todo no hay que abusar de ella. En este artículo hablamos de pequeños ejemplos, pero seguramente si lo que vas a destructurar solamente tiene una propiedad, la mejor opción es no hacerlo, debido a que el Destructuring agarra mucha fuerza sobre todo cuando se usan varias propiedades de un mismo objeto que se pueden destructurar, ya que al hacer el desglose de las propiedades todo suele quedar más limpio y claro. Te lo recomiendo, al leer un código con destructuring lo vas agradecer.

Sígueme:

Twitter.