Hay cuatro maneras de establecer una propiedad de estilo backgroundImage utilizando el CSS en línea de React.

Este tutorial le mostrará los cuatro métodos, con ejemplos de código para cada uno.

Cómo establecer una imagen de fondo en React usando una URL externa

Si tu imagen se encuentra en algún lugar en línea, puedes establecer la imagen de fondo de su elemento colocando la URL así:

function App() {
  return (
    <div style={{ 
      backgroundImage: `url("https://via.placeholder.com/500")` 
    }}>
      Hello World
    </div>
  );
}

El código anterior mostrará un único elemento <div> con el estilo background-image: url(https://via.placeholder.com/500) aplicado en él.

Cómo establecer una imagen de fondo en React desde tu carpeta /src

Si arrancas tu aplicación usando Create React App y tienes tu imagen dentro de la carpeta src/, puedes importar la imagen primero y luego colocarla como fondo de su elemento:

import React from "react";
import background from "./img/placeholder.png";

function App() {
  return (
    <div style={{ backgroundImage: `url(${background})` }}>
      Hello World
    </div>
  );
}

export default App;

Cuando se ejecuta el comando npm start, React mostrará un error "Failed to Compile" y detendrá la compilación cuando no se encuentre la imagen:

De esta manera, no mostrarás ningún enlace de imagen roto en tu aplicación web. En el código anterior, el valor de backgroundImage se establece mediante una cadena de plantilla, que permite incrustar expresiones de JavaScript.

Cómo establecer una imagen de fondo en React usando el método de la URL relativa

La carpeta public/en Create React App se puede utilizar para añadir activos estáticos en su aplicación React. Cualquier archivo que pongas dentro de la carpeta será accesible en línea.

Si pones un archivo image.png dentro de la carpeta public/, puedes acceder a él en <tu dirección de host>/image.png. Cuando se ejecuta React en tu ordenador local, la imagen debe estar en http://localhost:3000/image.png.

Entonces puedes asignar la URL relativa a tu dirección de host para establecer la imagen de fondo. Aquí tienes un ejemplo:

<div style={{ backgroundImage: "url(/image.png)" }}>
  Hello World
</div>

Al establecer la ruta de la URL a /image.png como en el ejemplo anterior, el navegador buscará la imagen de fondo en <Tu direccion de host>/image.png.

También puedes crear otra carpeta dentro de public/ si quieres organizar tus imágenes en carpetas. Por ejemplo:

No olvides ajustar el valor de backgroundImage a url(/img/image.png) si decides crear la carpeta.

Cómo establecer una imagen de fondo en React usando el método de la URL absoluta

También puedes incluir la URL absoluta utilizando la variable de entorno PUBLIC_URL de Create React App de la siguiente manera:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})` 
}}>
  Hello World
</div>

Cuando lo ejecutes en tu ordenador local, los scripts de React manejarán el valor de PUBLIC_URL. Cuando lo ejecutes localmente, se verá como una URL relativa en lugar de una URL absoluta:

La URL absoluta sólo se verá cuando se despliegue React en la aplicación de producción más tarde.

Cómo establecer una imagen de fondo con propiedades adicionales

Si quieres personalizar más la imagen de fondo, puedes hacerlo añadiendo propiedades adicionales después de backgroundImage. He aquí un ejemplo:

<div style={{ 
  backgroundImage: `url(${process.env.PUBLIC_URL + '/image.png'})`,
  backgroundRepeat: 'no-repeat',
  width:'250px' 
}}>
  Hello World
</div>

Las propiedades establecidas anteriormente añadirán background-repeat: no-repeat y width: 250px junto con el estilo background-image al elemento <div>.

Gracias por leer, y espero que hayas encontrado este artículo útil. Si tienes alguna pregunta, puedes encontrarme en Twitter. También compartiré algunos consejos cortos para desarrolladores de vez en cuando. ?

Si eres nuevo en este rubro, probablemente no sepas que es un editor de código, así que expliquemos primero que es.

¿Qué es un editor de código?

Un editor de código es un software que cómo su nombre dice nos ayuda a editar texto, en su mayoría los editores de código cuentan con resaltado de sintaxis, autocompletado, entre otras cosas. Algunos de ellos nos permiten agregar extensiones que amplían nuestra manera de escribir código y hasta nos ayudan a ser más eficientes escribiendo código más rápido.

Mejores editores de código para el desarrollo web

Visual Studio Code

Actualmente, este es el principal editor de código para el desarrollo web, fue creado por Microsoft en el año 2015 y cuenta con resaltado de sintaxis, autocompletado, extensiones, soporte para la depuración y está disponible tanto para Windows, Linux, MacOS y hace poco también para la web.

Sublime Text

Fue inicialmente una extensión de Vim (otro editor de código), al igual que VS Code cuenta con extensiones, resaltado de sintaxis, está disponible para Windows, Linux y MacOS. Cuando lo descargas cuentas con una prueba para que lo evalúes de forma gratuita para, luego, comprar su licencia.

Vim

Vim es un editor de código un tanto peculiar, ya que no se ejecuta de manera visual, sino directamente en la terminal. Fue creado en 1991 y cuenta con resaltado de sintaxis, autocompletado y extensiones. Esta disponible para Windows, Linux y MacOS.

Brackets

Brackets es un editor de código web, cuenta con soporte para Linux MacOS y Windows, pero su principal fuerte es la web, fue creado por adobe en 2014.

WebStorm

WebStorm no es tanto un editor de código, es un IDE (Entorno De Desarrollo Integrado en inglés) pero igualmente cabe en esta lista. Fue creado por Jetbrains y se basa en el muy conocido IntelliJ IDEA, cuenta con resaltado de sintaxis, autocompletado, extensiones y pruebas unitarias de JavaScript. Está disponible para Windows Linux y MacOS. Puedes usarlo gratis con una prueba de 30 días para después comprar su licencia. También cuenta con una versión gratis para estudiantes y maestros.

Notepad++

Fue creado en 2003, cuenta con soporte para varios lenguajes de programación y cuenta con resaltado de sintaxis. Esta disponible para Windows, Linux y MacOS.

Recapitulando

Este ha sido mi recuento de los que son para mí, los mejores editores de código, espero te sirva de ayuda en tu camino como desarrollador web. Si te ha resultado útil, toma en cuenta seguirme en Twitter. Me lees en la próxima. ?

Todos tratamos con objetos de una forma u otra al escribir código en un lenguaje de programación. En JavaScript, los objetos nos proporcionan una forma de almacenar, manipular y enviar datos a través de la red.

Hay muchas maneras en que los objetos en JavaScript difieren de los objetos en otros lenguajes de programación convencionales, como Java. Trataré de cubrir eso en otro tema. Aquí, vamos a centrarnos solo en las diversas formas en que JavaScript nos permite crear objetos.

En JavaScript, piensa en los objetos como una colección de pares 'clave:valor'. Esto nos lleva a la primera y más popular forma de crear objetos en JavaScript.

Empecemos con esto.

1. Creación de objetos mediante la sintaxis literal de objetos

Esto es realmente sencillo. Todo lo que tienes que hacer es lanzar tus pares clave-valor separados por ':' dentro de un conjunto de llaves ({ }) y tu objeto está listo para ser servido (o consumido), como abajo:

const person = {
  firstName: 'testFirstName',
  lastName: 'testLastName'
};

Esta es la forma más sencilla y popular de crear objetos en JavaScript.

2. Creación de objetos con la palabra clave "new"

Este método de creación de objetos se asemeja a la forma en que se crean los objetos en los lenguajes basados en clases, como Java. Por cierto, a partir de ES6, las clases son nativas de JavaScript también y veremos la creación de objetos mediante la definición de clases hacia el final de este artículo. Así que, para crear un objeto usando la palabra clave 'new', necesitas tener una función constructora.

Aquí hay 2 maneras de utilizar el patrón de la palabra clave "new" -

a) Uso de la palabra clave "new" con la función constructora de objetos incorporada

Para crear un objeto, utilice la palabra clave new con el constructor Object(), así:

const person = new Object();

Ahora, para añadir propiedades a este objeto, tenemos que hacer algo así:

person.firstName = 'testFirstName';
person.lastName = 'testLastName';

Puede que te hayas dado cuenta de que este método es un poco más largo de escribir. Además, esta práctica no es recomendable, ya que hay una resolución de ámbito que ocurre detrás de las escenas para encontrar si la función del constructor es incorporada o definida por el usuario.

b) Uso de 'new' con función constructora definida por el usuario

El otro problema con el enfoque de usar la función constructora 'Object' resulta del hecho de que cada vez que creamos un objeto, tenemos que añadir manualmente las propiedades al objeto creado.

¿Qué pasaría si tuviéramos que crear cientos de objetos persona? Puedes imaginar el dolor ahora. Así que, para librarnos de añadir manualmente las propiedades a los objetos, creamos funciones personalizadas (o definidas por el usuario). Primero creamos una función constructora y luego usamos la palabra clave 'new' para obtener objetos:

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}

Ahora, cada vez que quieras un objeto Person, simplemente haz esto:

const personOne = new Person('testFirstNameOne', 'testLastNameOne');
const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Uso de Object.create() para crear nuevos objetos

Este patrón es muy útil cuando se nos pide crear objetos a partir de otros objetos existentes y no utilizar directamente la sintaxis de la palabra clave 'new'. Veamos cómo utilizar este patrón. Como se indica en MDN:

El método Object.create() crea un nuevo objeto, utilizando un objeto existente como prototipo del nuevo objeto creado.

Para entender el método Object.create, basta con recordar que toma dos parámetros. El primer parámetro es un objeto obligatorio que sirve como prototipo del nuevo objeto a crear. El segundo parámetro es un objeto opcional que contiene las propiedades que se añadirán al nuevo objeto.

No vamos a profundizar en los prototipos y las cadenas de herencia ahora para mantener nuestro enfoque en el tema. Pero como punto rápido, puedes pensar en los prototipos como objetos de los que otros objetos pueden tomar prestadas las propiedades/métodos que necesitan.

Imagina que tienes una organización representada por orgObject

const orgObject = { company: 'ABC Corp' };

Y quieres crear empleados para esta organización. Claramente, usted quiere todos los objetos de los empleados.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } });

console.log(employee); // { company: "ABC Corp" }
console.log(employee.name); // "EmployeeOne"

4. Uso de Object.assign() para crear nuevos objetos

¿Qué pasa si queremos crear un objeto que necesita tener propiedades de más de un objeto? Objeto.assign() nos ayuda.

Como se indica en MDN:

El Object.assign() se utiliza para copiar los valores de todas las propiedades propias enumerables de uno o más objetos de origen a un objeto de destino. Devolverá el objeto de destino.

El método Object.assign() puede tomar cualquier número de objetos como parámetros. El primer parámetro es el objeto que creará y devolverá. El resto de los objetos que se le pasen se utilizarán para copiar las propiedades en el nuevo objeto. Vamos a entenderlo extendiendo el ejemplo anterior que vimos.

Supongamos que tiene dos objetos como se muestra a continuación:

const orgObject = { company: 'ABC Corp' }
const carObject = { carName: 'Ford' }

Ahora, desea un objeto empleado de 'ABC Corp' que conduzca un automóvil 'Ford'. Puede hacerlo con la ayuda de Object.assign lo siguiente:

const employee = Object.assign({}, orgObject, carObject);

Ahora, obtienes un employeeobjeto que tiene companyy carNamecomo su propiedad.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Usar clases de ES6 para crear objetos

Notará que este método es similar al uso de 'nuevo' con la función de constructor definida por el usuario. Las funciones del constructor ahora se reemplazan por clases, ya que son compatibles con las especificaciones de ES6. Veamos el código ahora.

class Person {
  constructor(fname, lname) {
    this.firstName = fname;
    this.lastName = lname;
  }
}

const person = new Person('testFirstName', 'testLastName');

console.log(person.firstName); // testFirstName
console.log(person.lastName); // testLastName

Estas son todas las formas que conozco para crear objetos en JavaScript. Espero que hayas disfrutado esta publicación y ahora entiendas cómo crear objetos.

¡Gracias por su tiempo para leer este artículo!

MacOS viene con Python preinstalado. Pero es la versión 2.7 de Python, que ahora está obsoleta (abandonada por la comunidad de desarrolladores de Python).

Toda la comunidad de Python ha pasado a utilizar Python 3.x (la versión actual al escribir esto es la 3.9). Y Python 4.x saldrá pronto, pero será completamente compatible con las versiones anteriores.

Si intentas ejecutar Python desde tu terminal de MacOS, verás incluso esta advertencia:

Hasta que Apple decida establecer Python 3.x, como la versión por defecto, vas a tener que instalarlo tú mismo.

Un solo comando para ejecutar Python 3

Para algunos de los que están leyendo esto, este comando puede ser suficiente. Puedes ejecutar Python 3 usando este comando (con el 3 al final).

python3

Si eso es todo lo que has venido a buscar, no te preocupes. Que pases un buen día y que seas feliz codificando.

Pero si quieres un sistema de control de versiones de Python adecuado para hacer un seguimiento de varias versiones - y tener un control preciso sobre qué versión utilizas - este tutorial te mostrará exactamente cómo lograrlo.

Cómo instalar Homebrew en Mac

Primero necesitas instalar Homebrew, un potente gestor de paquetes para Mac.

Abre tu terminal. Puedes hacerlo utilizando el Spotlight de MacOS (comando+espacio) y escribiendo "terminal".

Ahora que estás en una línea de comandos, puedes instalar la última versión de Homebrew ejecutando este comando:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Su terminal le pedirá acceso a nivel de superusuario. Tendrá que escribir su contraseña para ejecutar este comando. Esta es la misma contraseña que escribes cuando te conectas a tu Mac. Escríbala y pulse Intro.

Homebrew te pedirá que confirmes que quieres instalar lo siguiente. Tienes que pulsar enter para continuar. (O pulsar cualquier otra tecla si te acobardas).

Cómo instalar pyenv para gestionar las versiones de Python

Ahora tomemos un momento para instalar PyEnv. Esta biblioteca te ayudará a cambiar entre diferentes versiones de Python (en caso de que necesites ejecutar Python 2.x por alguna razón, y en previsión de la llegada de Python 4.0).

Ejecuta este comando:

brew install pyenv

Ahora puedes instalar la última versión de Python.

Cómo utilizar pyenv para instalar Python o actualizar su versión de Python

Ahora sólo tienes que ejecutar el siguiente comando:

pyenv install 3.9.2 

Tenga en cuenta que puede sustituir la versión 3.9.2 por la última versión de Python. Por ejemplo, una vez que salga Python 4.0.0, puedes ejecutar esto:

pyenv install 4.0.0

Solución de problemas de instalación de pyenv

Si te encuentras con un error de que "el compilador de C no puede crear ejecutables", la forma más sencilla de resolverlo es reinstalar Xcode de Apple.

Xcode es una herramienta creada por Apple que incluye todas las bibliotecas C y otras herramientas que Python utiliza cuando se ejecuta en MacOS. Xcode ocupa la friolera de 11 gigabytes, pero querrás estar al día. Es posible que quieras ejecutar esto mientras duermes.

Puedes obtener la última versión de Xcode de Apple aquí. Tuve que hacer esto después de actualizar a MacOS Big Sur, pero una vez que lo hice, todos los siguientes comandos funcionaron bien. Sólo tienes que volver a ejecutar el pyenv install 3.9.2 anterior y ahora debería funcionar.

Cómo configurar el PATH de MacOS para pyenv (Bash o ZSH)

Primero tienes que actualizar tu ruta Unix para preparar el camino para que PyEnv pueda interactuar con tu sistema.

Esta es una larga explicación de cómo funciona PATH en MacOS (y Unix), directamente desde el repo de GitHub de pyenv.

Cuando ejecutas un comando como python o pip, tu sistema operativo busca en una lista de directorios para encontrar un archivo ejecutable con ese nombre. Esta lista de directorios vive en una variable de entorno llamada PATH, con cada directorio de la lista separado por dos puntos:

/usr/local/bin:/usr/bin:/bin

Los directorios en PATH  se buscan de izquierda a derecha, por lo que un ejecutable que coincida en un directorio al principio de la lista tiene prioridad sobre otro al final. En este ejemplo, se buscará primero en el directorio /usr/local/bin, luego en /usr/bin y después en /bin.then/bin.

Y aquí está su explicación de lo que es un Shim. Vuelvo a citarlos extensamente porque realmente no puedo explicarlo mejor.

pyenv funciona insertando un directorio de calzas al frente de su PATH :

$(pyenv root)/shims:/usr/local/bin:/usr/bin:/bin

A través de un proceso llamado rehacer, pyenv mantiene calzas en ese directorio para que coincida con cada comando de Python a través de cada versión instalada de Python-python, pip, y así sucesivamente.

Los shims son ejecutables ligeros que simplemente pasan su comando a pyenv.

A continuación se explica cómo actualizar su .bash_profile en Bash (que se instala en MacOS por defecto):

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bash_profile
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bash_profile

O si has instalado ZSH (o OhMyZSH) como yo, querrás editar el archivo .zshrc en su lugar:

echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc

Entonces querrás añadir PyEnv Init a tu terminal. Ejecuta este comando si estás usando Bash (de nuevo, este es el predeterminado con MacOS):

echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init -)"\nfi' >> ~/.bash_profile

O ejecuta este comando si estás usando ZSH:

echo -e 'if command -v pyenv 1>/dev/null 2>&1; then\n  eval "$(pyenv init --path)"\n  eval "$(pyenv init -)"\nfi' >> ~/.zshrc

Ahora reinicie su terminal ejecutando este comando:

reset

Cómo establecer una versión de Python por defecto global (Bash o ZSH)

Puedes configurar la última versión de Python para que sea global, lo que significa que será la versión por defecto de Python que utiliza MacOS cuando ejecutas aplicaciones de Python.

Ejecuta este comando:

pyenv global 3.9.2

De nuevo, puedes sustituir la versión 3.9.2 por la más reciente.

Ahora puedes verificar que esto ha funcionado comprobando la versión global de Python:

pyenv versions

Debería ver esta salida:

El paso final: Cerrar el terminal y reiniciarlo

Una vez que hayas reiniciado tu terminal, ejecuta el comando python y lanzarás la nueva versión de Python en lugar de la antigua.

Enhorabuena. Gracias por leer esto, y feliz codificación.

En JavaScript, una función debounce se asegura de que su código sólo se active una vez por cada entrada del usuario. Las sugerencias de los cuadros de búsqueda, el autoguardado de los campos de texto y la eliminación de los clics dobles son casos de uso de la función debounce.

En este tutorial, aprenderemos a crear una función debounce en JavaScript.

¿Qué es debounce?

El término debounce proviene de la electrónica. Cuando se pulsa un botón, por ejemplo, en el mando a distancia del televisor, la señal viaja hasta el microchip del mando con tanta rapidez que, antes de que consiga soltar el botón, rebota y el microchip registra su "clic" varias veces.

Para mitigar esto, una vez que se recibe una señal del botón, el microchip deja de procesar las señales del botón durante unos microsegundos mientras es físicamente imposible que lo vuelva a pulsar.

Debounce en JavaScript

En JavaScript, el caso de uso es similar. Queremos activar una función, pero sólo una vez por caso de uso.

Digamos que queremos mostrar sugerencias para una consulta de búsqueda, pero sólo después de que el visitante haya terminado de escribirla.

O queremos guardar los cambios en un formulario, pero sólo cuando el usuario no esté trabajando activamente en esos cambios, ya que cada "guardado" nos cuesta un viaje a la base de datos.

Y mi favorito: algunos se acostumbraron mucho a Windows 95 y ahora hacen doble clic en todo ?.

Esta es una simple implementación de la función debounce (CodePen aquí):

function debounce(func, timeout = 300){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
  };
}
function saveInput(){
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

Se puede utilizar en un input:

<input type="text" onkeyup="processChange()" />

O en un botón:

<button onclick="processChange()">Click me</button>

O un evento en la ventana:

window.addEventListener("scroll", processChange);

Y en otros elementos como una simple función JS.

¿Qué ocurre aquí? El debounce es una función especial que se encarga de dos tareas:

• Asignación de un ámbito para la variable del temporizador.
• Programar la función para que se active en un momento determinado.

Vamos a explicar cómo funciona esto en el primer caso de uso con la entrada de texto.

Cuando un visitante escribe la primera letra y suelta la tecla, el debounce primero reinicia el temporizador con clearTimeout(timer). En este punto, el paso no es necesario, ya que no hay nada programado todavía. Luego programa la función proporcionada -saveInput()- para ser invocada en 300 ms.

Pero digamos que el visitante sigue escribiendo, por lo que cada liberación de la tecla desencadena el debounce de nuevo. Cada invocación necesita reiniciar el temporizador, o, en otras palabras, cancelar los planes anteriores con saveInput(), y reprogramarlo para un nuevo tiempo-300 ms en el futuro. Esto continúa mientras el visitante siga pulsando las teclas por debajo de los 300 ms.

La última programación no se borrará, por lo que finalmente se llamará a saveInput().

Al revés: ¿Cómo ignorar los acontecimientos posteriores?

Eso está bien para activar el autoguardado o mostrar sugerencias. ¿Pero qué pasa con el caso de uso con múltiples clics de un solo botón? No queremos esperar al último clic, sino registrar el primero e ignorar el resto (CodePen Aquí).

function debounce_leading(func, timeout = 300){
  let timer;
  return (...args) => {
    if (!timer) {
      func.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => {
      timer = undefined;
    }, timeout);
  };
}

Aquí activamos la función saveInput() en la primera llamada debounce_leading causada por el primer clic del botón. Programamos la destrucción del temporizador para 300 ms. Cada clic de botón posterior dentro de ese marco de tiempo ya tendrá el temporizador definido y sólo empujará la destrucción 300 ms hacia el futuro.

Implementaciones de debounce en las librerías

En este artículo, te mostré cómo implementar una función de debounce en JavaScript y utilizarla para, bueno, rebotar eventos desencadenados por elementos del sitio web.

Sin embargo, no es necesario que uses tu propia implementación de debounce en tus proyectos si no quieres. Librerías JS ampliamente utilizadas ya contienen su implementación. Aquí hay algunos ejemplos:

A veces es necesario tomar un arreglo y aplicar algún procedimiento a sus elementos para obtener un nuevo arreglo con elementos modificados.

En lugar de iterar manualmente sobre el arreglo usando un bucle, puedes simplemente usar el método incorporado Array.map().

El método Array.map() te permite iterar sobre un arreglo y modificar sus elementos utilizando una función callback. La función callback se ejecutará entonces en cada uno de los elementos del arreglo.

Por ejemplo, supón que tienes el siguiente elemento de arreglo:

let arr = [3, 4, 5, 6];

Ahora imagina que tienes que multiplicar cada uno de los elementos del arreglo por 3. Podrías considerar usar un bucle for como el siguiente:

let arr = [3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [9, 12, 15, 18]

Pero en realidad puedes utilizar el método Array.map() para conseguir el mismo resultado. He aquí un ejemplo:

let arr = [3, 4, 5, 6];

let modifiedArr = arr.map(function(element){
    return element *3;
});

console.log(modifiedArr); // [9, 12, 15, 18]

El método Array.map() se utiliza comúnmente para aplicar algunos cambios a los elementos, ya sea multiplicando por un número específico como en el código anterior, o haciendo cualquier otra operación que pueda necesitar para su aplicación.

Cómo utilizar map() sobre un arreglo de objetos

Por ejemplo, puedes tener un arreglo de objetos que almacene los valores de firstName y lastName de tus amigos de la siguiente manera:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

Puedes utilizar el método map() para iterar sobre el arreglo y unir los valores de firstName y lastName de la siguiente manera:

let users = [
  {firstName : "Susan", lastName: "Steward"},
  {firstName : "Daniel", lastName: "Longbottom"},
  {firstName : "Jacob", lastName: "Black"}
];

let userFullnames = users.map(function(element){
    return `${element.firstName} ${element.lastName}`;
})

console.log(userFullnames);
// ["Susan Steward", "Daniel Longbottom", "Jacob Black"]

El método map() pasa algo más que un elemento. Veamos todos los argumentos que pasa map() a la función callback.

La sintaxis completa del método map()

La sintaxis del método map() es la siguiente:

arr.map(function(element, index, array){  }, this);

La function() callback es llamada en cada elemento del arreglo, y el método map() siempre le pasa el element actual, el index del elemento actual y el objeto array completo.

El argumento this se utilizará dentro de la función callback. Por defecto, su valor es undefined. Por ejemplo, aquí está cómo cambiar el valor de this al número 80:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
	console.log(this) // 80
}, 80);

También puedes probar los otros argumentos usando console.log() si te interesa:

let arr = [2, 3, 5, 7]

arr.map(function(element, index, array){
    console.log(element);
    console.log(index);
    console.log(array);
    return element;
}, 80);

Y eso es todo lo que necesitas saber sobre el método Array.map(). La mayoría de las veces, solo utilizarás el argumento del element dentro de la función callback, ignorando el resto. Eso es lo que suelo hacer en mis proyectos diarios :)

Gracias por leer este tutorial

No hace mucho tiempo, se lanzó una variante reactiva del controlador JDBC, conocida como R2DBC.  Permite que los datos se transmitan de forma asincrónica a cualquier punto final que se haya suscrito a él.  Usando un controlador reactivo como R2DBC junto con Spring, WebFlux le permite escribir una aplicación completa que maneja la recepción y el envío de datos de forma asíncrona.

En esta publicación, nos centraremos en la base de datos, desde la conexión a la base de datos hasta finalmente guardar y recuperar datos.  Para hacer esto, usaremos Spring Data.  Al igual que con todos los módulos de Spring Data, nos proporciona una configuración lista para usar.  Esto disminuye la cantidad de código repetitivo que necesitamos escribir para configurar nuestra aplicación.  Además de eso, proporciona una capa sobre el controlador de la base de datos que hace que realizar las tareas simples sea más fácil y las tareas más difíciles sean un poco menos dolorosas.

Para el contenido de esta publicación, estoy haciendo uso de una base de datos de Postgres.  En el momento de escribir este artículo, solo Postgres, H2 y Microsoft SQL Server tienen sus propias implementaciones de controladores R2DBC.

Anteriormente, escribí dos publicaciones sobre bibliotecas Spring Data reactivas, una sobre Mongo y otra sobre Cassandra.  Es posible que hayas notado que ninguna de estas bases de datos son bases de datos RDBMS.  Ahora hay otros controladores reactivos disponibles desde hace mucho tiempo (escribí la publicación de Mongo hace casi 2 años), pero al momento de escribir un controlador reactivo para una base de datos RDBMS todavía es algo bastante nuevo.  Esta publicación seguirá un formato similar a aquellos.

Además, también he escrito un post sobre el uso de Spring Web Flux que mencioné en la introducción.

Dependencias

Hay algunas cosas que señalar aquí.

Cuanto más utilices Spring Boot, más te acostumbrarás a importar una única dependencia de spring-boot-starter para la cosa que quieras hacer. Por ejemplo, esperaba que hubiera una dependencia de spring-boot-starter-r2dbc, pero lamentablemente no la hay. Todavía.

Simplemente, esta biblioteca está en el lado más nuevo y en el momento de escribir, no tiene su propio módulo de Spring Boot que contiene las dependencias que necesita junto con una configuración más rápida a través de la configuración automática. Estoy seguro de que estas cosas llegarán en algún momento y harán que la configuración de un controlador R2DBC sea aún más fácil.

Por ahora, tendremos que rellenar manualmente algunas dependencias adicionales.‌‌‌‌

Además, las librerías R2DBC solo tienen versiones Milestone (una prueba más de que son nuevas) por lo que tenemos que asegurarnos de traer el repositorio Spring Milestone. Probablemente, tendré que actualizar este post en el futuro cuando consiga una versión de lanzamiento.

Conexión a la base de datos

Gracias a que Spring Data hace gran parte del trabajo por nosotros, el único Bean que hay que crear manualmente es el ConnectionFactory que contiene los detalles de conexión de la base de datos:

Lo primero que hay que observar aquí es la extensión de AbstractR2dbcConfiguration. Esta clase contiene un montón de Beans que ya no necesitamos crear manualmente. La implementación de connectionFactory es el único requisito de la clase, ya que es necesario para crear el Bean DatabaseClient. Este tipo de estructura es típica de los módulos de Spring Data, por lo que se siente bastante familiar al probar uno diferente. Además, yo esperaría que esta configuración manual se elimine una vez que la autoconfiguración esté disponible y se dirija únicamente a través del application.properties.

He incluido la propiedad del port aquí, pero si no has jugado con la configuración de tu Postgres entonces puedes confiar en el valor por defecto de 5432.

Las cuatro propiedades: host, database, username  y password definidas por el PostgresqlConnectionFactory son lo mínimo para que funcione. Cualquier cosa menos y experimentará excepciones durante el arranque.

Usando esta configuración, Spring es capaz de conectarse a una instancia de Postgres en ejecución.

El último dato a destacar de este ejemplo es el uso de @EnableR2dbcRepositories. Esta anotación indica a Spring que busque cualquier interfaz de repositorio que extienda la interfaz Repository de Spring. Esta se utiliza como interfaz base para instrumentar los repositorios de Spring Data. Veremos esto con más detalle en la siguiente sección. La principal información que debemos extraer de aquí es que debemos utilizar la anotación @EnableR2dbcRepositories  para aprovechar al máximo las capacidades de Spring Data.

Creación de un repositorio de datos de Spring

Como se ha mencionado anteriormente, en esta sección veremos cómo añadir un repositorio de datos de Spring. Estos repositorios son una buena característica de Spring Data, lo que significa que no es necesario escribir un montón de código extra para simplemente escribir una consulta.

Desafortunadamente, al menos por ahora, Spring R2DBC no puede inferir consultas de la misma manera que lo hacen actualmente otros módulos de Spring Data (estoy seguro de que esto se añadirá en algún momento). Esto significa que tendrá que utilizar la anotación @Query y escribir el SQL a mano. Echemos un vistazo:

Esta interfaz extiende R2dbcRepository. Este a su vez extiende ReactiveCrudRepository  y luego baja a Repository. ReactiveCrudRepository proporciona las funciones CRUD estándar y, por lo que tengo entendido, R2dbcRepository no proporciona ninguna función extra y es, en cambio, una interfaz creada para una mejor denominación de la situación.

R2dbcRepository toma dos parámetros genéricos, uno es la clase de entidad que toma como entrada y produce como salida. El segundo es el tipo de la clave primaria. Por lo tanto, en esta situación, la clase Person está siendo gestionada por el PersonRepository (tiene sentido) y el campo de la clave primaria dentro de Person es un Int.

Los tipos de retorno de las funciones de esta clase y los proporcionados por ReactiveCrudRepository son Flux y Mono (no se ven aquí). Estos son tipos del Proyecto Reactor que Spring utiliza como tipos de flujo reactivo por defecto. Flux representa un flujo de múltiples elementos mientras que Mono es un único resultado.

Finalmente, como mencioné antes del ejemplo, cada función está anotada con @Query. La sintaxis es bastante sencilla, siendo el SQL una cadena dentro de la anotación. El $1 ($2, $3, etc ... para más entradas) representa el valor introducido en la función. Una vez hecho esto, Spring se encargará del resto y pasará la(s) entrada(s) a su respectivo parámetro de entrada, recogerá los resultados y los asignará a la clase de entidad designada del repositorio.

Una mirada muy rápida a la entidad

No voy a decir mucho aquí, sino simplemente mostrar la clase Person utilizada por el PersonRepository.

En realidad, hay un punto que hacer aquí. id se ha hecho anulable y se ha proporcionado un valor por defecto de null para permitir que Postgres genere el siguiente valor adecuado por sí mismo. Si no es anulable y se proporciona un valor de id, Spring intentará ejecutar una actualización en lugar de una inserción al guardar. Hay otras formas de evitar esto, pero creo que esto es suficiente.

Esta entidad se asignará a la tabla de personas definida a continuación:

Ver todo en acción

Ahora veamos cómo se hace realmente. A continuación se muestra un código que inserta algunos registros y los recupera de diferentes maneras:

Una cosa que mencionaré sobre este código. Hay una posibilidad muy real de que se ejecute sin realmente insertar o leer algunos de los registros. Pero, si lo piensas, tiene sentido. Las aplicaciones reactivas están pensadas para hacer cosas de forma asíncrona y, por tanto, esta aplicación ha comenzado a procesar las llamadas a funciones en diferentes hilos. Sin bloquear el hilo principal, estos procesos asíncronos podrían no ejecutarse nunca completamente. Por esta razón, hay algunas llamadas a Thread.sleep en este código, pero las he eliminado del ejemplo para mantener todo ordenado.

El resultado de la ejecución del código anterior sería algo parecido a lo siguiente:

[ main] onSubscribe(FluxConcatMap.ConcatMapImmediate)[ main] request(unbounded)[actor-tcp-nio-1] onNext(Person(id=35, name=Dan Newton, age=25))[actor-tcp-nio-1] onNext(Person(id=36, name=Laura So, age=23))[actor-tcp-nio-1] onComplete()[actor-tcp-nio-2] findAll - Person(id=35, name=Dan Newton, age=25)[actor-tcp-nio-2] findAll - Person(id=36, name=Laura So, age=23)[actor-tcp-nio-4] findAllByName - Person(id=36, name=Laura So, age=23)[actor-tcp-nio-5] findAllByAge - Person(id=35, name=Dan Newton, age=25)

Hay que tener en cuenta algunas cosas:

• onSubscribe y request ocurren en el hilo principal desde el que se llamó al Flux. Solo saveAll  produce esto, ya que ha incluido la función de log. Añadir esto a las otras llamadas habría llevado al mismo resultado de registro en el hilo principal.
• La ejecución contenida en la función de suscripción y los pasos internos del Flux se ejecutan en hilos separados.

Esto no es ni de lejos una representación real de cómo usarías los Streams Reactivos en una aplicación real, pero esperamos que demuestre cómo usarlos y dé una idea de cómo se ejecutan.

Conclusión

En conclusión, los Reactive Streams han llegado a algunas bases de datos RDBMS gracias al driver R2DBC y a Spring Data que construye una capa encima para hacer todo un poco más ordenado. Usando Spring Data R2DBC somos capaces de crear una conexión a una base de datos y empezar a consultarla sin necesidad de demasiado código.

Aunque Spring ya está haciendo mucho por nosotros, podría hacer más. Actualmente, no tiene soporte para la autoconfiguración de Spring Boot. Lo cual es un poco molesto. Pero, estoy seguro de que alguien se pondrá a hacerlo pronto y hará que todo sea aún mejor de lo que ya es.

El código utilizado en este post se puede encontrar en mi GitHub.

Si te ha resultado útil este post, puedes seguirme en Twitter en @LankyDanDev para estar al día de mis nuevas publicaciones.

Publicado originalmente en lankydanblog.com el 16 de febrero de 2019.

Elegir el tipo de letra adecuado es un primer paso importante para que su sitio web sea utilizable y accesible.

El formato del texto afecta a la legibilidad de los diseños y las páginas web.

Puedes modificar la apariencia de tu texto HTML de muchas maneras utilizando CSS. Puedes seleccionar el tipo de fuente que quieres usar, si está en negrita o no, qué tamaño tiene, e incluso puedes cambiar el color y añadirle diferentes espaciados o decoraciones.

En este artículo, repasaremos las diferencias entre los dos tipos de letra más populares, Serif y Sans Serif.

Además, cubriremos la sintaxis y cómo utilizar la propiedad font-family para que, con la ayuda de CSS, puedas elegir y luego utilizar diferentes fuentes en tus proyectos de diseño web.

¡Empecemos!

Terminología tipográfica

En primer lugar, hablemos de algunos de los tipos de letra más comunes y frecuentes que admiten los navegadores modernos.

El tipo de letra Serif

Las fuentes Serif se caracterizan por los pequeños detalles extrafinos en los extremos de las letras.

Al final de los trazos principales de los caracteres, hay pequeños trazos de floritura llamados serifas (del francés serif).

Los tipos de letra Serif se utilizan tradicionalmente en la impresión, ya que se consideran legibles para pasajes largos de texto. Pero no siempre se muestran bien en las pantallas.

Las fuentes Serif están consideradas como las más clásicas, elegantes y tradicionales que se pueden utilizar.

El tipo de letra Sans-Serif

Este tipo de fuente crea un aspecto de diseño limpio, a la vez que es muy legible y claro.

Este tipo de letra tiene extremos rectos en cada letra y no hay trazos en los bordes, lo que hace que los caracteres parezcan nítidos y planos y con líneas limpias.

Las fuentes Sans-serif se consideran modernas, minimalistas, contemporáneas y una opción más legible para las pantallas de ordenador de alta resolución.

El tipo de letra Monospace

Con este tipo de letra, cada letra tiene la misma anchura fija y las letras están igualmente espaciadas.

Con los tipos de letra anteriores que hemos analizado hasta ahora, cada letra tiene una anchura diferente.

En cambio, con el tipo de letra monospace, todas las letras tienen la misma anchura. Esto hace que el texto se alinee bien y sea fácil de seguir, dando a los diseños un aspecto limpio y una sensación mecánica.

Hay otros dos tipos de fuentes genéricas disponibles, fantasy y cursive, pero los tipos de letra más utilizados son los mencionados anteriormente.

Como elegir un tipo de letra para su sitio web - nombres de fuentes

Ahora que hemos cubierto los términos básicos de las fuentes y sus descripciones, es el momento de ver los diferentes estilos de fuentes dentro de cada familia.

A continuación se enumeran algunos estilos comunes dentro de cada familia de fuentes:

Fuentes Serif

• Georgia
• Times
• Times New Roman
• Bodoni
• Garamond
• Palatino
• ITC Clearface
• Plantin
• Freight Text
• Didot
• American Typewriter

Fuentes Sans-Serif

• Arial
• Verdana
• Helvetica
• Geneva
• Tahoma
• Trebuchet MS
• Open Sans
• Liberation Sans
• Impact

Fuentes Monospace

• Courier
• MS Courier New
• Monaco
• Lucinda Console
• Andalé Mono
• Menlo
• Consolas

Como usar la propiedad font-family

En CSS, la propiedad font-family define un tipo de letra específico para un elemento y el aspecto que tendrá su contenido de texto.

La sintaxis de la propiedad font-family es:

element {
font-family: value;
}

Escribimos la propiedad font-family seguida de dos puntos :, un espacio, un  value, y finalmente terminamos la especificación con un punto y coma ;.

Tenemos que establecer la propiedad a la que queremos apuntar y asignar el valor que queremos.

Como establecer una fuente CSS

Digamos que tenemos el HTML de abajo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS Fonts</title>
</head>
<body>
    <h1>HTML Font – CSS Font Family </h1>
    <p>I am a paragraph</p>
</body>
</html>

Sin aplicar ningún estilo y sin establecer explícitamente un valor a la propiedad font-family, los navegadores muestran los encabezados y los párrafos con el tipo de letra de su elección.

El tipo de letra estándar y por defecto de Google Chrome es Times New Roman, una fuente serif.

El resultado tiene este aspecto:

Hay varias maneras de establecer un tipo de letra diferente y especificar la fuente que queremos.

A la hora de elegir un tipo de letra, que es la parte más valiosa, hay que mencionar que los sitios utilizan un conjunto limitado de tipos de letra. Tomarán las fuentes que ya están instaladas en el ordenador del usuario.

Un navegador solo mostrará un tipo de letra si ya está instalado en el ordenador del usuario.

Así que veamos las formas en que se puede establecer un tipo de letra en CSS.

Cómo utilizar un nombre genérico de familia de fuentes

En este caso, los nombres son palabras clave e incluyen una de las categorías de fuentes mencionadas anteriormente (serif, sans-serif, monospace).

Sería algo así:

p {
 font-family: serif;
 }

Esto establece la fuente a una fuente serif genérica.

Como utilizar un nombre de familia de fuentes específico

p {
 font-family: Times,serif;
 }

Esta regla establece Times como la fuente deseada y luego Serif como la opción genérica de reserva, en caso de que la primera opción no esté instalada en el ordenador del usuario.

Si el nombre contiene algún espacio en blanco, es necesario encerrarlo entre comillas.

p {
font-family: "Courier New",monospace;
}

Esto establece la fuente a Courier New y añade monospace como respaldo.

Si especificamos un tipo de letra que no sea uno de los nombres genéricos (como serif, sans-serif) tenemos que dar al navegador una alternativa.

Como utilizar una pila de fuentes

En este caso, la propiedad font-family tiene múltiples valores.

Es una lista priorizada, separada por comas, de nombres de familias de fuentes que puede aplicar al texto, indicando que todas las fuentes son alternativas. Esto permite la máxima compatibilidad con los navegadores y sistemas operativos.

La lista se prioriza de izquierda a derecha, de mayor a menor prioridad.

p { 
  font-family: "Lucida Console", Courier, monospace;
}

Al aplicar más de un nombre de familia de fuentes, se crea un orden de preferencia. Empezamos con la fuente que queremos primero.

Si un usuario no tiene la primera opción instalada en su ordenador o si no es compatible con el navegador, este pasa a la segunda fuente y la utiliza. Si esa fuente tampoco está disponible, pasa a la tercera, y así sucesivamente.

Podemos listar tantas fuentes como queramos, pero la mejor práctica es listar de tres a cuatro.

Si todo lo demás falla, siempre habrá una fuente genérica listada al final como última opción-mecanismo de devolución.

Del grupo listado, el navegador tiene que soportar al menos una opción y el nombre genérico garantiza que algo en la familia de fuentes deseada será renderizado.

p {
 font-family: Georgia, "Times New Roman", Times, serif;

Los tipos de letra que se enumeran se conocen como una pila de fuentes.

El navegador buscará primero Georgia. Si está instalada, el navegador mostrará esa fuente. A continuación, buscará Times New Roman. Si tampoco está disponible, recurrirá a mostrar la fuente genérica por defecto de la familia serif.

Conclusión

En este artículo, hemos repasado las diferentes familias de fuentes y hemos dado algunos ejemplos de los diferentes estilos dentro de cada familia.

También repasamos la propiedad font-family y las tres formas diferentes de establecer una fuente en CSS.

Si quieres aprender más sobre HTML y CSS y las diferentes técnicas modernas que se utilizan, freeCodeCamp tiene una certificación gratuita sobre Diseño Web Responsivo.

Empezarás desde lo más básico hasta llegar a Flexbox, CSS Grid, y cómo hacer sitios web responsivos. Estas son habilidades esenciales para el diseño digital y el desarrollo web front-end.

Al final, construirás 5 proyectos, incluyendo un sitio de portafolio donde puedes mostrar los otros proyectos que has construido si lo deseas.

Gracias por leer y feliz aprendizaje.

En HTML, la fuente que elija jugará un papel importante en la apariencia de sus páginas web.

Puedes elegir el color, el peso, el tamaño, etc. de la fuente.  Y todas estas características hacen que sus sitios web y aplicaciones se vean mejor y más presentables para el usuario.

Con la propiedad font-size en CSS, puedes cambiar el tamaño del texto en la página web. Puedes utilizar esta propiedad en cualquier tipo de CSS que esté escribiendo: externo, interno o en línea.

En este artículo, le mostraré cómo cambiar el tamaño del texto con la propiedad  font-size en CSS en línea.

¿Qué es CSS en línea?

CSS en línea es una de las tres formas diferentes que puede utilizar para diseñar cualquier elemento HTML.

En lugar de apuntar al elemento con un atributo class o id, o al elemento mismo como selector y darle estilo con eso, pones todos los estilos CSS en la etiqueta de apertura.

Además, debe asegurarse de que todas las propiedades y valores de sus estilos estén dentro del atributo style. El atributo style es uno de los numerosos atributos aceptados por todas las etiquetas HTML.

En el siguiente ejemplo, cambio el color de fondo del texto a carmesí, el color del texto a #f1f1f1 (gris claro), y el peso de la fuente a bold con CSS en línea.

<p style="background-color: crimson; color: #f1f1f1; font-weight: bold">
      Hello Campers...
</p>

Por cierto, mi navegador está ampliado a un nivel del 400%, por lo que todo parece tan grande.  No apliqué ningún estilo adicional para lograr eso :)

Cómo cambiar el tamaño del texto usando CSS en línea

Para cambiar el tamaño de su texto con CSS en línea, debe hacerlo con el atributo style. Escribe en la propiedad font-size, y luego asígnale un valor.

Hay valores incorporados como large, larger, medium, small, x-large, y también:

En el fragmento de código a continuación, cambio el tamaño del texto “Hello Campers…”  a x-large, uno de los valores integrados de la propiedad font-size.

<p style="font-size: x-large">Hello Campers...</p>

También puede establecer el valor de la propiedad font-size utilizando un número con cualquier unidad, como píxeles (px), rem o em.

Es mejor ir con valores numerados porque le dan más libertad para elegir el tamaño de fuente que desee.

En el fragmento de código a continuación, cambié el tamaño del texto a 30px en CSS en línea:

<p style="font-size: 30px">Hello Campers...</p>

Conclusión

En este artículo, aprendió cómo cambiar el tamaño del texto con CSS en línea y la propiedad de font-size.  También vio cómo puede asignar valores a la propiedad de font-size.

Sin embargo, solo un aviso: CSS en línea es excelente para diseñar, pero no debes confiar mucho en él, ya que hace que su HTML sea difícil de leer, especialmente si está trabajando en equipo.  No querrás ser el único que podrá leer tu propio código.

Tenga en cuenta que también anula cualquier conjunto de estilo con estilo interno o externo.  En su lugar, debe usar un estilo externo o un estilo interno, ya que hacen que sus códigos HTML y CSS se separen, lo que es mejor para la legibilidad.

Al asignar valores a la propiedad font-size, es mejor asignar los valores en unidades rem en lugar de px, por ejemplo. Esto se debe a que cuando usas rem, el navegador podrá realizar ajustes en el tamaño de la fuente a medida que el usuario se acerca o aleja, que no sucederá cuando uses px.

Gracias por leer y seguir programando.

En este artículo, te mostraré cómo implementar rápidamente cualquier aplicación React con la ayuda de las páginas de Cloudflare.

Verás cómo no solo crear e implementar tu aplicación en minutos usando solo algunas herramientas, sino también cómo implementar automáticamente cualquier cambio futuro que realices a través de tu cuenta de GitHub.

Cómo empezar

Para comenzar, necesitarás las siguientes herramientas:

1. El administrador de paquetes npm y el software de control de versiones Git
2. Tu propia cuenta de GitHub (gratuita) y tu cuenta de Cloudflare

Crea nuestro proyecto React

Para implementar una aplicación React, primero necesitamos crear una.

Creemos una aplicación React en nuestra computadora con la ayuda de Create-React-App.  Podemos hacerlo dándole el nombre "cloudflare-react":

npx create-react-app cloudflare-react

Crea nuestro repositorio de Github

Y una vez que nuestro proyecto se haya creado con éxito, sigamos adelante y creemos un repositorio de GitHub para él.

Usamos GitHub para poder mantener un registro en línea y fácil de administrar de nuestros proyectos individuales.  GitHub también permite que otros usuarios realicen mejoras en nuestro código a través de solicitudes de extracción.

Cloudflare usa GitHub para realizar un seguimiento de todo nuestro código y cada vez que hacemos cambios.

Para rastrear nuestra nueva aplicación React, creamos un nuevo repositorio de GitHub yendo a github.com/new.

A continuación, podemos simplemente agregar todos nuestros archivos y enviarlos con un mensaje que diga lo que estamos haciendo:

git add .
git commit -m "Deploy to Cloudflare Pages"

A continuación, debemos agregar el control remoto de Git apropiado, que se utiliza para enviar nuestro código comprometido a nuestro nuevo repositorio de GitHub.

GitHub le dirá el comando que necesitas incluir para tu repositorio recién creado.  Debería verse algo como esto:

git remote add origin someurl

Y finalmente, podemos simplemente correr  git push -u origin master.

Después de actualizar nuestra página de repositorio de GitHub, deberíamos ver todo el código de nuestro proyecto React, enviado a GitHub.

Este es el primer requisito principal para implementar una aplicación en las páginas de Cloudflare: tener una aplicación React viviendo en GitHub.

Crea una cuenta de Cloudflare

A continuación, vamos a Cloudflare para implementar nuestro proyecto React.

Si aún no tienes una cuenta gratuita de Cloudflare, puedes ir a pages.cloudflare.com y hacer clic en "Sign Up":

Una razón principal por la que tú y la mayoría de los desarrolladores estarían interesados ​​en utilizar Cloudflare Pages es que Cloudflare tiene una CDN mundial. Esto permite una entrega más rápida de nuestra aplicación implementada.

Cloudflare también tiene recursos como la administración de DNS, que es especialmente útil si desea que su aplicación tenga su propio dominio personalizado.

Vincula GitHub a Cloudflare Pages

La primera vez que visites Cloudflare Pages, se te pedirá que creas un proyecto desde tu repositorio de GitHub, por lo que seleccionarás el botón conectar cuenta de GitHub:

Luego se te pedirá que instales y autorice Cloudflare pages.

Este paso nos permite elegir a qué tiene acceso Cloudflare, si queremos darle acceso a todos nuestros repositorios o solo a repositorios seleccionados:

Si deseas implementar varios proyectos en el futuro, te recomiendo seleccionar todos los repositorios.

Como resultado, Cloudflare tendrá la capacidad de acceder a cualquier código e implementación que hayamos realizado para que pueda implementarse en la web.

Implementa nuestro proyecto React en Cloudflare Pages

Una vez que hayamos dado autorización a Cloudflare para hacerlo, veremos una pantalla donde podemos elegir qué proyecto de nuestro repositorio de GitHub queremos implementar:

En nuestro caso, elegiremos nuestro repositorio "cloudflare-react", luego de lo cual presionaremos Comenzar configuración.

Desde allí, podemos elegir qué nombre de proyecto queremos que tenga nuestra aplicación React con Cloudflare. Este nombre de proyecto es importante porque determina el subdominio en el que se implementará.

Como elegimos "cloudflare-react", se implementará en cloudflare-react.pages.dev:

Podemos elegir qué rama implementar, así como la configuración de compilación.

Ten en cuenta que todo lo que realmente tenemos que hacer es elegir qué marco preestablecido estamos usando. Cloudflare tiene una opción preestablecida para nuestro marco: Create React App.

Cuando lo elijamos, incluirá la configuración predeterminada para cualquier proyecto Create React App: para implementar el proyecto ejecutando el comando de compilación "npm run build" y el directorio de salida (la carpeta en la que se construirá nuestro código React al ejecutar este comando de compilación) se llama "build".

Hay otros ajustes preestablecidos útiles para cualquier aplicación React que se haya creado con un marco como Next.js o Gatsby.  Puedes usar las páginas de Cloudflare para implementar casi cualquier tipo de aplicación React que se le ocurra.

Finalmente, podemos presionar el botón de despliegue.  El proceso de implementación tomará de cuatro a cinco minutos la primera vez.  Sé paciente, pero ten en cuenta que cualquier implementación posterior llevará mucho menos tiempo.

Vemos algunos registros útiles sobre la construcción de nuestro proyecto y el progreso de nuestra implementación.  Si hubiera un error en ese proceso, lo veríamos en los registros y obtendríamos alguna indicación de lo que necesitábamos arreglar.

Luego, para ver nuestro proyecto implementado, podemos presionar el botón Continuar al proyecto, presionar "Visitar sitio" y podemos ver nuestra aplicación ejecutándose en la URL: your-project-name.pages.dev.

Realiza cambios con implementaciones automáticas

Si bien fue muy fácil implementar instantáneamente nuestra aplicación React en la web después de que la enviamos a GitHub, el siguiente paso es realizar cambios en nuestra aplicación y volver a implementarla.

Como verás, esta funcionalidad de implementación automática (integración continua) ya se ha configurado.

En el caso de mi aplicación, decidí instalar React Router DOM para agregar una página de información.  En la página de inicio, también agregué un enlace a la página Acerca de:

Después de que termines de realizar ese cambio que puedes ver en el video de arriba, pasé por el mismo proceso de ejecutar git add ., git commit con un mensaje sobre los cambios que hice, y luego git push.

Después de hacerlo, si volvemos a nuestro panel de Cloudflare Pages, podemos ver que inmediatamente Cloudflare ha recogido esta nueva implementación porque está vinculada a nuestra cuenta de GitHub y puedes ver cualquier implementación o solicitud de extracción que se realizó a nuestro repositorio.

Como resultado, vuelve a implementar instantáneamente nuestra aplicación con los cambios que hicimos.  A medida que se lleva a cabo nuestra implementación, podemos presionar "View build" y podemos ver información específica sobre esta implementación, junto con los registros.

Como verás, cualquier cambio realizado después de la implementación inicial toma mucho menos tiempo (solo toma alrededor de un minuto en total para que la implementación finalice correctamente).  También verás que tiene su propio hash de implementación único al comienzo de nuestra URL.  Esto nos permite hacer referencia única a cada implementación.

Si eliminamos el hash, vemos que los cambios que hicimos también se implementan en el nombre de nuestro proyecto elegido: cloudflare-react.pages.dev.

Conclusión

Espero que este tutorial te muestre lo fácil que es comenzar con las nuevas páginas de Cloudflare.  Puedes comenzar a implementar tus aplicaciones React hoy para aprovechar su CDN global y todas las características adicionales que Cloudflare tiene para ofrecer.

Cloudflare Page todavía es un proyecto bastante nuevo, pero ya ofrecen muchas herramientas que vale la pena revisar.  Lo recomiendo encarecidamente como tu servicio de implementación para la próxima aplicación React que desees compartir con el mundo.

En este tutorial, creará una aplicación con React.  Y aprenderá a crear un componente de autosugestión verdaderamente reutilizable desde cero.

Esta aplicación permitirá al usuario buscar un país en una lista de países. Mostrará sugerencias coincidentes debajo del campo de entrada para el país que el usuario ha ingresado.

Al crear esta aplicación, aprenderá:

• Cómo crear un componente reutilizable.
• Cómo utilizar el useRef hook para administrar sugerencias automáticas.
• Cómo crear un hook reutilizable personalizado.
• Cómo realizar la búsqueda de manera eficiente.

y mucho más.

Puede encontrar la demostración en vivo de la aplicación final aquí.

A continuación se muestra la demostración funcional de la función de sugerencias automáticas.

Así que comencemos a construir la aplicación.

Configurar el proyecto

Usaremos create-react-app para inicializar el proyecto.

Usaremos la sintaxis de React Hooks para crear los componentes.

Crea un nuevo proyecto de React ejecutando el siguiente comando:

‌                   npx create-react-app react-autosuggestion-app              

Una vez que hayas creado el proyecto, elimina todos los archivos de la carpeta src y crea los archivos  index.js, App.js, styles.css dentro de la carpeta  src.

También crea las carpetas components y custom-hooks dentro de la carpeta  src.

Instala las dependencias necesarias ejecutando el siguiente comando desde la terminal o el símbolo del sistema:            

yarn add axios@0.21.1 lodash@4.17.21 react-bootstrap@1.6.1 bootstrap@5.1.0

Una vez instalados, abre el archivo src/styles.css y agrega el contenido de este archivo dentro de él.

Cómo construir las páginas iniciales

Crea un nuevo archivo countries.json dentro de la carpeta public  y agrega el contenido de este archivo dentro de ella.

Crea un archivo AutoComplete.js dentro de la carpeta components  con el siguiente código:  

import React from 'react';

function AutoComplete({ isVisible, suggestions, handleSuggestionClick }) {
  return (
    <div className={`${isVisible ? 'show suggestion-box' : 'suggestion-box'}`}>
      <ul>
        {suggestions.map((country, index) => (
          <li key={index} onClick={() => handleSuggestionClick(country)}>
            {country}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AutoComplete;

En este archivo, mostramos las sugerencias al usuario una vez que el usuario escribe algo en el cuadro de entrada de texto.

Crea un archivo useOutsideClick.js dentro de la carpeta custom-hooks  con el siguiente código:

import { useState, useRef, useEffect } from 'react';

const useOutsideClick = () => {
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef();

  const handleOutsideClick = () => {
    if (ref.current) {
      setIsVisible(false);
    }
  };

  useEffect(() => {
    document.addEventListener('click', handleOutsideClick);
    return () => {
      document.removeEventListener('click', handleOutsideClick);
    };
  }, []);

  return [ref, isVisible, setIsVisible];
};

export default useOutsideClick;

Aquí, hemos creado un hook personalizado que mostrará/ocultará el cuadro de sugerencias.

Inicialmente, hemos declarado un estado para ocultar el cuadro de sugerencias estableciendo el valor en false:

const [isVisible, setIsVisible] = useState(false);

Entonces hemos declarado un ref:            

const ref = useRef();

Estamos devolviendo este ref de nuestro hook personalizado junto con el isVisible y setIsVisible:

return [ref, isVisible, setIsVisible];

Entonces, dentro del componente donde sea que usemos el hook useOutsideClick, podemos usar esta ref para asignarla al buzón de sugerencias. Entonces, si hay varios campos de entrada, cada campo de entrada tendrá su propio cuadro de sugerencias y ocultará y mostrará la funcionalidad.

Dentro de la función handleOutsideClick, tenemos el siguiente código:

const handleOutsideClick = () => {
  if (ref.current) {
    setIsVisible(false);
  }
};

Aquí, estamos comprobando ref.current porque queremos llamar a la función setIsVisible solo si la ref del buzón de sugerencias está disponible y no cada vez que hacemos clic en la página.

Luego, hemos agregado manejador de eventos para llamar a la función handleOutsideClick:

useEffect(() => {
  document.addEventListener('click', handleOutsideClick);
  return () => {
    document.removeEventListener('click', handleOutsideClick);
  };
}, []);

También eliminaremos el manejador de eventos devolviendo una función del hook useEffect una vez que el componente está desmontado.

Cómo crear un componente React reutilizable

Ahora, crea un archivo InputControl.js dentro de la carpeta components  con el siguiente código:

/* eslint-disable react-hooks/exhaustive-deps */
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import _ from 'lodash';
import { Form } from 'react-bootstrap';
import AutoComplete from './AutoComplete';
import useOutsideClick from '../custom-hooks/useOutsideClick';

const InputControl = ({ name, label, placeholder }) => {
  const [documentRef, isVisible, setIsVisible] = useOutsideClick();
  const [suggestions, setSuggestions] = useState([]);
  const [selectedCountry, setSelectedCountry] = useState('');
  const [searchTerm, setSearchTerm] = useState('');
  const [errorMsg, setErrorMsg] = useState('');
  const ref = useRef();

  useEffect(() => {
    ref.current = _.debounce(processRequest, 300);
  }, []);

  function processRequest(searchValue) {
    axios
      .get('/countries.json')
      .then((response) => {
        const countries = response.data;
        const result = countries.filter((country) =>
          country.toLowerCase().includes(searchValue.toLowerCase())
        );
        setSuggestions(result);
        if (result.length > 0) {
          setIsVisible(true);
        } else {
          setIsVisible(false);
        }
        setErrorMsg('');
      })
      .catch(() => setErrorMsg('Something went wrong. Try again later'));
  }

  function handleSearch(event) {
    event.preventDefault();
    const { value } = event.target;
    setSearchTerm(value);
    ref.current(value);
  }

  function handleSuggestionClick(countryValue) {
    setSelectedCountry(countryValue);
    setIsVisible(false);
  }

  return (
    <Form.Group controlId="searchTerm">
      <Form.Label>{label}</Form.Label>
      <Form.Control
        className="input-control"
        type="text"
        value={searchTerm}
        name={name}
        onChange={handleSearch}
        autoComplete="off"
        placeholder={placeholder}
      />
      <div ref={documentRef}>
        {isVisible && (
          <AutoComplete
            isVisible={isVisible}
            suggestions={suggestions}
            handleSuggestionClick={handleSuggestionClick}
          />
        )}
      </div>
      {selectedCountry && (
        <div className="selected-country">
          Your selected country: {selectedCountry}
        </div>
      )}
      {errorMsg && <p className="errorMsg">{errorMsg}</p>}
    </Form.Group>
  );
};

export default InputControl;

En este archivo, hemos creado un componente reutilizable con búsquedas y sugerencias disponibles en el componente.

Inicialmente, estamos haciendo referencia al hook useOutsideClick:

const [documentRef, isVisible, setIsVisible] = useOutsideClick();

Estamos almacenando la ref devuelta por el hook en la variable documentRef.‌‌‌ Cada vez que un usuario escribe algo en el cuadro de texto, hacemos una llamada a la API para obtener una lista de países con los criterios de búsqueda coincidentes.

Pero para evitar las llamadas API innecesarias en cada carácter ingresado en el cuadro de texto, usaremos el método antirrebote de la biblioteca lodash.  Nos permite llamar a la API solo después de que hayan pasado 300 milisegundos una vez que el usuario haya dejado de escribir usando el siguiente código:

ref.current = _.debounce(processRequest, 300);

La función _.debounce llamada devuelve una función que hemos almacenado en la variable ref.current. Llamaremos a la función almacenada allí una vez que hayan pasado 300 milisegundos.

Estamos usando ref en lugar de una variable normal porque necesitamos que esta inicialización ocurra solo una vez cuando el componente está montado.  El valor de la variable normal se perderá en cada nueva renderización del componente cuando cambie algún estado o propiedad.

Estamos llamando a la función almacenada en ref.current desde la función handleSearch pasando el valor introducido por el usuario.

Entonces, una vez que llamamos a la función almacenada en ref.current, la función  processRequest será llamada detrás de escena.

La función processRequest recibirá automáticamente el valor pasado a la función ref.current.

Dentro de la función processRequest, hacemos una llamada API para obtener la lista de países.

function processRequest(searchValue) {
  axios
    .get('/countries.json')
    .then((response) => {
      const countries = response.data;
      const result = countries.filter((country) =>
        country.toLowerCase().includes(searchValue.toLowerCase())
      );
      setSuggestions(result);
      if (result.length > 0) {
        setIsVisible(true);
      } else {
        setIsVisible(false);
      }
      setErrorMsg('');
    })
    .catch(() => setErrorMsg('Something went wrong. Try again later'));
}

Aquí, una vez que tenemos la respuesta de la API, usamos el método de filtro del arreglo para filtrar solo los países que coinciden con el término de búsqueda proporcionado.

Luego, establecemos la lista de países en el estado de sugerencias usando setSuggestions(result).

A continuación, comprobamos la longitud del arreglo de resultados para mostrar u ocultar el cuadro de sugerencias.

Si verificas el JSX que devuelve el componente, se ve así:

return (
  <Form.Group controlId="searchTerm">
    <Form.Label>{label}</Form.Label>
    <Form.Control
      className="input-control"
      type="text"
      value={searchTerm}
      name={name}
      onChange={handleSearch}
      autoComplete="off"
      placeholder={placeholder}
    />
    <div ref={documentRef}>
      {isVisible && (
        <AutoComplete
          isVisible={isVisible}
          suggestions={suggestions}
          handleSuggestionClick={handleSuggestionClick}
        />
      )}
    </div>
    {selectedCountry && (
      <div className="selected-country">
        Your selected country: {selectedCountry}
      </div>
    )}
    {errorMsg && <p className="errorMsg">{errorMsg}</p>}
  </Form.Group>
);

Aquí, para el cuadro de texto de entrada, hemos agregado un manejador handleSearch onChange que se ve así:

function handleSearch(event) {
  event.preventDefault();
  const { value } = event.target;
  setSearchTerm(value);
  ref.current(value);
}

Actualizamos el estado de searchTerm con el valor escrito por el usuario. Entonces llamamos a la función almacenada en el  ref.current pasándole el valor que ingresa el usuario.

Llamar a ref.current internamente llama a la función processRequest donde en realidad llamamos a la API.

Luego, después del cuadro de texto de entrada, hemos agregado un div con la ref para mostrar las sugerencias:

<div ref={documentRef}>
  {isVisible && (
    <AutoComplete
      isVisible={isVisible}
      suggestions={suggestions}
      handleSuggestionClick={handleSuggestionClick}
    />
  )}
</div>

Solo mostramos sugerencias si isVisible es true, lo que sucede cuando obtenemos resultados de la API dentro de la función  processRequest.

Aquí, pasamos las sugerencias para que se muestren en el componente AutoComplete.‌‌ Una vez que hagamos clic en cualquiera de las sugerencias, la función handleSuggestionClick se ejecuta que está actualizando el selectedCountry y escondiendo las sugerencias:

function handleSuggestionClick(countryValue) {
  setSelectedCountry(countryValue);
  setIsVisible(false);
}

Cómo utilizar el componente reutilizable

Ahora, abre el archivo App.js y agrega el siguiente código dentro de él:

import React from 'react';
import { Form } from 'react-bootstrap';
import InputControl from './components/InputControl';

const App = () => {
  return (
    <div className="main">
      <h1>React AutoSuggestion Demo</h1>
      <div className="search-form">
        <Form>
          <InputControl
            name="country"
            label="Enter Country"
            placeholder="Type a country name"
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

Ahora, inicia la aplicación ejecutando el siguiente comando desde la terminal o el símbolo del sistema:

yarn start

Como puedes ver, una vez que selecciona cualquier valor de la sugerencia, el valor seleccionado se muestra debajo del cuadro de texto.

Nota: hemos creado un componente InputControl separado que muestra el campo de entrada junto con su cuadro de sugerencias.

Entonces podemos reutilizar el mismo componente InputControl nuevamente para mostrar sugerencias en otro cuadro de texto de entrada como se muestra a continuación:

import React from 'react';
import { Form } from 'react-bootstrap';
import InputControl from './components/InputControl';

const App = () => {
  return (
    <div className="main">
      <h1>React AutoSuggestion Demo</h1>
      <div className="search-form">
        <Form>
          <InputControl
            name="country"
            label="Enter Country"
            placeholder="Type a country name"
          />
          <InputControl
            name="country"
            label="Enter Country"
            placeholder="Type a country name"
          />
        </Form>
      </div>
    </div>
  );
};

export default App;

‌                                      

Como puedes ver, hemos agregado otro componente InputControl  para el país, por lo que podemos manejar la sugerencia para cada cuadro de texto de entrada por separado.

Entonces, si deseas mostrar diferentes sugerencias para otro cuadro de texto, puedes pasar un accesorio adicional al componente InputControl y con base en ese apoyo, muestre diferentes resultados en el buzón de sugerencias.

Conclusión

Como hemos visto en este tutorial, al crear un componente reutilizable InputControl y usando ref para administrar la sugerencia de cada cuadro de texto de entrada por separado, podemos crear un componente realmente reutilizable para mostrar sugerencias de autocompletar.

Puedes encontrar el código fuente completo para este tutorial en este repositorio y la demostración en vivo aquí.

¡Gracias por leer!

¿Quiere mantenerse actualizado con el contenido regular sobre JavaScript, React, Node.js? Sígueme en LinkedIn.

JavaScript tiene dos estructuras de datos impresionantes que te ayudan a escribir código limpio y eficiente.  Pero su manejo puede resultar complicado a veces.

En este blog, le mostraré cómo manejar la desestructuración en arreglos y objetos en JavaScript.  También aprenderemos a usar el operador de propagación.

Vamos a sumergirnos.

¿Qué es la desestructuración de arreglos en JavaScript?

Digamos que tenemos un arreglo que contiene cinco números, como este:

let array1 = [1, 2, 3, 4, 5]

Para obtener los elementos del arreglo, podemos hacer algo como obtener el número de acuerdo con sus índices:

array1[0];
array1[1];
array1[2];
array1[3];
array1[4];

Pero este método es antiguo y torpe, y hay una mejor manera de hacerlo: utilizando la desestructuración de arreglos.  Se parece a esto:

let [ indexOne, indexTwo, indexThree, indexFour, indexFive ] = array1;

Ambos métodos anteriores producirán el mismo resultado:

Ahora, tenemos cinco elementos en el arreglo y los imprimimos.  Pero, ¿qué pasa si queremos omitir un elemento intermedio?

let [ indexOne, indexTwo, , indexFour, indexFive ] = arreglo1;

Aquí, nos hemos saltado indexThird, y hay un espacio vacío entre indexTwo e indexFour.

let [ indexOne, indexTwo, , indexFour, indexFive ] = array1;

console.log(indexOne);
console.log(indexTwo)
console.log(indexFour)
console.log(indexFive)

Puede ver que no obtenemos el tercer elemento porque lo hemos configurado como vacío.

¿Qué es la Desestructuración de Objetos en JavaScript?

Esta desestructuración también funciona bien con objetos.  Déjame darte un ejemplo.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 200,
    height: '20 meters',
    weight: '70 KG'
}

Digamos que queremos que el nombre (name), el salario (salary) y el peso (weight) de este objeto se impriman en la consola.

console.log(object.name)
console.log(object.salary)
console.log(object.weight)

Podemos obtenerlos usando las claves, que son el nombre, el salario y el peso.

Pero este código a veces se vuelve difícil de entender.  Ahí es cuando la desestructuración es útil:

let { name, salary, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)

Y ahora, podemos simplemente registrar el nombre, el salario y el peso en lugar de usar ese método antiguo.

También podemos usar la desestructuración para establecer valores predeterminados si el valor no está presente en el objeto.

let object = {
    name: "Nishant",
    age: 24, 
    height: '20 meters',
    weight: '70 KG'
}

let { name, salary, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)

Aquí, tenemos nombre y el peso presentes en el objeto, pero no el salario:

Obtendremos un valor indefinido para el salario.

Para corregir ese problema, podemos establecer valores predeterminados cuando estamos desestructurando el objeto.

let object = {
    name: "Nishant",
    age: 24, 
    height: '20 meters',
    weight: '70 KG'
}

let { name, salary = 200, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)

Puedes ver que obtenemos 200 como salario.  Esto solo funciona cuando no tenemos esa clave en el objeto y queremos establecer un valor predeterminado.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

let { name, salary = 200, weight } = object;

console.log(name)
console.log(salary)
console.log(weight)

Agregue salario en el objeto y obtendrá 300 como salario.

Cómo utilizar la desestructuración de objetos con funciones

Digamos que tenemos una función que imprime todos los datos del arreglo en la consola.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

function printData(){
    
}

printData(object)

Pasamos el objeto como parámetro en la función cuando se llama:

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

function printData(object){
    console.log(object)
}

printData(object)

Normalmente, haríamos algo como esto: pasar el objeto y registrarlo en la consola.

Pero, de nuevo, podemos hacer lo mismo utilizando la desestructuración.

let object = {
    name: "Nishant",
    age: 24, 
    salary: 300,
    height: '20 meters',
    weight: '70 KG'
}

function printData({name, age, salary, height, weight}){
    console.log(name, age, salary, height, weight)
}

printData(object)

Aquí, estamos desestructurando el objeto en nombre, edad, salario, altura y peso en los parámetros de la función e imprimimos todo en la misma línea.

Puede ver cómo la desestructuración hace que sea mucho más fácil de entender.

Veamos un último ejemplo.

function sample(a, b) {
    return [a + b, a * b]
}

let example = sample(2, 5);
console.log(example)

Aquí tenemos una función que acepta dos números.  Devuelve un arreglo agregándolos y multiplicándolos y los registra en la consola.

Usemos la desestructuración aquí en su lugar.

Podemos desestructurarlo en variables de suma y multiplicación como esta:

let [addition, multiplication] = sample(2, 5);
console.log(addition)
console.log(multiplication)

Y en la salida, puede ver que obtenemos la suma y la multiplicación de ambos números.

¿Qué es el operador de propagación (Spread) en JavaScript?

Propagación significa esparcirse o expandirse.  Y el operador de propagación en JavaScript se indica con tres puntos.

Este operador de propagación tiene muchos usos diferentes.  Veámoslos uno por uno.

Ejemplos de operador de propagación

Digamos que tenemos dos arreglos y queremos fusionarlas.

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = array1.concat(array2);
console.log(array3)

Obtenemos la combinación de ambas arreglos, que son array1 y array2.

Pero hay una forma más sencilla de hacer esto:

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, 8, 9, 10]

let array3 = [...array1, ...array2]
console.log(array3)

En este caso, estamos usando el operador de propagación para fusionar ambos arreglos.

Y como puede ver, obtendremos el mismo resultado.

Imaginemos otro caso de uso en el que tenemos que insertar array1 entre los elementos de array2.

Por ejemplo, queremos insertar array2 entre el segundo y tercer elemento de array1.

¿Entonces cómo hacemos eso?  Podemos hacer algo como esto:

let array1 = [1, 2, 3, 4, 5]
let array2 = [6, 7, ...array1, 8, 9, 10]

console.log(array2);

Y puede ver, obtenemos los elementos array1 entre 7 y 8.

Ahora, fusionemos dos objetos usando el operador de propagación.

let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}

Tenemos dos objetos aquí.  Uno contiene nombre, edad y salario.  El segundo contiene apellido, altura y peso.

Vamos a fusionarlos juntos.

let object1 = {
    firstName: "Nishant",
    age: 24, 
    salary: 300,
}

let object2 = {
    lastName: "Kumar",
    height: '20 meters',
    weight: '70 KG'
}

let object3 = {...object1, ...object2}
console.log(object3);

Ahora hemos combinado ambos objetos usando el operador de propagación y hemos registrado el valor en la consola.

Puedes ver que estamos obteniendo la combinación de ambos objetos

Por último, también podemos copiar un arreglo en otro utilizando el operador de propagación.  Déjame mostrarte como funciona:

let array1 = [1, 2, 3, 4, 5]
let array2 = [...array1]
console.log(array2);

Aquí, estamos copiando array1 en array2 usando el operador de propagación.

Estamos registrando array2 en la consola, y estamos obteniendo los elementos de array1.

Conclusión

¡Eso es todo amigos!  En este artículo, aprendimos sobre la desestructuración de arreglos y objetos y el operador de propagación propagación.

También puedes ver mi video de Desestructuración de arreglos y objetos y el operador de propagación en Youtube (en ingles) si quieres complementar tu aprendizaje.

Feliz aprendizaje.

Microsoft Excel incluye una variedad de funciones diferentes que ayudan a los usuarios con cálculos de cualquier tipo.  La funcionalidad de Excel es tan completa que los usuarios promedio ni siquiera aprovechan la mayoría de las utilidades.

Sin embargo, si a menudo se desplaza por las columnas y filas en busca de la misma información, es probable que aprecie la función VLOOKUP. VLOOKUP, que significa "búsqueda vertical", puede ayudarlo a encontrar rápidamente los datos asociados con un determinado valor que ingrese.

Por ejemplo, puede tener una tabla que contenga productos con ID y precios únicos.  VLOOKUP puede mostrarle el precio de un determinado producto si ingresa su ID.

Puede usar VLOOKUP de muchas formas diferentes y simplificará significativamente su trabajo, especialmente cuando se trata de tablas grandes.

No necesita perder mucho tiempo buscando una celda determinada porque esta función la encontrará por usted.  Sin embargo, los usuarios principiantes a menudo tienen dificultades para configurar VLOOKUP.  Por lo tanto, decidí ayudarlo preparando esta guía detallada.

Qué es VLOOKUP?

En primer lugar, VLOOKUP es una función.  Por lo tanto, si es nuevo en Excel, es posible que desee familiarizarse con algunas funciones básicas, como AVERAGE, SUM o TODAY.  De esta forma le resultará fácil comprender cómo funciona esta función.

VLOOKUP es una función de base de datos, por lo que está diseñada para tablas de base de datos.  Estas tablas son básicamente listas de diferentes elementos.  Por ejemplo, puede utilizar esta función cuando trabaje con listas de productos, empleados, clientes, etc.

Digamos que tiene una lista de productos que consta de cuatro columnas. Puede incluir el código del artículo en la primera columna, el nombre o descripción del producto en la segunda columna y el precio y la cantidad de artículos disponibles en stock en la tercera y cuarta columnas, respectivamente.

Las tablas de la base de datos suelen tener algún tipo de identificador único para cada elemento.  En este caso, es el código del artículo. Esta columna es necesaria para que funcione la función VLOOKUP y debe ser la primera columna de su tabla.

Si es un principiante, lo primero que debe hacer es comprender qué hace exactamente VLOOKUP.  En pocas palabras, muestra información de una lista o base de datos basada en el identificador único ingresado por el usuario.

Si consideramos el ejemplo anterior, esta función podría mostrar el precio, la descripción o la disponibilidad de un producto en función de su código de artículo.  Lo que mostrará exactamente depende de la fórmula que escriba.  VLOOKUP admite coincidencias tanto exactas como aproximadas, así como comodines para coincidencias parciales.

Cómo funciona VLOOKUP

Aquí está la sintaxis de las fórmulas que describen la función VLOOKUP:

=VLOOKUP(value, table, column_index, [range])

• value es lo que buscará esta función en la primera columna.
• table es la tabla de la que la función recuperará la información necesaria.
• column_index es el número de la columna de la que la función recuperará la información.
• range es un parámetro booleano que puede ser TRUE o FALSE.  TRUE  es el valor predeterminado y corresponde a la coincidencia aproximada. FALSE le mostrará solo coincidencias exactas.

Incluso el nombre de esta función incluye "vertical", y VLOOKUP solo está destinado a tablas donde los datos están organizados en columnas verticales.  Por lo tanto, si está organizando sus datos horizontalmente, esta función será inútil.  En este caso, puede utilizar una función similar para la búsqueda horizontal — HLOOKUP.

También debe tener en cuenta que esta función solo funciona de izquierda a derecha.  En otras palabras, si el identificador único no está en la primera columna de su tabla, la función no podrá recuperar información de las columnas a la izquierda del identificador.

Cada columna tiene su número y todas las columnas están numeradas de izquierda a derecha.  Si desea obtener un valor de una determinada columna, debe especificar su número en su fórmula.  En la plantilla de fórmula anterior, este número se llama column_index.

Por ejemplo, si desea recuperar el nombre del producto del ejemplo anterior, el índice de la columna debe ser 2.

Como ya mencioné anteriormente, la función VLOOKUP admite dos modos de coincidencia: aproximado y exacto.  Este parámetro es el cuarto argumento de la fórmula.  La coincidencia aproximada se establece de forma predeterminada.  Si desea elegir la coincidencia exacta, debe establecer el rango de búsqueda en FALSE.

Por lo tanto, las dos fórmulas siguientes recuperarán datos utilizando una coincidencia aproximada:

=VLOOKUP(value, table, column_index)

=VLOOKUP(value, table, column_index, TRUE)

Como puede ver, si desea utilizar el modo de coincidencia exacta, debe tener cuidado.  Si no proporciona ningún valor de rango de búsqueda, la función seguirá usando el modo de coincidencia aproximado.

La siguiente fórmula forzará el modo de coincidencia exacta:

=VLOOKUP(value, table, column_index, FALSE)

Asegúrese de establecer el valor en  FALSE i va a utilizar el modo de coincidencia exacta.  Lo más probable es que necesite una coincidencia exacta en la mayoría de los casos, por lo que si es nuevo en Excel, no se olvide de este detalle.

La coincidencia exacta es la elección correcta si tiene una columna con el identificador del artículo.  También puede ser cualquier valor único que se pueda utilizar para una búsqueda exacta.  Por ejemplo, puede ser un título único de un libro o una película, así como cualquier otra palabra clave única.  Tenga en cuenta que VLOOKUP no distingue entre mayúsculas y minúsculas.

Sin embargo, a veces es posible que no necesite la coincidencia exacta, sino la mejor coincidencia posible.  En este caso, puede utilizar el modo de coincidencia aproximada.

Por ejemplo, puede usar este modo cuando se trata de tablas de datos donde la información necesaria corresponde a ciertos valores numéricos y desea recuperar resultados para un valor que no está incluido en la tabla.

Puede utilizar este enfoque al realizar cálculos basados ​​en los datos existentes.  Si ingresa un valor y la función encuentra la coincidencia exacta, recuperará información de la fila correspondiente.  Sin embargo, si no hay una coincidencia exacta en la tabla, la función coincidirá con la fila anterior.

¿Por qué coincidiría con la fila anterior y no con otra?  Bueno, no lo hará si no organiza su mesa de la manera correcta.  Para permitir que VLOOKUP busque el mejor valor aproximado, debe asegurarse de que todos los valores de esta columna estén ordenados en orden ascendente.  En este caso, la función simplemente retrocederá y recuperará el valor más cercano.

Errores #N/A

Al usar la función VLOOKUP, así como muchas otras funciones en Excel, a menudo puede obtener errores # N/A.  Este error significa que no se encontró el valor.

Puede obtener este error por varias razones.  Estos son algunos de los casos más comunes:

• Ha escrito mal el valor o ha añadido un espacio extra.
• El valor necesario no existe en la tabla.
• Está utilizando el modo de coincidencia exacta cuando busca un valor aproximado.
• No ha introducido el rango de tabla correcto.
• Ha copiado VLOOKUP mientras la referencia de la tabla no está bloqueada.

Si su tabla tiene una referencia absoluta, significa que las filas y columnas no cambiarán si se copian.  Sin embargo, este no es el caso con una referencia relativa. En este caso, deberá cambiar a la referencia absoluta.

Puede personalizar el texto del error #N/A utilizando la función IFNA.  En este caso, debe escribir una fórmula más larga con IFNA que incluya VLOOKUP.

A continuación, se muestra un ejemplo de una fórmula que devolverá "no encontrado" en lugar de #N/A:

=IFNA(VLOOKUP(value, table, column_index, FALSE), "not found")

Y aquí hay una fórmula que devolverá un resultado en blanco:

=IFNA(VLOOKUP(value, table, column_index, FALSE), "")

Aunque puede personalizar el mensaje, puede considerar usar el error #N/A porque atraerá su atención de inmediato y le informará si algo sale mal.

Cómo utilizar VLOOKUP

Puede escribir fórmulas desde cero o también puede usar el menú de Excel.  Seleccione la celda donde desea mostrar el resultado y luego seleccione la pestaña "Fórmulas".

Después de esto, haga clic en "Insertar función".  Verá un cuadro donde puede seleccionar categorías de funciones y elegir la función VLOOKUP. También puede usar el cuadro "Buscar una función" e ingresar "vlookup"

Seleccione la función y aparecerá el cuadro “Argumento de función”. Aquí puede ingresar los parámetros necesarios de la función.  En esta ventana, debe especificar el identificador único que está buscando, la ubicación de la base de datos y la información que corresponde al identificador que desea recuperar.

Estos argumentos son "Lookup_value", "Table_array" y "Col_index_num". Estos campos están escritos en negrita porque estos argumentos son obligatorios.

El cuarto argumento es para el modo de búsqueda, y puede o no especificarlo.  El modo aproximado está configurado de forma predeterminada.

O ingrese el primer argumento, que es el identificador único, puede seleccionar la celda necesaria y presionar Enter.  En este caso, el valor de esta celda se ingresará automáticamente como el primer argumento de la función VLOOKUP.

Ahora debes ingresar el segundo argumento.  La base de datos no debe comenzar necesariamente en la esquina superior izquierda.  Por ejemplo, también puede tener una fila que describa columnas, que sirve como encabezado.

“Una de las mejores cosas de la función BUSCARV es que la ubicación de la base de datos también se puede personalizar”, señala Bridget Allen, contadora de Best Writers Online.

Dado que VLOOKUP solo funciona con números de columnas, debe especificar qué área de la tabla desea usar para la búsqueda.  Para esto es el cuadro "Table_array".

Por ejemplo, si su tabla comienza en la esquina superior izquierda y su primera fila es un encabezado, puede seleccionar toda la base de datos sin la primera línea.  Si su base de datos tiene cuatro columnas (AD) y cinco elementos, la matriz de la tabla será A2: D6, porque las celdas A1-D1 contendrán el encabezado.

Puede hacer clic en la pestaña de la hoja de trabajo necesaria y seleccionar el área con la base de datos.  Presione Entrar y el rango de celdas seleccionado se agregará automáticamente al segundo argumento de la función VLOOKUP.  Aquí hay un ejemplo de un argumento de función:

‘database_name’!A2:D6

En este caso, "database_name" es el nombre de la pestaña de la hoja de trabajo.

Ahora solo necesita especificar qué información desea recuperar y proporcionar el número de la columna necesaria.

Por ejemplo, si desea recuperar el precio de un artículo de la tabla al principio de este artículo, debe usar la tercera fila y el valor "Col_index_num" será 3.

Para terminar

Microsoft Excel tiene una amplia variedad de funciones que pueden ayudar a los usuarios a lidiar con diferentes cálculos y otras tareas. VLOOKUP es una función muy útil que puede recuperar información que corresponde a un cierto valor de una tabla de base de datos.

Si es nuevo en Excel, puede experimentar dificultades con esta función porque tiene cuatro argumentos.

Sin embargo, si sigue nuestra guía, podrá seleccionar los argumentos correctos y utilizar las fórmulas correctas.  Si usa esta función varias veces en la práctica, comprenderá rápidamente cómo funciona, por lo que podrá usar VLOOKUP siempre que lo necesite.

Se considera una buena práctica tener tus hojas de estilo CSS en un archivo externo.  Entonces, ¿cómo puedes vincular ese CSS a tu archivo HTML?

La vinculación a un archivo CSS externo es una parte importante de cualquier modelo de página HTML. Y en este artículo, aprenderemos cómo hacerlo.

Cómo vincular un archivo CSS a un archivo HTML

Puedes vincular tu archivo CSS a tu archivo HTML agregando un elemento link dentro del head de tu archivo HTML, así:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" src="style.css">
    </head>
    <body>
    
    </body>
</html>

El elemento link tiene muchos usos, y es importante especificar los atributos correctos para que puedas usarlo para importar una hoja de estilo CSS externa. Veamos algunos atributos importantes ahora.

El atributo rel

El primero de los dos atributos indispensables es el atributo rel. Utilizarás este atributo para indicarle al navegador cuál es la relación con el archivo importado.

Escribirás rel="stylesheet" para decirle al navegador que está importando una hoja de estilo.

El atributo src

El segundo atributo indispensable es el src, que especifica el archivo a importar.

Una situación común es que el archivo CSS y el archivo HTML estén en la misma carpeta. En tal caso, puedes escribir src="style.css".

Si el archivo CSS y el archivo HTML están en carpetas diferentes, debes escribir el archivo correcto que debe pasar del archivo HTML al archivo CSS.

Por ejemplo, una situación común es que el archivo CSS está en una carpeta que es hermana del archivo HTML, así:

proyecto --- index.html
            css ---------- style.css

En este caso, necesitarás escribir una ruta como "css/styles.css".

El atributo type

<link rel="stylesheet" src="style.css" type="text/css">

Usas el atributo type para definir el tipo de contenido al que está enlazando. Para un archivo CSS, esto será text/css. Pero css es el único lenguaje de hoja de estilo que se utiliza en la web, no solo es opcional, sino que incluso es una buena práctica no incluirlo.

El atributo media

<link rel="stylesheet" src="style.css" media="screen and (max-width: 600px)">

El atributo de medios no es visible en el ejemplo.  Es un atributo opcional que puedes usar para especificar cuándo importar una determinada hoja de estilo. Su valor debe ser una media type / media query (tipo de medio / consulta de medios).

Esto puede resultar útil en caso de que desees separar los estilos para diferentes dispositivos y tamaños de pantalla en diferentes archivos. Debería importar cada archivo CSS con su propio elemento link.

Conclusión

En este artículo, has aprendido cómo agregar una hoja de estilo externa a tu página web usando el elemento link  y los atributos rel  src.

También aprendiste que puedes importar varias hojas de estilo y utilizar el atributo media para determinar cuándo se debe aplicar cada uno.

¡Diviértete creando páginas web!