¿Qué es una promesa?

Una promesa de JavaScript es un objeto que representa la finalización o falla de una tarea asíncrona y su valor resultante.¹

El fin.

Estoy bromeando, por supuesto. Entonces, ¿qué significa esa definición?

En primer lugar, muchas cosas en JavaScript son objetos. Puedes crear un objeto de diferentes maneras. La forma más común es con sintaxis literal de objeto:

const miCarro = {
   color: 'azul',
   tipo: 'sedán',
   puertas: '4',
};

También puedes crear un class e instanciarla con la palabra clave new.

class Carro {
   constructor(color, tipo, puertas) {
      this.color = color;
      this.tipo = tipo;
      this.puertas = puertas
   }
}

const miCarro = new Carro('azul', 'sedán', '4');

console.log(miCarro);

Una promesa es simplemente un objeto como el que creamos con el último ejemplo. Lo instanciamos con la palabra clave new. En lugar de los tres parámetros que pasamos para hacer nuestro auto (color, tipo y puertas), pasamos una función que toma dos argumentos: resolve y reject.

En última instancia, las promesas nos dicen algo sobre la finalización de la función asíncrona de la que la devolvimos–si funcionó o no. Decimos que la función tuvo éxito al decir que la promesa se resolvió, y que no tuvo éxito al decir que la promesa se rechazó.

const myPromesa = new Promesa(function(resolve, reject) {});

console.log(myPromesa);

const myPromesa = new Promesa(function(resolve, reject) {
   resolve(10);
});

Vez, no es demasiado aterrador, solo un objeto que creamos. Y, si lo ampliamos un poco:

Además, podemos pasar cualquier cosa que nos gustaría a resolve y reject. Por ejemplo, podríamos pasar un objeto en lugar de una cadena:

return new Promesa((resolve, reject) => {
   if(algoExitosoPasó) {
      const objetoDeÉxito = {
         msg: 'Éxito',
         data,//...algunos datos que obtuvimos
      }
      resolve(objetoDeÉxito); 
   } else {
      const objetoDeError = {
         msg: 'Ocurrió un error',
         error, //...algún error que recibimos
      }
      reject(objetoDeError);
   }
});

O, como vimos antes, no tenemos que pasar nada:

return new Promesa((resolve, reject) => {
   if(algoExitosoPasó) {
      resolve()
   } else {
      reject();
   }
});

¿Qué pasa con la parte "asincrónica" de la definición?

JavaScript es de un solo subproceso. Esto significa que solo puede ejecutar una cosa a la vez. Si puedes imaginar una carretera, puedes pensar en JavaScript como una autopista de un solo carril. Cierto código (código asíncrono) puede deslizarse hacia el hombro para permitir que otro código lo pase. Cuando se realiza ese código asíncrono, vuelve a la carretera.

Como nota al margen, podemos devolver una promesa desde cualquier función. No tiene que ser asíncrono. Dicho esto, las promesas normalmente se devuelven en los casos en que la función de la que devuelven es asíncrona. Por ejemplo, un API que tiene métodos para guardar datos en un servidor sería un gran candidato para devolver una promesa.

La conclusión:

Las promesas nos brindan una forma de esperar a que se complete nuestro código asíncrono, capturar algunos valores de él y pasar esos valores a otras partes de nuestro programa.

¿Cómo usamos una promesa?

El uso de una promesa también se llama consumir una promesa. En nuestro ejemplo anterior, nuestra función devuelve un objeto de promesa. Esto nos permite usar el encadenamiento de métodos con nuestra función.

Aquí hay un ejemplo de encadenamiento de métodos que apuesto a que no has visto:

const a = 'Una cadena impresionante';
const b = a.toUpperCase().replace('CA', '').toLowerCase();

console.log(b); // una dena impresionante

Ahora, recuerda nuestra (pretendida) promesa:

const algoFueExitoso = true;

function algunaFunciónAsíncrona() {
   return new Promesa((resolve, reject){
      if (algoFueExitoso) {
         resolve();     
      } else {
         reject()
      }
   });
}

Y, consumiendo nuestra promesa usando el encadenamiento de métodos:

algunaFunciónAsíncrona
   .then(ejecutarUnaFunciónSiSeResuelve(conElValorResuelto))
   .catch(oEjecutarUnaFunciónSiEsRechazada(conElValorRechazado));

Un ejemplo (más) real.

Imagina que tienes una función que obtiene usuarios de una base de datos. He escrito una función de ejemplo en Codepen que simula una API que podrías usar. Proporciona dos opciones para acceder a los resultados. Uno, puede proporcionar una función de retrollamada donde puede acceder al usuario o cualquier error. O dos, la función devuelve una promesa como una forma de acceder al usuario o error.

Tradicionalmente, accederíamos a los resultados del código asíncrono mediante el uso de retrollamadas.

rr algoDeBaseDeDatos(talVezUnID, function(err, result)) {
   //...Una vez que recuperemos la cosa de la base de datos...
   if(err) {
      hacerAlgoConElError(error)
   }   else {
      hacerAlgoConLosResultados(results);
   }
}

El uso de retrollamada está bien hasta que se anidan demasiado. En otras palabras, tiene que ejecutar más código asincrónico con cada nuevo resultado. Este patrón de retrollamada dentro de las retrollamadas puede conducir a algo conocido como "infierno de retrollamada".

Las promesas nos ofrecen una forma más elegante y legible de ver el flujo de nuestro programa.

hazAlgo()
   .then(hacerAlgoMás) // y si no te importa
   .catch(cualquierErrorPorFavor);

Escribiendo nuestra propia promesa: Ricitos de Oro, los Tres Osos y una Supercomputadora

Imagina que encuentras un plato de sopa. Te gustaría saber la temperatura de esa sopa antes de comerla. No te quedan termómetros, pero por suerte tienes acceso a una supercomputadora que te dice la temperatura del plato de sopa. Desafortunadamente, esta supercomputadora puede tardar hasta 10 segundos en obtener los resultados.

Aquí hay un par de cosas para notar.

1. Iniciamos una variable global llamado result.
2. Simulamos la duración del retraso de la red con Math.random() y setTimeout().
3. Simulamos una temperatura con Math.random().
4. Mantenemos los valores de retardo y temperatura confinados dentro de un rango agregando algunas "matemáticas" adicionales. El rango de temp es de 1 a 300; el rango de delay es de 1000 ms a 10000 ms (1s a 10 segundos).
5. Registramos el retraso y la temperatura para tener una idea de cuánto tiempo llevará esta función y los resultados que esperamos ver cuando esté lista.

Ejecute la función y registre los resultados.

getTemperature(); 
console.log(results); // undefined (indefinido)

La temperatura no está definida. ¿Qué pasó?

La función tardará un cierto tiempo en ejecutarse. El variable no se establece hasta que finaliza el retraso. Entonces, mientras ejecutamos la función, setTimeout es asíncrono. La parte del código en setTimeout sale del subproceso principal hacia un área de espera.

Dado que la parte de nuestra función que establece el variable de result se mueve a un área de espera hasta que finaliza, nuestro analizador puede pasar a la siguiente línea. En nuestro caso, es nuestro console.log(). En este punto, el result aún no está definido, ya que nuestro setTimeout no ha terminado.

Entonces, ¿qué más podríamos intentar? Podríamos ejecutar getTemperature() y luego esperar 11 segundos (ya que nuestro retraso máximo es de diez segundos) y luego console.log los resultados.

getTemperature();
   setTimeout(() => {
      console.log(result); 
   }, 11000);
   
// Too Hot | Delay: 3323 | Temperature: 209 deg

Esto funciona, pero el problema con esta técnica es que, aunque en nuestro ejemplo conocemos el retraso máximo de la red, en un ejemplo de la vida real, en ocasiones puede tardar más de diez segundos. Y, aunque pudiéramos garantizar un retraso máximo de diez segundos, si el resultado está listo antes, estamos perdiendo el tiempo.

Promesas al Rescate

Vamos a refactorizar nuestra función getTemperature() para devolver una promesa. Y en lugar de establecer el resultado, rechazaremos la promesa a menos que el resultado sea "Exacto", en cuyo caso resolveremos la promesa. En cualquier caso, pasaremos algunos valores para resolver y rechazar.

Ahora podemos usar los resultados de nuestra promesa que estamos devolviendo (también conocido como consumir la promesa).

getTemperature()
   .then(result => console.log(result))
   .catch(error => console.log(error));
   
// Reject: Too Cold | Delay: 7880 | Temperature: 43 deg

.then será llamado cuando nuestra promesa se resuelva y devolverá cualquier información que pasemos a resolve.

Se llamará a .catch cuando nuestra promesa se rechace y devolverá cualquier información que pasemos al reject.

Lo más probable es que consumas más promesas de lo que las creas. En cualquier caso, ayudan a que nuestro código sea más elegante, legible y eficiente.

Resumen

1. Las promesas son objetos que contienen información sobre la finalización de algún código asíncrono y los valores resultantes que queremos pasar.
2. Para devolver una promesa usamos return new Promise((resolve, reject)=> {})
3. Para consumir una promesa usamos .then para obtener la información de una promesa que se ha resuelto y .catch para obtener la información de una promesa que se ha rechazado.
4. Probablemente, usarás (consumirás) promesas más de lo que escribirás.

Referencias

1.)https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise

¿Te gustaría hablar con un chatbot que hable como tu personaje favorito, ficticio o no? ¡Construyamos uno!

En caso de que hayas visto mi tutorial anterior sobre este tema, quédese conmigo, ya que esta versión presenta muchas actualizaciones.

Puedes seguir este tutorial usando el código en mi GitHub:

GitHub - RuolinZheng08/twewy-discord-chatbot: Discord AI Chatbot using DialoGPT, trained on the game transcript of The World Ends With You

Discord AI Chatbot using DialoGPT, trained on the game transcript of The World Ends With You - GitHub - RuolinZheng08/twewy-discord-chatbot: Discord AI Chatbot using DialoGPT, trained on the game t...

GitHubRuolinZheng08

Si lo desea, puede sumergirse directamente en mi videotutorial en YouTube, o seguir leyendo para obtener más detalles. ?

Qué Esperar de este Tutorial

Aquí hay un ejemplo del chatbot Discord AI que habremos creado al final de este tutorial.

Mi proyecto de chatbot comenzó como una broma con un amigo cuando jugábamos videojuegos.

Honestamente, estoy sorprendido por lo popular que se volvió - hubo 5900 vistas de mi tutorial anterior, además, cuando implementé mi bot en un servidor de más de 1000 usuarios, la gente lo inundó con más de 300 mensajes en una hora, colapsando efectivamente el bot. ?

Dado que mucha gente está interesada en construir sus propios bots basados en sus personajes favoritos, actualicé mi tutorial para incluir una explicación detallada sobre cómo recopilar datos de texto para cualquier personaje, ficticio o no ficticio.

¡También puedes crear un conjunto de datos personalizado que capture el discurso entre usted y sus amigos y crear un chatbot que hable como usted!

Otras actualizaciones en este tutorial abordan los cambios en los servicios de alojamiento de modelos de Hugging Face, incluidos los cambios de API que afectan la forma en que empujamos el modelo a los repositorios de modelos de Hugging Face.

Esquema de este Tutorial

La versión de video de este tutorial tiene una duración total de una hora y presenta los siguientes temas:

1. Reúne datos de texto para su personaje utilizando uno de estos dos métodos: busque conjuntos de datos prefabricados en Kaggle o cree conjuntos de datos personalizados a partir de transcripciones sin procesar.
2. Entrena el modelo en Google Colab, un entorno de Jupyter Notebook basado en la nube con GPU gratuitas.
3. Implementa el modelo en Hugging Face, un servicio de hospedaje de modelos de AI.
4. Crea un bot de Discord en Python o JavaScript, ¡usted elige! ?
5. Configure los permisos del bot de Discord para que no envíe spam a los canales que no son bots
6. Aloja el bot en Repl.it.
7. Mantenga el bot funcionando indefinidamente con Uptime Robot.

Para saber más sobre cómo crear bots de Discord, también te pueden resultar útiles este post de freeCodeCamp: hay una versión en JavaScript.

Cómo Preparar los Datos

Para que nuestro chatbot aprenda a conversar, necesitamos datos de texto en forma de diálogos. Así es esencialmente cómo nuestro chatbot responderá a diferentes intercambios y contextos.

¿Está tu personaje favorito en Kaggle?

Hay muchos conjuntos de datos interesantes en Kaggle para dibujos animados populares, programas de televisión y otros medios. Por ejemplo:

• Rick and Morty
• Harry Potter
• The Big Bang Theory
• Game of Thrones

Solo necesitamos dos columnas de estos conjuntos de datos: nombre del personaje y línea de diálogo.

¿No puedes encontrar tu personaje favorito en Kaggle?

¿No puedes encontrar tu personaje favorito en Kaggle? No hay problema. Podemos crear conjuntos de datos a partir de transcripciones sin procesar. Un buen lugar para buscar transcripciones es Transcript Wiki. Por ejemplo, mira esta transcripción de 'Captain America: Civil War' Roundtable.

Usando una expresión regular como ([a-zA-Z|\s]+): (.+), podemos extraer las dos columnas de interés, el nombre del personaje y la línea de diálogo.

¡Pruébelo tu mismo en este sitio web de expresiones regulares de Python!

Cómo entrenar el modelo

Debajo del capó, nuestro modelo será un transformador generativo preentrenado (Generative Pre-trained Transfomer - GPT), el modelo de lenguaje más popular en estos días.

En lugar de entrenar desde cero, cargaremos el GPT previamente entrenado de Microsoft, DialoGPT-small, y lo ajustaremos utilizando nuestro conjunto de datos.

Mi repositorio de GitHub para este tutorial contiene el archivo de notebook llamado model_train_upload_workflow.ipynb para que puedas comenzar. Todo lo que necesitas hacer es lo siguiente:

1. Sube el archivo a Google Colab
2. Seleccione GPU como tiempo de ejecución, lo que acelerará el entrenamiento de nuestro modelo.
3. Cambie el conjunto de datos y el carácter de destino en fragmentos de código como:

data = pd.read_csv('MI-CONJUNTO-DE-DATOS.csv')
NOMBRE_DEL_PERSONAJE = 'MI-PERSONAJE'

Revisar la sección de entrenamiento del cuaderno debería tomar menos de media hora. Tengo alrededor de 700 líneas y el entrenamiento toma menos de diez minutos. El modelo se almacenará en una carpeta llamada output-small.

¿Quieres un modelo aún más inteligente y elocuente? Siéntase libre de entrenar un modelo más grande como DialoGPT-medium o incluso DialoGPT-large. El tamaño del modelo aquí se refiere al número de parámetros en el modelo. Más parámetros permitirán que el modelo capte más complejidad del conjunto de datos.

También puedes aumentar la cantidad de épocas de entrenamiento buscando num_train_epochs en el cuaderno. Esta es la cantidad de veces que el modelo recorrerá el conjunto de datos de entrenamiento. El modelo generalmente se volverá más inteligente cuando tenga más exposición al conjunto de datos.

Sin embargo, tenga cuidado de no sobre ajustar el modelo: si el modelo se entrena para demasiadas épocas, puede memorizar el conjunto de datos y recitar renglones del conjunto de datos cuando tratamos de conversar con él. Esto no es ideal, ya que queremos que la conversación sea más orgánica.

Cómo alojar el modelo

Alojaremos el modelo en Hugging Face, que proporciona una API gratis para que podamos consultar el modelo.

Regístrese en Hugging Face y crea un nuevo repositorio de modelos haciendo clic en Nuevo modelo. Obtenga su token de API yendo a Editar perfil > Tokens de API. Necesitaremos este token cuando construyamos el bot Discord.

Sigue junto con esta sección en mi video para cargar el modelo. Además, recuerda etiquetarlo como conversacional en su Tarjeta Modelo (equivalente a su README.md):

---
tags:
- conversational // conversacional
---

# Mi Modelo Impresionante

Sabrá que todo funciona bien si puede conversar con la modelo en el navegador.

Cómo Construir el Bot de Discord

Vaya a la página del desarrollador de Discord, cree una aplicación y añádale un bot. Dado que nuestro chatbot solo responderá a los mensajes de los usuarios, basta con marcar Permisos de Texto > Enviar Mensajes en la Configuración de permisos del bot. Copie el token de API del bot para usarlo más tarde.

Regístrese en Repl.it y crea un nuevo Repl, Python o Node.js para JavaScript, con el que estés trabajando.

Almacenemos nuestros tokens API para Hugging Face y Discord como variables de entorno, llamados HUGGINGFACE_TOKEN y DISCORD_TOKEN respectivamente. Esto ayuda a mantenerlos en secreto.

Copie mi secuencia de comandos de Python para un bot de Python y mi secuencia de comandos de JS para un bot de JS. Tenga en cuenta que para el bot JS, debido a una incompatibilidad de versión con Node y NPM de Repl.it, necesitaremos especificar explícitamente una versión inferior del API de Discord en package.json.

"dependencies": {
    "discord.js": "^12.5.3",
}

¡Con eso, nuestro bot está listo para funcionar! Inicie la secuencia de comandos Repl presionando Run, agregue el bot a un servidor, escribe algo en el canal y disfrute de la respuesta ingeniosa del bot.

Cómo Mantener el Bot en Línea

Un problema con nuestro bot es que se detiene tan pronto como detenemos la ejecución de Repl (equivalentemente, si cerramos la ventana del navegador Repl.it).

Para evitar esto y mantener nuestro bot funcionando indefinidamente, configuraremos un servidor web para que contenga el script del bot y usaremos un servicio como Uptime Robot para fijar nuestro servidor cada cinco minutos para que nuestro servidor permanezca vivo.

En mi videotutorial, copié el código del servidor de esta publicación de freeCodeCamp (versión de JavaScript). Luego, configuré el monitor en Uptime Robot. Ahora mi bot continúa respondiendo a mis mensajes, incluso si cierro el navegador (o apago mi computadora por completo).

¡Felicitaciones por llegar al final de este tutorial! ¡Espero que hayas disfrutado creando el bot y divirtiéndote chateando con tu personaje favorito! ?

¿Interesado en el modelo que entrené? Échale un vistazo en Hugging Face:

r3dhummingbird/DialoGPT-medium-joshua · Hugging Face

We’re on a journey to advance and democratize artificial intelligence through open source and open science.

¡Gracias por leer!

Las personas han estado usando números aleatorios durante milenios, por lo que el concepto no es nuevo. Desde la lotería en la antigua Babilonia hasta las mesas de ruleta en Monte Carlo y los juegos de dados en Las Vegas, el objetivo es dejar el resultado final al azar.

Pero dejando de lado las apuestas, la aleatoriedad tiene muchos usos en la ciencia, las estadísticas, la criptografía y más. Sin embargo, el uso de dados, monedas o medios similares como dispositivo aleatorio tiene sus limitaciones.

Debido a la naturaleza mecánica de estas técnicas, la generación de grandes cantidades de números aleatorios requiere una gran cantidad de tiempo y trabajo. Gracias al ingenio humano tenemos a nuestra disposición herramientas y métodos más poderosos.

Métodos para generar números aleatorios

Números Aleatorios Verdaderos

Consideremos dos métodos principales utilizados para generar números aleatorios. El primer método se basa en un proceso físico y extrae la fuente de aleatoriedad de algún fenómeno físico que se espera que sea aleatorio.

Tal fenómeno ocurre fuera de la computadora. Se mide y ajusta por posibles sesgos debidos al proceso de medición. Los ejemplos incluyen la descomposición radiactiva, el efecto fotoeléctrico, la radiación de fondo cósmica, el ruido atmosférico (que usaremos en este artículo) y más.

Por tanto, los números aleatorios generados basándose en dicha aleatoriedad se denominan números aleatorios "verdaderos".

Consideremos dos métodos principales utilizados para generar números aleatorios. El primer método se basa en un proceso físico y extrae la fuente de aleatoriedad de algún fenómeno físico que se espera que sea aleatorio.

Tal fenómeno ocurre fuera de la computadora. Se mide y ajusta por posibles sesgos debidos al proceso de medición. Los ejemplos incluyen la desintegración radiactiva, el efecto fotoeléctrico, la radiación de fondo cósmica, el ruido atmosférico (que usaremos en este artículo) y más.

Por tanto, los números aleatorios generados basándose en dicha aleatoriedad se denominan números aleatorios "verdaderos".

Técnicamente, la parte del hardware consiste de un dispositivo que convierte la energía de una forma a otra (por ejemplo, radiación en una señal eléctrica), un amplificador y un convertidor de analógico a digital para convertir la salida en un número digital.

¿Qué son los números pseudoaleatorios?

Como alternativa a los números aleatorios "verdaderos", el segundo método para generar números aleatorios involucra algoritmos computacionales que pueden producir resultados aparentemente aleatorios.

¿Por qué aparentemente aleatorio? Porque los resultados finales obtenidos están, de hecho, completamente determinados por un valor inicial, también conocido como valor semilla o clave. Por lo tanto, si sabes el valor de la clave y cómo funciona el algoritmo, podría reproducir estos resultados aparentemente aleatorios.

Los generadores de números aleatorios de este tipo se denominan frecuentemente generadores de números pseudoaleatorios y, como resultado, generan números pseudoaleatorios.

Aunque este tipo de generador normalmente no recopila datos de fuentes de aleatoriedad natural, dicha recopilación de claves puede hacerse posible cuando sea necesario.

Comparemos algunos aspectos de los generadores de números aleatorios verdaderos o TRNG y los generadores de números pseudoaleatorios o PRNG.

Los PRNG son más rápidos que los TRNG. Debido a su naturaleza determinista, son útiles cuando necesita reproducir una secuencia de eventos aleatorios. Esto ayuda mucho en las pruebas de código, por ejemplo.

Por otro lado, los TRNG no son periódicos y funcionan mejor en funciones sensibles a la seguridad, como el cifrado.

Un período es el número de iteraciones por las que pasa un PRNG antes de que comience a repetirse. Por lo tanto, en igualdad de condiciones, un PRNG con un período más largo requeriría más recursos de la computadora para predecir y descifrar.

Ejemplo de algoritmo para el generador de números pseudoaleatorios

Una computadora ejecuta código que se basa en un conjunto de reglas a seguir. Para los PRNG en general, esas reglas giran en torno a lo siguiente:

1. Acepta algún número de entrada inicial, que es una semilla o clave.
2. Aplica esa semilla en una secuencia de operaciones matemáticas para generar el resultado. Ese resultado es el número aleatorio.
3. Usa ese número aleatorio resultante como semilla para la siguiente iteración.
4. Repite el proceso para emular la aleatoriedad.

Ahora vamos a ver un ejemplo.

El generador congruencial lineal

Este generador produce una serie de números pseudoaleatorios. Con una semilla inicial X₀ y parámetros enteros a como multiplicador, b como incremento y m como módulo, el generador se define por la relación lineal: X_n ≡ (aX_n-1 + b)mod m. O usando una sintaxis más amigable con la programación: X_n = (a * X_n-1 + b) % m.

Cada uno de estos miembros debe satisfacer las siguientes condiciones:

• m > 0 (el módulo es positivo),
• 0 < a < m (el multiplicador es positivo pero menor que el módulo),
• 0 ≤ b < m (el incremento no es negativo, pero es menor que el módulo), y
• 0 ≤ X₀ < m (la semilla no es negativa, pero es menor que el módulo).

Vamos a crear una función de JavaScript que tome los valores iniciales como argumentos y devuelva un arreglo de números aleatorios de una longitud dada:

    // x0=semilla; a=multiplicador; b=incremento; m=módulo; n=longitud deseada de el arreglo;
	const generadorAleatorioLineal = (x0, a, b, m, n) => {
        const resultados = []
        for (let i = 0; i < n; i++) {
        	x0 = (a * x0 + b) % m
            resultados.push(x0)
        }
        return resultados
    }
	

El generador congruencial lineal es uno de los algoritmos PRNG más antiguos y conocidos.

En cuanto a los algoritmos generadores de números aleatorios que son ejecutables por computadoras, datan de las décadas de 1940 y 1950 (el método del cuadrado medio y el generador Lehmer, por ejemplo) y continúan escribiéndose hoy (Xoroshiro128+, Squares RNG y más).

Ejemplo de un generador de números aleatorios

Cuando decidí escribir este artículo sobre la incorporación de un generador de números aleatorios en una página web, tenía que tomar una decisión.

Podría haber usado la función Math.random() de JavaScript como base y generar resultados en números pseudoaleatorios como lo hice en artículos anteriores.

Pero este artículo en sí trata sobre la generación de números aleatorios. Así que decidí aprender a recopilar datos basados en la aleatoriedad "verdadera" y compartir mi descubrimiento con ustedes.

El código obtiene datos de una API, cortesía de Random.org. Este recurso en línea tiene una gran cantidad de herramientas útiles y personalizables y viene con una excelente documentación para acompañarlo.

La aleatoriedad proviene del ruido atmosférico. Pude usar funciones asincrónicas. Eso es un gran beneficio en el futuro. La función central se ve así:

// Genera un número aleatorio dentro del intervalo indicado por el usuario
const obtenerAleatorio = async (min, max, base) => {
   		const respuesta = await 	fetch("https://www.random.org/integers/?num=1&min="+min+"
    &max="+max+"&col=1&base="+base+"&format=plain&rnd=new")
          	return respuesta.text() 
   	} 

Los parámetros que toma permiten al usuario personalizar la salida de números aleatorios. Por ejemplo, min y max le permiten establecer límites inferiores y superiores en la salida generada. Y la base determina si la salida se imprime como binario, decimal o hexadecimal.

Nuevamente, elegí esta configuración, pero hay muchas más disponibles en la fuente.

Al hacer clic en el botón Generar, se llama a la función manejarGenerar(). A la vez, invoca la función asíncrona obtenerAleatorio(), gestiona el manejo de errores y genera resultados:

    // Gestión de salida
    const manejarGenerar = () => {
    	handleActive(generateButton)
        const base = binary.checked ? 2 : decimal.checked ? 10 : 16
        if (!minimum.value || !maximum.value) {
            prompter.style.color = 'red' 
        	prompter.textContent = "Ingrese valores mínimos y máximos"
        } else {
        	obtenerAleatorio(minimum.value, maximum.value, base).then((data) => {
        		resultValue.textContent = data
        		prompter.textContent = ""    
        	}).catch((error) => {
        		resultValue.textContent = 'ERROR'
        		prompter.textContent = 'Error de conexión. Incapaz de generar';    
        	})
       		 handleRestart()
        }
        
   }
    

El resto del código se ocupa de la estructura, la apariencia y el estilo de HTML.

El código está listo para ser incrustado y utilizado dentro de esta página web. Lo separé en partes y lo proporcioné con comentarios detallados. Se puede modificar fácilmente. También puede modificar la funcionalidad y los estilos según lo requieran sus necesidades.

Este es el enlace al repositorio de GitHub del código completo: https://github.com/sandroarobeli/random-generator

Hola a todos, hoy en día es el mundo de los cursos en línea. Todo el mundo habla de aprender en línea, Youtube, cursos gratuitos en Coursera y otros sitios web, lo cual es excelente, como cursos en línea pueden ayudar a aprender más rápido, pero creo que los libros aún deben ser una parte importante de su aprendizaje, ya que brindan el conocimiento más profundo y, a menudo, escrito por la autoridad en el tema.

Si estás aprendiendo programación Java, prepárese para conocer algunos de los libros más increíbles para aprender y dominar la programación Java en este artículo.

Cada vez que un programador comienza a aprender el lenguaje de programación Java, la primera pregunta que hacen es: "¿Qué libro debo consultar para aprender Java?" o “¿Cuál es el mejor libro para aprender Java para principiantes?” o “¿Puedes decirme algunos buenos libros para aprender Java?” Eso, en sí mismo, dice lo importante que son los libros de Java para los programadores, especialmente los principiantes.

A pesar de tener tantos recursos gratuitos disponibles en Java, como tutoriales, cursos en línea, consejos, blogs y ejemplos de código, los libros de Java tienen su propio lugar porque:

• Están escritos por programadores que son una autoridad en el tema.
• Cubren el tema con más detalles y explicaciones.

Estos libros de Java son mis favoritos personales, y cada vez que tengo tiempo, prefiero leerlos para refrescar mis conocimientos. Aunque ya he leído muchos de ellos (he leído Effective Java al menos cuatro veces hasta ahora), siempre quiero aprender algo nuevo y mi búsqueda de grandes libros nunca termina.

Estos libros son algunos de los mejores disponibles en la actualidad y son igualmente útiles para programadores de Java principiantes, intermedios y avanzados.

No importa si eres completamente nuevo en Java o si ha estado programando en Java durante algún tiempo, aprenderás muchas cosas nuevas a través de estos libros.

Habiendo dicho eso, no todos los libros son igualmente adecuados para todos los programadores. Para los principiantes, Head First Java sigue siendo el mejor libro para empezar, y para el desarrollador avanzado de Java, Effective Java es un buen libro para empezar.

Los 10 Mejores Libros para Aprender a Programar en Java

Aquí está mi colección de libros de Java que sugiero a todos los programadores que quieran aprender Java. Contiene libros para programadores principiantes y experimentados.

Estos libros cubren una variedad de áreas, incluidos los fundamentos básicos de Java, el framework de colección de Java, subprocesos múltiples y concurrencia, ajustes internos y de rendimiento de JVM, patrones de diseño, etc.

1. Head First Java

Mucha gente pensará que este es un libro anticuado, pero para ser honesto, Head First Java es el mejor libro para cualquier programador que sea nuevo tanto en programación como en Java. La manera de explicar de cabeza es fenomenal y realmente disfruté su libro.

Head First Java cubre el conocimiento esencial de programación Java sobre características de clase, objeto, subproceso, colección y lenguaje, como genéricos, enumeraciones, argumentos variables o auto-boxing.

También tienen una sección avanzada sobre Swing, redes y Java IO, lo que los convierte en un paquete completo para principiantes de Java. Este debería ser el primer libro de Java que veas si estás empezando desde cero.

Descargo de responsabilidad: recibiré una compensación si utilizas cualquier enlace de los libros enumerados aquí desde Amazon.

2. Head First Design Patterns

El Head First Design Pattern es otro libro de Java de primera clase del laboratorio de Head-First.

Cuando comencé a leer este libro en 2006, no pensé mucho en los patrones de diseño, cómo resuelven problemas comunes, cómo aplicar un patrón de diseño, qué beneficios brindan y todo tipo de cosas básicas. Pero después de leer este libro de Java, me he beneficiado inmensamente.

El primer capítulo sobre herencia y composición, que es simplemente fantástico y promueve prácticas mejoradas al presentar un problema y luego la solución.

Este libro también contiene viñetas útiles, ejercicios y mapas de memoria, que lo ayudan a comprender los patrones de diseño rápidamente.

Si desea aprender los patrones de diseño básicos de Java y los principios de diseño orientado a objetos, este es el primer libro de Java que debe consultar.

Una buena noticia sobre este libro es que la nueva edición se actualizó para Java SE 8, que le enseñará cómo desarrollar un patrón de diseño GOF clásico utilizando características de Java 8, como expresiones lambda y secuencias.

3. Effective Java

Effective Java es uno de los mejores libros de Java en mi historial y uno de los más agradables. Tengo un gran respeto por Joshua Bloch, el autor, por su contribución al framework de la colección Java y al paquete Java Concurrency.

Effective Java es mejor para un programador experimentado que esté bien versado en la programación de Java. Es excelente para los programadores que desean compartir sus habilidades siguiendo las mejores prácticas de programación y que están ansiosos por escuchar a alguien que contribuyó al kit de desarrollo de Java (JDK).

Effective Java consiste de una colección de las mejores prácticas de programación de Java, que van desde fábricas estáticas, serialización, igualdad y código hash hasta genéricos, enumeraciones, varargs y reflexión.

Este libro de programación Java cubre casi todos los aspectos de Java de una manera ligeramente diferente a la que está acostumbrado.

El año pasado se lanzó una nueva edición que introdujo funciones en JDK 7, 8 y 9, que se lanzó el año pasado en septiembre. También tiene un capítulo completo sobre lambdas.

4. Java Concurrency in Practice

Java Concurrency in Practice es otro clásico de Joshua Bloch, Doug Lea y su equipo. Este es el mejor libro de Java sobre simultaneidad y subprocesos múltiples: una de las lecturas obligadas para los desarrolladores principales de Java.

Los puntos fuertes de la práctica de concurrencia en Java incluyen:

1) Este libro es muy detallado y captura detalles menores de subprocesos múltiples y concurrencia.

2) En lugar de centrarse en las clases básicas de Java, este libro se centra en las cuestiones y los problemas de concurrencia, como interbloqueo, inanición, seguridad de subprocesos, condiciones de carrera, y presenta formas de resolverlos utilizando clases de concurrencia de Java.

Este libro es un recurso excelente para aprender y dominar los paquetes y clases de concurrencia de Java, como CountDownLatch, CyclicBarrier, BlockingQueue o Semaphore. Esta es la principal razón por la que me gusta leer este libro de Java y leerlo una y otra vez.

3) Otro punto fuerte de la práctica de concurrencia en Java son los ejemplos sensatos; los ejemplos de este libro son claros, concisos e inteligentes.

4) Este libro también es bueno para explicar lo que está mal y por qué está mal y cómo corregirlo, lo cual es esencial para que cualquier libro de Java tenga éxito.

En resumen, este es uno de los mejores libros para aprender concurrencia y subprocesos múltiples en Java. El contenido definitivamente es avanzado desde la perspectiva de un principiante, pero seguramente, este es un libro de lectura obligada para los programadores Java experimentados.

5. Java Generics and Collections

The Java Generics and Collection de Naftalin y Philip Wadler de O'Reilly es otro buen libro sobre Java, que inicialmente olvidé incluir en mi lista pero lo incluyo ahora a pedido de muchos lectores.

Me gusta este libro por su contenido sobre genéricos y colecciones, que son áreas centrales del lenguaje Java.

Se espera que un programador experimentado tenga un conocimiento sólido de las colecciones y los genéricos de Java, y estos libros ayudan en esa área.

Explica cada interfaz de colección, como Conjunto, Lista, Mapa, Cola, y su implementación, comparando qué tan bien funcionan en una situación diferente.

Realmente me encantó su tabla de comparación al final de cada capítulo, que le brinda una buena idea sobre cuándo usar una clase de colección de Java en particular, como ArrayList, HashMap o LinkedHashMap.

6. Java Performance From Binu John

Este es otro buen libro que enseña sobre los aspectos internos de JVM, la recolección de basura, el ajuste de JVM y la creación de perfiles. etc., y recomiendo encarecidamente a todos los desarrolladores senior de Java que lean este libro. Este es también uno de mis favoritos personales.

Como nos estamos moviendo gradualmente, comenzamos desde un nivel de principiantes hasta un nivel intermedio y ahora el nivel superior.

Java Performance tiene que ver con la supervisión del rendimiento, la creación de perfiles y las herramientas utilizadas para la supervisión del rendimiento de Java.

Este no es un libro de programación habitual. En su lugar, proporciona detalles sobre la JVM, la recolección de basura, la supervisión del almacenamiento dinámico de Java y la aplicación de generación de perfiles.

Me encantó su capítulo sobre la descripción general de JVM, y es una lectura obligada para obtener más información sobre JVM en un lenguaje sencillo.

Tanto los principiantes como los programadores intermedios pueden beneficiarse de este libro, pero es bueno tener algo de experiencia en Java antes de leerlo. Hasta ahora, este es el mejor libro de Java sobre monitoreo del rendimiento.

Este es otro libro de Java que debe leer si se toma en serio el rendimiento.

Hay un par de libros nuevos disponibles en Java, que cubren JDK 1.7. Para conocer el último libro sobre el rendimiento de Java, como Java Performance, The Definitive Guide de Scott Oaks, que sin duda vale la pena consultar antes de comprar este libro.

7. Java Puzzlers

Java Puzzlers es otro libro que vale la pena leer de Joshua Bloch, esta vez con Neal Gafter. Este libro trata sobre casos extremos y trampas en el lenguaje de programación Java.

Java es más seguro que C++, y la JVM hace un buen trabajo para liberar al programador de la asignación y desasignación de memoria propensa a errores. Pero aún así, Java tiene casos de esquina que pueden sorprender incluso al programador Java experimentado.

Este libro de Java presenta estos peligros de Java y los explica con más detalle. Este es un buen libro de Java si le encantan los acertijos; incluso puede incluir muchos de estos en las entrevistas básicas de Java para verificar su conocimiento de Java.

No lo califico tan alto como Effective Java y Java Concurrency in Practice, pero aún puede intentarlo, especialmente para verificar su conocimiento sobre Java y sus casos de esquina, lo que lo ayudará a responder algunas de las preguntas difíciles de Java de entrevistas.

Para entender la mayor parte de este libro de Java, intente resolver acertijos usted mismo y luego busque explicaciones para que su conocimiento sea más concreto.

8. Head First Object-Oriented Analysis and Design

Otro buen libro sobre principios de diseño y programación Java de la serie Head-First. Head First Object-Oriented Analysis and Design se puede leer junto con Head First Design Patterns.

Este libro se enfoca en los principios del diseño orientado a objetos, como favorecer la composición sobre la herencia, la programación para el interfaz en lugar de la implementación, DRY, etc.

Una parte de aprender Java es escribir un buen código y seguir las mejores prácticas, y este libro es excelente para educar a los programadores sobre ellas.

El conocimiento obtenido con este libro es aplicable a muchos lenguajes de programación orientados a objetos y, en general, mejorará su comprensión del código y los principios de diseño de programación orientada a objetos.

9. Thinking in Java

Thinking in Java está escrito por Bruce Eckel, quien también es el autor de Thinking in C++ y usa su estilo único para enseñar el concepto de Java.

Muchos estarían de acuerdo en que este es uno de los mejores libros de Java, con una fortaleza que apunta a ejemplos inteligentes. Este es uno de los libros completos en Java y también puede usarse como referencia.

Hay un capítulo sobre IO mapeada en memoria de Java de Thinking in Java, que es mi favorito.

Si no le gusta el estilo de enseñanza Head-First, pero necesita un libro de Java para principiantes con un estilo de ejemplo simple, Thinking in Java es una buena opción.

Es detallado, maduro y se actualiza con frecuencia, pero, si necesita más opciones, también puede consultar estos libros básicos de Java para principiantes.

10. Java SE 8 for the Really Impatient

Este es uno de los mejores libros para aprender Java 8. También es mi libro Java 8 de propósito general. Si tienes menos tiempo y quieres aprender todas las cosas importantes sobre Java 8, este es el libro que debes consultar.

No tengo que recordarte de la habilidad de escribir de Cay. S. Horstmann’s, uno de los mejores autores en Java y a la altura de Joshua Bloch. He encontrado que ambos son muy legibles.

No te aburrirás, lo que suelen hacer los programadores cuando leen libros técnicos. Explica sobre la expresión lambda, Streams, interfaz funcional, referencias de métodos, nueva API de fecha y hora de Java y varias otras pequeñas mejoras como unir cadenas, anotaciones repetibles, etc. En resumen, uno de los mejores libros para aprender Java sin duda.

Terminando

Esta fue mi lista de los mejores libros de programación Java. He leído todos los libros, algunos de ellos todavía los estoy leyendo y un par de ellos, como Effective Java y la serie Head-First, los he leído un par de veces. Muchos programadores me preguntan con qué libros deberían comenzar y qué libro de Java deberían leer ahora. Espero que hayas encontrado buenos libros en esta colección. ¡Feliz lectura!

Notas finales

Gracias por leer este artículo hasta ahora. Puede que estés pensando que hay tantas cosas que aprender, tantos cursos a los que unirte, pero no tienes que preocuparte.

Soy un fanático particular de los cursos de Udemy, ya que son muy asequibles y brindan muchos valores en una cantidad muy pequeña, pero eres libre de elegir el curso que deseas.

Al final del día, debe tener suficiente conocimiento y experiencia al usar los recursos mencionados aquí.

¡Buena suerte con tu viaje por Java! Ciertamente no va a ser fácil, pero siguiendo esta hoja de ruta y guía, está un paso más cerca de convertirse en el desarrollador de Java que siempre quiso ser.

Si te gusta este artículo, considera seguirme en medium (javinpaul). Si desea recibir notificaciones de cada publicación nueva, ¡no olvide seguir a javarevisited en Twitter!

Una vez más, todo lo mejor para su viaje de desarrollo de Java y muchas gracias a todos los autores por escribir libros tan increíbles. Estos libros de programación de Java son algunos de los mejores libros para aprender Java; incluso diría que algunos de ellos son los mejores libros de Java jamás publicados.

En este artículo, construirá una aplicación de administración de libros en React desde cero.

Al crear esta aplicación, aprenderá:

1. Cómo realizar operaciones CRUD
2. Cómo usar React Router para navegar entre rutas
3. Cómo usar React Context API para pasar datos a través de rutas
4. Cómo crear un hook personalizado en React
5. Cómo almacenar datos en el almacenamiento local para conservarlos incluso después de actualizar la página
6. Cómo administrar los datos almacenados en el almacenamiento local mediante un hook personalizado

y mucho más.

Usaremos React Hooks para construir esta aplicación.

Configuración inicial

Crear un nuevo proyecto usando create-react-app:

npx create-react-app administracion-de-libros-app

Una vez que se crea el proyecto, elimine todos los archivos de la carpeta src y crea archivos index.js y styles.scss dentro de la carpeta src. También, crea carpetas de componentes, contexto, hooks y enrutadores dentro de la carpeta src.

Instala las dependencias necesarias:

yarn add bootstrap@4.6.0 lodash@4.17.21 react-bootstrap@1.5.2 node-sass@4.14.1 react-router-dom@5.2.0 uuid@8.3.2

Abra styles.scss y agregue los contenidos de aquí adentro.

Cómo crear las páginas iniciales

Crea un nuevo archivo Header.js dentro de la carpeta de componentes con el siguiente contenido:

import React from 'react';
import { NavLink } from 'react-router-dom';

const Header = () => {
  return (
    <header>
      <h1>Aplicación de Administración de Libros</h1>
      <hr />
      <div className="links">
        <NavLink to="/" className="link" activeClassName="active" exact>
          Lista de Libros
        </NavLink>
        <NavLink to="/add" className="link" activeClassName="active">
          Agrega Libro
        </NavLink>
      </div>
    </header>
  );
};

export default Header;

Aquí, hemos agregado dos enlaces de navegación utilizando el componente NavLink de react-router-dom: uno para ver una lista de todos los libros y el otro para agregar un nuevo libro.

Usamos NavLink en lugar de la etiqueta de anclaje ( <a />) para que la página no se actualice cuando un usuario haga clic en cualquiera de los enlaces.

Cree un nuevo archivo llamado ListaDeLibros.js dentro de la carpeta de componentes con el siguiente contenido:

import React from 'react';

const ListaDeLibros = () => {
  return <h2>Lista de Libros</h2>;
};

export default ListaDeLibros;

Crea un nuevo archivo llamado AgregaLibro.js dentro de la carpeta de componentes con el siguiente contenido:

import React from 'react';
import FormularioDeLibro from './FormularioDeLibro';

const AgregaLibro = () => {
  const handleOnSubmit = (libro) => {
    console.log(libro);
  };

  return (
    <React.Fragment>
      <FormularioDeLibro handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  );
};

export default AgregaLibro;

En este archivo, estamos mostrando un componente FormularioDeLibro (que aún tenemos que crear).

Para el componente FormularioDeLibro, estamos pasando el método handleOnSubmit para que podamos realizar algún procesamiento más adelante una vez que enviemos el formulario.

Ahora, crea un nuevo archivo FormularioDeLibro.js dentro de la carpeta de componentes con el siguiente contenido:

import React, { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
import { v4 as uuidv4 } from 'uuid';

const FormularioDeLibro = (props) => {
  const [libro, setLibro] = useState({
    nombrelibro: props.libro ? props.libro.nombrelibro : '',
    autor: props.libro ? props.libro.autor : '',
    cantidad: props.libro ? props.libro.cantidad : '',
    precio: props.libro ? props.libro.precio : '',
    fecha: props.libro ? props.libro.fecha : ''
  });

  const [errorMsg, setErrorMsg] = useState('');
  const { nombrelibro, autor, precio, cantidad } = libro;

  const handleOnSubmit = (event) => {
    event.preventDefault();
    const valores = [nombrelibro, autor, precio, cantidad];
    let errorMsg = '';

    const todosLosCamposLlenos = valores.every((campo) => {
      const valor = `${campo}`.trim();
      return valor !== '' && valor !== '0';
    });

    if (todosLosCamposLlenos) {
      const libro = {
        id: uuidv4(),
        nombrelibro,
        autor,
        precio,
        cantidad,
        fecha: new Date()
      };
      props.handleOnSubmit(libro);
    } else {
      errorMsg = 'Por favor, rellene todos los campos.';
    }
    setErrorMsg(errorMsg);
  };

  const handleInputChange = (event) => {
    const { nombre, valor } = event.target;
    switch (nombre) {
      case 'cantidad':
        if (valor === '' || parseInt(valor) === +valor) {
          setLibro((prevState) => ({
            ...prevState,
            [nombre]: valor
          }));
        }
        break;
      case 'precio':
        if (valor === '' || valor.match(/^\d{1,}(\.\d{0,2})?$/)) {
          setLibro((prevState) => ({
            ...prevState,
            [nombre]: valor
          }));
        }
        break;
      default:
        setLibro((prevState) => ({
          ...prevState,
          [nombre]: valor
        }));
    }
  };

  return (
    <div className="main-form">
      {errorMsg && <p className="errorMsg">{errorMsg}</p>}
      <Form onSubmit={handleOnSubmit}>
        <Form.Group controlId="nombre">
          <Form.Label>Nombre del Libro</Form.Label>
          <Form.Control
            className="input-control"
            type="text"
            name="nombrelibro"
            value={nombrelibro}
            placeholder="Ingrese el nombre del libro"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group controlId="autor">
          <Form.Label>Autor del Libro</Form.Label>
          <Form.Control
            className="input-control"
            type="text"
            name="autor"
            value={autor}
            placeholder="Ingrese el nombre del autor"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group controlId="cantidad">
          <Form.Label>Cantidad</Form.Label>
          <Form.Control
            className="input-control"
            type="number"
            name="cantidad"
            value={cantidad}
            placeholder="Ingrese la cantidad disponible"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Form.Group controlId="precio">
          <Form.Label>Precio del Libro</Form.Label>
          <Form.Control
            className="input-control"
            type="text"
            name="precio"
            value={precio}
            placeholder="Ingrese el precio del libro"
            onChange={handleInputChange}
          />
        </Form.Group>
        <Button variant="primary" type="submit" className="submit-btn">
          Enviar
        </Button>
      </Form>
    </div>
  );
};

export default FormularioDeLibro;

Vamos a entender lo que estamos haciendo aquí.

Inicialmente, hemos definido un estado como un objeto usando el useState hook para almacenar todos los detalles ingresados de esta manera:

const [libro, setLibro] = useState({
    nombrelibro: props.libro ? props.libro.nombrelibro : '',
    autor: props.libro ? props.libro.autor : '',
    cantidad: props.libro ? props.libro.cantidad : '',
    precio: props.libro ? props.libro.precio : '',
    fecha: props.libro ? props.libro.fecha : ''
  });

Como usaremos el mismo componente FormularioDeLibro para agregar y editar el libro, primero verificamos si el prop del libro pasa o no usando el operador ternario.

Si el prop pasa, lo estamos configurando en el valor pasado, de lo contrario, una cadena vacía ('').

No se preocupe si parece complicado ahora. Lo comprenderá mejor una vez que construyamos algunas funciones iniciales.

Luego agregamos un estado para mostrar un mensaje de error y usamos la sintaxis de desestructuración de ES6 para hacer referencia a cada una de las propiedades dentro del estado de esta manera:

const [errorMsg, setErrorMsg] = useState('');
const { nombrelibro, autor, precio, cantidad } = libro;

Desde el componente FormularioDeLibro, estamos devolviendo un Formulario donde ingresamos el nombre del libro, el autor del libro, la cantidad y el precio. Estamos usando el framework react-bootstrap para mostrar el formulario en un formato agradable.

Cada campo de entrada ha agregado un controlador onChange que llama al método handleInputChange.

Dentro del método handleInputChange, agregamos una declaración de cambio para cambiar el valor del estado según el campo de entrada que se cambia.

Cuando escribimos algo en el campo de entrada de cantidad, event.target.nombre será cantidad, por lo que el primer caso de switch coincidirá. Dentro de la declaración switch , estamos verificando si el valor ingresado es un número entero sin un punto decimal.

Si es así, solo actualizamos el estado como se muestra a continuación:

if (valor === '' || parseInt(valor) === +valor) {
  setLibro((prevState) => ({
    ...prevState,
    [nombre]: valor
  }));
}

Entonces, el usuario no puede ingresar ningún valor decimal para el campo de entrada de cantidad.

Para el caso del switch de precio, buscamos un número decimal con solo dos dígitos después del punto decimal. Así que hemos agregado una verificación de expresión regular que se ve así: value.match(/^\d{1,}(.\d{0,2})?$/).

Si el valor del precio coincide solo con la expresión regular, entonces actualizamos el estado.

Nota: Para los casos de switch de cantidad y precio, también estamos buscando valores vacíos como este: valor === ''. Esto es para permitir que el usuario elimine por completo el valor ingresado si es necesario.

Sin esa verificación, el usuario no podrá eliminar el valor ingresado presionando Ctrl + A + Delete.

Para todos los demás campos de entrada, se ejecutará el caso de switch predeterminado que actualizará el estado según el valor ingresado por el usuario.

A continuación, una vez que enviemos el formulario, se llamará al método handleOnSubmit.

Dentro de este método, primero verificamos si el usuario ha ingresado todos los detalles usando el método de every arreglo:

const todosLosCamposLlenos = valores.every((campo) => {
  const valor = `${campo}`.trim();
  return valor !== '' && valor !== '0';
});

El método de every arreglo es uno de los métodos de arreglo más útiles en JavaScript.

Si se completan todos los valores, entonces estamos creando un objeto con todos los valores completos. También estamos llamando al método handleOnSubmit pasando libro como argumento, de lo contrario, estamos configurando un mensaje de error.

El método handleOnSubmit se pasa como prop del componente AgregaLibro.

if (todosLosCamposLlenos) {
  const libro = {
    id: uuidv4(),
    nombrelibro,
    autor,
    precio,
    cantidad,
    fecha: new Date()
  };
  props.handleOnSubmit(libro);
} else {
  errorMsg = 'Por favor, rellene todos los campos.';
}

Tenga en cuenta que para crear una ID única llamamos al método uuidv4() del paquete uuid npm.

Ahora, crea un nuevo archivo EnrutadorDeApp.js dentro de la carpeta del enrutador con el siguiente contenido:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../componentes/Header';
import AgregaLibro from '../componentes/AgregaLibro';
import ListaDeLibros from '../componentes/ListaDeLibros';

const EnrutadorDeApp = () => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route component={ListaDeLibros} path="/" exact={true} />
            <Route component={AgregaLibro} path="/add" />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default EnrutadorDeApp;

Aquí, hemos configurado el enrutamiento para varios componentes como ListaDeLibros y AgregaLibro utilizando la biblioteca react-router-dom.

Ahora, abra el archivo src/index.js y agregue los siguientes contenidos dentro de él:

import React from 'react';
import ReactDOM from 'react-dom';
import EnrutadorDeApp from './enrutadores/EnrutadorDeApp';
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';

ReactDOM.render(<EnrutadorDeApp />, document.getElementById('root'));

Ahora, inicie la aplicación React ejecutando el siguiente comando desde la terminal:

yarn start

Verá la siguiente pantalla cuando acceda a la aplicación en http://localhost:3000/.

Como puede ver, podemos agregar correctamente el libro y mostrarlo en la consola.

Pero en lugar de iniciar sesión en la consola, agréguemoslo al almacenamiento local.

Cómo crear un hook personalizado para almacenamiento local

El almacenamiento local es increíble. Nos permite almacenar fácilmente datos de aplicaciones en el navegador y es una alternativa a las cookies para almacenar datos.

La ventaja de utilizar el almacenamiento local es que los datos se guardarán de forma permanente en la memoria caché del navegador hasta que los eliminemos manualmente para poder acceder a ellos incluso después de actualizar la página. Como sabrá, los datos almacenados en el estado React se perderán una vez que actualicemos la página.

Hay muchos casos de uso para el almacenamiento local, y uno de ellos es almacenar elementos del carrito de compras para que no se eliminen incluso si actualizamos la página.

Para agregar datos al almacenamiento local, usamos el método setItem proporcionando una clave y un valor:

localStorage.setItem(clave, valor)

Tanto la clave como el valor deben ser una cadena. Pero también podemos almacenar el objeto JSON usando el método JSON.stringify.

Cree un nuevo archivo usaAlmacenamientoLocal.js dentro de la carpeta de hooks con el siguiente contenido:

import { useState, useEffect } from 'react';

const usaAlmacenamientoLocal = (clave, valorInicial) => {
  const [valor, setValor] = useState(() => {
    try {
      const almacenamientoLocal = window.localStorage.getItem(clave);
      return almacenamientoLocal ? JSON.parse(lmacenamientoLocal) : initialValue;
    } catch (error) {
      return valorInicial;
    }
  });

  useEffect(() => {
    window.localStorage.setItem(key, JSON.stringify(valor));
  }, [clave, valor]);

  return [valor, setValor];
};

export default usaAlmacenamientoLocal;

Aquí, hemos usado un usaAlmacenamientoLocal hook que acepta una clave y un valor inicial.

Para declarar el estado usando el useState hook, estamos usando la inicialización diferida.

Por lo tanto, el código dentro de la función que se pasa a useState se ejecutará solo una vez, incluso si el usaAlmacenamientoLocal hook se llama varias veces en cada nueva representación de la aplicación.

Entonces, inicialmente estamos verificando si hay algún valor en el almacenamiento local con la clave proporcionada y devolvemos el valor al analizarlo usando el método JSON.parse:

try {
  const valorLocal = window.localStorage.getItem(clave);
  return valorLocal ? JSON.parse(valorLocal) : valorInicial;
} catch (error) {
  return valorInicial;
}

Luego, si hay algún cambio en la clave o el valor, actualizaremos el almacenamiento local:

useEffect(() => {
    window.localStorage.setItem(clave, JSON.stringify(valor));
}, [clave, valor]);

return [valor, setValor];

Luego, devolvemos el valor almacenado en el almacenamiento local y la función setValor a la que llamaremos para actualizar los datos del localStorage.

Cómo utilizar el hook de almacenamiento local

Ahora, usemos este usaAlmacenamientoLocal hook para que podamos agregar o eliminar datos del almacenamiento local.

Abra el archivo EnrutadorDeApp.js y use el hook usaAlmacenamientoLocal dentro del componente:

import usaAlmacenamientoLocal from '../hooks/usaAlmacenamientoLocal';

const EnrutadorDeApp = () => {
 const [libros, setLibros] = usaAlmacenamientoLocal('libros', []);
 
 return (
  ...
 )
}

Ahora, necesitamos pasar los libros y setLibros como props al componente AgregaLibro para que podamos agregar el libro al almacenamiento local.

Así que cambia la ruta desde este código:

<Route component={AgregaLibro} path="/add" />

al siguiente código:

<Route
  render={(props) => (
    <AgregaLibro {...props} libros={libros} setLibros={setLibros} />
  )}
  path="/add"
/>

Aquí, estamos usando render props de representación para pasar los props predeterminados pasados por el enrutador React junto con los libros y setLibros.

Su archivo EnrutadorDeApp.js completo se verá así ahora:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../componentes/Header';
import AgregaLibro from '../componentes/AgregaLibro';
import ListaDeLibros from '../componentes/ListaDeLibros';
import usaAlmacenamientoLocal from '../hooks/usaAlmacenamientoLocal';

const EnrutadorDeApp = () => {
  const [libros, setLibros] = usaAlmacenamientoLocal('libros', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route component={BooksList} path="/" exact={true} />
            <Route
              render={(props) => (
                <AddBook {...props} libros={libros} setLibros={setLibros} />
              )}
              path="/add"
            />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default EnrutadorDeApp;

Now open AgregaLibro.js and replace its content with the following code:

import React from 'react';
import FormularioDeLibro from './FormularioDeLibro';

const AgregaLibro = ({ historia, libros, setLibros }) => {
  const handleOnSubmit = (libro) => {
    setLibros([libro, ...libros]);
    historia.push('/');
  };

  return (
    <React.Fragment>
      <BookForm handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  );
};

export default AgregaLibro;

Primero, estamos usando la sintaxis de desestructuración de ES6 para acceder a los props de historia, libros y setLibros en el componente.

React Router pasa automáticamente el prop de historia a cada componente mencionado en <Route />. Estamos pasando los props libros y setLibros del archivo EnrutadorDeApp.js.

Estamos almacenando todos los libros agregados en un arreglo. Dentro del método handleOnSubmit, estamos llamando a la función setLibros pasando un arreglo agregando primero un libro recién agregado y luego distribuyendo todos los libros ya agregados en el arreglo de libros como se muestra a continuación:

setLibros([libro, ...libros]);

Aquí, primero agrego el libro recién agregado y luego distribuyo los libros ya agregados porque quiero que el último libro se muestre primero cuando mostremos la lista de libros más tarde.

Pero puedes cambiar el orden si quieres así:

setLibros([...libros, libro]);

Esto agregará el libro recién agregado al final de todos los libros ya agregados.

Podemos usar el operador de propagación porque sabemos que los libros son un arreglo (ya que lo hemos inicializado en un arreglo vacío [] en el archivo EnrutadorDeApp.js como se muestra a continuación):

 const [libros, setLibros] = usaAlmacenamientoLocal('libros', []);

Luego, una vez que el libro se agrega al almacenamiento local llamando al método setLibros, dentro del método handleOnSubmit estamos redirigiendo al usuario a la página Lista de libros usando el método historia.push:

historia.push('/');

Ahora, verifiquemos si podemos guardar los libros en el almacenamiento local o no.

Como puede ver, el libro se agrega correctamente al almacenamiento local (y puede confirmarlo en la pestaña de aplicaciones de las herramientas de desarrollo de Chrome).

Cómo mostrar libros agregados en el interfaz de usuario

Ahora, mostremos los libros agregados en el interfaz de usuario en el menú Lista de libros.

Abra EnrutadorDeApp.js y pase los libros y setLibros como props al componente ListaDeLibros.

Su archivo EnrutadorDeApp.js se verá así ahora:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../componentes/Header';
import AgregaLibro from '../componentes/AgregaLibro';
import ListaDeLibros from '../componentes/ListaDeLibros';
import usaAlmacenamientoLocal from '../hooks/usaAlmacenamientoLocal';

const EnrutadorDeApp = () => {
  const [libros, setLibros] = usaAlmacenamientoLocal('libros', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route
              render={(props) => (
                <BooksList {...props} libros={libros} setLibros={setLibros} />
              )}
              path="/"
              exact={true}
            />
            <Route
              render={(props) => (
                <AddBook {...props} libros={libros} setLibros={setLibros} />
              )}
              path="/add"
            />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default EnrutadorDeApp;

Aquí, acabamos de cambiar la primera ruta relacionada con el componente ListaDeLibros.

Ahora, crea un nuevo archivo Libro.js dentro de la carpeta de componentes con el siguiente contenido:

import React from 'react';
import { Button, Card } from 'react-bootstrap';

const Libro = ({
  id,
  nombrelibro,
  autor,
  precio,
  cantidad,
  fecha,
  manejarEliminarLibro
}) => {
  return (
    <Card style={{ width: '18rem' }} className="book">
      <Card.Body>
        <Card.Title className="book-title">{nombrelibro}</Card.Title>
        <div className="book-details">
          <div>Autor: {autor}</div>
          <div>Cantidad: {cantidad} </div>
          <div>Precio: {precio} </div>
          <div>Fecha: {new Date(date).toDateString()}</div>
        </div>
        <Button variant="primary">Editar</Button>{' '}
        <Button variant="danger" onClick={() => manejarEliminarLibro(id)}>
          Eliminar
        </Button>
      </Card.Body>
    </Card>
  );
};

export default Libro;

Ahora, abre el archivo ListaDeLibros.js y reemplaza su contenido con el siguiente código:

import React from 'react';
import _ from 'lodash';
import Libro from './Libro';

const ListaDeLibros = ({ libros, setLibros }) => {

  const manejarEliminarLibro = (id) => {
    setLibros(libros.filter((libro) => libro.id !== id));
  };

  return (
    <React.Fragment>
      <div className="book-list">
        {!_.isEmpty(libros) ? (
          libros.map((libro) => (
            <Libro key={libro.id} {...libro} manejarEliminarLibro={manejarEliminarLibro} />
          ))
        ) : (
          <p className="message">No hay libros disponibles. Por favor agregue algunos libros.</p>
        )}
      </div>
    </React.Fragment>
  );
};

export default ListaDeLibros;

En este archivo, estamos recorriendo los libros usando el método de map de arreglo y pasándolos como apoyo al componente Libro.

Tenga en cuenta que también estamos pasando la función manejarEliminarLibro como prop para que podamos eliminar cualquier libro que queramos.

Dentro de la función manejarEliminarLibro, estamos llamando a la función setLibros usando el método de filter de arreglo para mantener solo los libros que no coinciden con la id del libro proporcionada.

const manejarEliminarLibro = (id) => {
    setLibros(libros.filter((libro) => libro.id !== id));
};

Ahora, si verifica la aplicación visitando http://localhost:3000/, podrá ver el libro agregado en el interfaz de usuario.

Agreguemos otro libro para verificar todo el flujo.

Como puede ver, cuando agregamos un nuevo libro, somos redirigidos a la página de la lista donde podemos eliminar el libro. Puede ver que se elimina instantáneamente de el interfaz de usuario y del almacenamiento local.

Además cuando refrescamos la página los datos no se pierden. Ese es el poder del almacenamiento local.

Cómo editar un libro

Ahora tenemos la funcionalidad de agregar y eliminar para los libros. Agreguemos una forma de editar los libros que tenemos.

Abra Libro.js y cambie el siguiente código:

<Button variant="primary">Editar</Button>{' '}

a este código:

<Button variant="primary" onClick={() => historia.push(`/edit/${id}`)}>
  Editar
</Button>{' '}

Aquí, hemos agregado un controlador onClick para redirigir al usuario a la ruta /edit/id_del_libro cuando hacemos clic en el botón editar.

Pero no tenemos acceso al objeto historia en el componente Libro porque la propiedad historia se pasa solo a los componentes que se mencionan en la <Route />.

Estamos renderizando el componente Libro dentro del componente ListaDeLibros para que podamos tener acceso a la historia solo dentro del componente ListaDeLibros. Luego podemos pasarlo como prop al componente Libro.

Pero en lugar de eso, el React router proporciona una manera fácil de usar el useHistory hook.

Importe el useHistory hook en la parte superior del archivo Libro.js:

import { useHistory } from 'react-router-dom';

y dentro del componente Libro, llame al useHistory hook.

const Book = ({
  nombrelibro,
  autor,
  precio,
  cantidad,
  fecha,
  manejarEliminarLibro
}) => {
  const historia = useHistory();
  ...
}

Ahora tenemos acceso al objeto de historia dentro del componente Libro.

Todo su archivo Libro.js se ve así ahora:

import React from 'react';
import { Button, Card } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';

const Libro = ({
  id,
  nombrelibro,
  autor,
  precio,
  cantidad,
  fecha,
  manejarEliminarLibro
}) => {
  const historia = useHistory();

  return (
    <Card style={{ width: '18rem' }} className="book">
      <Card.Body>
        <Card.Title className="book-title">{nombrelibro}</Card.Title>
        <div className="book-details">
          <div>Autor: {autor}</div>
          <div>Cantidad: {cantidad} </div>
          <div>Precio: {precio} </div>
          <div>Fecha: {new Date(date).toDateString()}</div>
        </div>
        <Button variant="primary" onClick={() => historia.push(`/edit/${id}`)}>
          Editar
        </Button>{' '}
        <Button variant="danger" onClick={() => manejarEliminarLibro(id)}>
          Eliminar
        </Button>
      </Card.Body>
    </Card>
  );
};

export default Libro;

Crea un nuevo archivo llamado EditarLibro.js dentro de la carpeta de componentes con el siguiente contenido:

import React from 'react';
import FormularioDeLibro from './FormularioDeLibro';
import { useParams } from 'react-router-dom';

const EditarLibro = ({ historia, libros, setLibros }) => {
  const { id } = useParams();
  const libroParaEditar = libros.find((libro) => libro.id === id);

  const handleOnSubmit = (libro) => {
    const librosFiltrados = books.filter((libro) => libro.id !== id);
    setLibros([libro, ...librosFiltrados]);
    historia.push('/');
  };

  return (
    <div>
      <FormularioDeLibro libro={libroParaEditar} handleOnSubmit={handleOnSubmit} />
    </div>
  );
};

export default EditarLibro;

Aquí, para el controlador onClick del botón Editar, estamos redirigiendo al usuario a la ruta /edit/alguna_id, pero esa ruta aún no existe. Así que vamos a crear eso primero.

Abra EnrutadorDeApp.js y antes de la etiqueta final del Switch agregue dos rutas más:

<Switch>
...
<Route
  render={(props) => (
    <EditarLibro {...props} libros={libros} setLibros={setLibros} />
  )}
  path="/edit/:id"
/>
<Route component={() => <Redirect to="/" />} />
</Switch>

La primera Ruta es para el componente EditarLibro. Aquí, la ruta se define como /edit/:id donde :id representa cualquier id aleatorio.

La segunda ruta es para manejar todas las demás rutas que no coinciden con ninguna de las rutas mencionadas.

Entonces, si accedemos a cualquier ruta aleatoria como /ayuda o /contacto, redirigiremos al usuario a la ruta / que es el componente ListaDeLibros.

Todo su archivo EnrutadorDeApp.js se ve así ahora:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Header from '../componentes/Header';
import AgregaLibro from '../componentes/AgregaLibro';
import ListaDeLibros from '../componentes/ListaDeLibros';
import usaAlmacenamientoLocal from '../hooks/usaAlmacenamientoLocal';

const EnrutadorDeApp = () => {
  const [libros, setLibros] = usaAlmacenamientoLocal('libros', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <Switch>
            <Route
              render={(props) => (
                <ListaDeLibros {...props} libros={libros} setLibros={setLibros} />
              )}
              path="/"
              exact={true}
            />
            <Route
              render={(props) => (
                <AgregaLibro {...props} libros={libros} setLibros={setLibros} />
              )}
              path="/add"
            />
            <Route
              render={(props) => (
                <EditarLibro {...props} libros={libros} setLibros={setLibros} />
              )}
              path="/edit/:id"
            />
            <Route component={() => <Redirect to="/" />} />
          </Switch>
        </div>
      </div>
    </BrowserRouter>
  );
};

export default EnrutadorDeApp;

Ahora, verifiquemos la funcionalidad de editar de la aplicación.

Como puede ver, pudimos editar el libro correctamente. Vamos a entender cómo funciona esto.

Primero, dentro del archivo EnrutadorDeApp.js tenemos una ruta como esta:

<Route
  render={(props) => (
    <EditarLibro {...props} libros={libros} setLibros={setLibros} />
  )}
  path="/edit/:id"
/>

y dentro del archivo Libro.js tenemos un botón de editar como este:

<Button variant="primary" onClick={() => historia.push(`/edit/${id}`)}>
  Editar
</Button>

Entonces, cada vez que hacemos clic en el botón Editar para cualquiera de los libros, estamos redirigiendo al usuario al componente EditarLibro utilizando el método historia.push al pasar la identificación del libro que se editará.

Luego, dentro del componente EditarLibro, estamos usando el enlace useParams proporcionado por react-router-dom para acceder a props.params.id.

Así que las dos líneas siguientes son idénticas:

const { id } = useParams();

// la línea de código de arriba es igual que el código de abajo

const { id } = props.match.params;

Una vez que hemos obtenido esa id, estamos usando el método de find de arreglo para encontrar el libro en particular de la lista de libros con la id proporcionada coincidente.

const libroParaEditar = libros.find((libro) => libro.id === id);

y este libro en particular lo estamos pasando al componente FormularioDeLibro como prop de libro:

<FormularioDeLibro libro={libroParaEditar} handleOnSubmit={handleOnSubmit} />

Dentro del componente FormularioDeLibro, hemos definido el estado como se muestra a continuación:

const [libro, setLibro] = useState({
  nombrelibro: props.libro ? props.libro.nombrelibro : '',
  autor: props.libro ? props.libro.autor : '',
  cantidad: props.libro ? props.libro.cantidad : '',
  precio: props.libro ? props.libro.precio : '',
  fecha: props.libro ? props.libro.fecha : ''
});

Aquí, estamos comprobando si existe el prop del libro. En caso afirmativo, estamos usando los detalles del libro pasado como prop; de lo contrario, estamos inicializando el estado con un valor vacío ('') para cada propiedad.

Y cada uno de los elementos de entrada ha proporcionado un prop de valor que estamos configurando desde el estado como este:

<Form.Control
  ...
  valor={nombrelibro}
  ...
/>

Pero podemos mejorar un poco la sintaxis de useState dentro del componente FormularioDeLibro.

En lugar de configurar directamente un objeto para el useState hook, podemos usar la inicialización diferida como se hizo en el archivo usaAlmacenamientoLocal.js.

Así que cambia el siguiente código:

const [libro, setLibro] = useState({
  nombrelibro: props.libro ? props.libro.nombrelibro : '',
  autor: props.libro ? props.libro.autor : '',
  cantidad: props.libro ? props.libro.cantidad : '',
  precio: props.libro ? props.libro.precio : '',
  fecha: props.libro ? props.libro.fecha : ''
});

a este código:

const [libro, setLibro] = useState(() => {
  return {
    nombrelibro: props.libro ? props.libro.nombrelibro : '',
    autor: props.libro ? props.libro.autor : '',
    cantidad: props.libro ? props.libro.cantidad : '',
    precio: props.libro ? props.libro.precio : '',
    fecha: props.libro ? props.libro.fecha : ''
  };
});

Debido a este cambio, el código para establecer el estado no se ejecutará en cada nueva representación de la aplicación. Solo se ejecutará una vez cuando se monte el componente.

Tenga en cuenta que la nueva representación del componente ocurre en cada cambio de estado o prop.

Si revisa la aplicación, verá que la aplicación funciona exactamente como antes sin ningún problema. Pero acabamos de mejorar un poco el rendimiento de la aplicación.

Cómo usar el API de contexto de React

Ahora hemos terminado de desarrollar toda la funcionalidad de la aplicación. Pero si revisas el archivo EnrutadorDeApp.js, verás que cada Ruta se ve un poco complicada. Esto se debe a que estamos pasando los mismos libros y props de setLibros a cada uno de los componentes mediante el patrón de render props.

Entonces podemos usar la API React Context para simplificar este código.

Tenga en cuenta que este es un paso opcional. No necesitas usar el Context API ya que estamos pasando los accesorios solo un nivel de profundidad y el código actual funciona perfectamente bien y no hemos usado ningún enfoque incorrecto para pasar los props.

Pero solo para simplificar el código del enrutador y darle una idea sobre cómo aprovechar el poder de el API React Context, la usaremos en nuestra aplicación.

Crea un nuevo archivo ContextoDeLosLibros.js dentro de la carpeta contexto con el siguiente contenido:

import React from 'react';

const ContextoDeLosLibros = React.createContext();

export default ContextoDeLosLibros;

Ahora, dentro del archivo EnrutadorDeApp.js, importe el contexto exportado anterior.

import ContextoDeLosLibros from '../contexto/ContextoDeLosLibros';

y reemplace el componente EnrutadorDeApp con el siguiente código:

const EnrutadorDeApp = () => {
  const [libros, setLibros] = usaAlmacenamientoLocal('libros', []);

  return (
    <BrowserRouter>
      <div>
        <Header />
        <div className="main-content">
          <ContextoDeLosLibros.Provider value={{ libros, setLibros }}>
            <Switch>
              <Route component={ListaDeLibros} path="/" exact={true} />
              <Route component={AgregaLibro} path="/add" />
              <Route component={EditarLibro} path="/edit/:id" />
              <Route component={() => <Redirect to="/" />} />
            </Switch>
          </ContextoDeLosLibros.Provider>
        </div>
      </div>
    </BrowserRouter>
  );
};

Aquí, hemos vuelto a convertir el patrón de render props a las rutas normales y hemos agregado el bloque Switch completo dentro del componente ContextoDeLosLibros.Provider de esta manera:

<ContextoDeLosLibros.Provider value={{ libros, setLibros }}>
 <Switch>
 ...
 </Switch>
</ContextoDeLosLibros.Provider>

Aquí, para el componente ContextoDeLosLibros.Provider, proporcionamos un prop de value al pasar los datos a los que queremos acceder dentro de los componentes mencionados en la Route.

Entonces, ahora, cada componente declarado como parte de Route podrá acceder a los libros y setLibros a través de el Context API.

Ahora, abra el archivo ListaDeLibros.js y elimine los libros y los props de setLibros que están desestructurados, ya que ya no estamos pasando los props directamente.

Importe el ContextoDeLosLibros y useContext en la parte superior del archivo:

import React, { useContext } from 'react';
import ContextoDeLosLibros from '../contexto/ContextoDeLosLibros';

Y encima de la función manejarEliminarLibro, agrega el siguiente código:

const { libros, setLibros } = useContext(ContextoDeLosLibros);

Aquí, estamos sacando los libros y los props de setLibros del ContextoDeLosLibros usando el useContext hook.

Todo su archivo ListaDeLibros.js se verá así:

import React, { useContext } from 'react';
import _ from 'lodash';
import Libro from './Libro';
import ContextoDeLosLibros from '../contexto/ContextoDeLosLibros';

const ListaDeLibros = () => {
  const { libros, setLibros } = useContext(ContextoDeLosLibros);

  const manejarEliminarLibro = (id) => {
    setLibros(libros.filter((libro) => libro.id !== id));
  };

  return (
    <React.Fragment>
      <div className="book-list">
        {!_.isEmpty(libros) ? (
          libros.map((libro) => (
            <Libro key={libro.id} {...libro} manejarEliminarLibro={manejarEliminarLibro} />
          ))
        ) : (
          <p className="message">No hay libros disponibles. Por favor agregue algunos libros.</p>
        )}
      </div>
    </React.Fragment>
  );
};

export default ListaDeLibros;

Ahora, haz cambios similares en el archivo AgregaLibro.js.

Todo su archivo AgregaLibro.js se verá así:

import React, { useContext } from 'react';
import FormularioDeLibro from './FormularioDeLibro';
import ContextoDeLosLibros from '../contexto/ContextoDeLosLibros';

const AgregaLibro = ({ historia }) => {
  const { libros, setLibros } = useContext(ContextoDeLosLibros);

  const handleOnSubmit = (libro) => {
    setLibros([libro, ...libros]);
    historia.push('/');
  };

  return (
    <React.Fragment>
      <FormularioDeLibro handleOnSubmit={handleOnSubmit} />
    </React.Fragment>
  );
};

export default AgregaLibro;

Tenga en cuenta que aquí, todavía estamos usando la desestructuración para el prop de historia. Solo hemos eliminado los libros y setLibros de la sintaxis de desestructuración.

Ahora, haz cambios similares en el archivo EditarLibro.js.

Todo su archivo EditarLibro.js se verá así:

import React, { useContext } from 'react';
import FormularioDeLibro from './FormularioDeLibro';
import { useParams } from 'react-router-dom';
import ContextoDeLosLibros from '../contexto/ContextoDeLosLibros';

const EditarLibro = ({ historia }) => {
  const { libros, setLibros } = useContext(ContextoDeLosLibros);
  const { id } = useParams();
  const libroParaEditar = libros.find((libro) => libro.id === id);

  const handleOnSubmit = (libro) => {
    const librosFiltrados = libros.filter((libro) => libro.id !== id);
    setLibros([libro, ...librosFiltrados]);
    historia.push('/');
  };

  return (
    <div>
      <FormularioDeLibro libro={libroParaEditar} handleOnSubmit={handleOnSubmit} />
    </div>
  );
};

export default EditarLibro;

Si revisa la aplicación, verá que funciona exactamente como antes, pero ahora estamos usando la React Context API.

¡Gracias por leer!

Puedes encontrar el código completo de esta aplicación en este repositorio.

¿Quieres mantenerte al día con el contenido regular sobre JavaScript, React, Node.js? Sígueme en LinkedIn.

Git es una herramienta de control de versiones que le permite mantener y ver diferentes versiones de su aplicación. Cuando una nueva actualización rompe su aplicación, Git le permite revertir esos cambios a la versión anterior.

Además del control de versiones, Git le permite trabajar en múltiples entornos al mismo tiempo. Múltiples entornos en este contexto significa ramas.

¿Por qué necesitas ramas?

Cuando trabajes con git, tendrás un entorno maestro (también llamado principal) (rama). Esta rama en particular contiene el código fuente que se implementa cuando su aplicación está lista para la producción.

Cuando desees actualizar su aplicación, también puedes agregar más cambios (commits) a esta rama. Para cambios menores, esto puede no ser un gran problema, pero para cambios grandes, hacer esto no es lo ideal. Y es por eso que existen otras ramas.

Para crear y usar una nueva rama, usa el siguiente comando en tu terminal en el directorio del proyecto:

# crear una nueva rama
git branch rama-nombre
# cambiar el ambiente a la nueva rama
git checkout rama-nombre

En esta nueva rama, puede crear los nuevos cambios. Luego, cuando hayas terminado, puedes combinarlos con la rama maestra.

Otro beneficio de las ramas es que permiten que varios desarrolladores trabajen en el mismo proyecto simultáneamente. Si tienes varios desarrolladores trabajando en la misma rama maestra, puede ser desastroso. Tiene demasiados cambios entre el código de cada desarrollador, y esto generalmente termina en conflictos de combinación.

Con Git, puede saltar a otra rama (otro entorno) y realizar cambios allí, mientras se trabaja en otras ramas.

¿Qué significa rama remota de Git Checkout?

Cuando comienzas un proyecto con Git, obtiene dos entornos: la rama maestra local (que existe en su computadora) y la rama maestra remota (que existe en una plataforma compatible con Git como GitHub).

Puedes enviar cambios desde la rama principal local a la rama principal remota y también extraer cambios de la rama remota.

Cuando creas una rama localmente, solo existe localmente hasta que se envía a GitHub, donde se convierte en la rama remota. Esto se muestra en el siguiente ejemplo:

# crear una nueva rama
git branch nueva-rama
# cambiar el ambiente a la nueva rama
git checkout nueva-rama
# crear un cambio
touch nuevo-archivo.js
# cometer el cambio
git add .
git commit -m "añadir nuevo archivo"
# empujar a una nueva rama
git push --set-upstream origin nueva-rama

Del ejemplo anterior, origin nueva-rama se convierte en la rama remota. Como habrás notado, creamos una nueva rama y confirmamos un cambio en ella antes de pasar a la nueva rama remota.

Pero, ¿qué pasaría si la rama remota ya existiera y quisiéramos llevar la rama y todos sus cambios a nuestro entorno local?

Ahí es donde hacemos una "Rama Remota de Git Checkout".

Cómo hacer Git Checkout en una rama remota

Digamos que hay una rama remota creada por otro desarrollador y desea extraer esa rama. Así es como lo haces:

1. Recuperar todas las ramas remotas

git fetch origin

Esto recupera todas las ramas remotas del repositorio. origin es el nombre remoto al que se dirige. Entonces, si tenía un nombre remoto upstream, puedes llamar a git fetch upstream.

2. Enumera las ramas disponibles para checkout

Para ver las ramas disponibles para checkout, ejecute lo siguiente:

git branch -a

El resultado de este comando es la lista de ramas disponibles para checkout. Para las ramas remotas, las encontrará con el prefijo remotes/origin.

3. Obtener cambios de una rama remota

Tenga en cuenta que no puedes hacer cambios directamente en una rama remota. Por lo tanto, necesitas una copia de esa rama. Digamos que deseas copiar fix-failing-tests de la rama remota, así es como lo harías:

git checkout -b fix-failing-tests origin/fix-failing-tests

Lo que esto hace es:

• crea una nueva rama llamada fix-failing-tests
• checkout esa rama
• extrae los cambios desde el origin/fix-failing-tests a esa rama

Y ahora tienes una copia de esa rama remota. Además, puedes enviar confirmaciones a esa rama remota. Por ejemplo, puedes empujar un nuevo compromiso así:

touch nuevo-archivo.js
git add .
git commit -m "añadir nuevo archivo"
git push

Esto empujará los cambios comprometidos a origin/fix-failing-tests. Si te diste cuenta, no tuvimos que especificar dónde estábamos enviando los cambios (como git push origin fix-failing-tests). Eso es porque git configura automáticamente la rama local para rastrear la rama remota.

Conclusión

La ramificación de Git facilita mucho la colaboración durante el desarrollo de aplicaciones.

Con las ramas, diferentes desarrolladores pueden trabajar fácilmente en diferentes partes de la aplicación simultáneamente.

Con la rama remota de Checkout, la colaboración se vuelve incluso más fluida, ya que los desarrolladores también pueden copiar ramas remotas localmente en sus sistemas, realizar cambios y enviarlos a las ramas remotas.

En este tutorial, utilizaremos la plataforma Node.js para crear una aplicación de chat en tiempo real que envíe y muestre mensajes a un destinatario al instante sin actualizar la página. Usaremos el framework de JavaScript Express.js y las bibliotecas Mongoose y Socket.io para lograr esto.

Antes de comenzar, echemos un vistazo rápido a los conceptos básicos de Node.js

Node.js

Node.js es un entorno de tiempo de ejecución de JavaScript, de código abierto y multiplataforma que ejecuta código JavaScript fuera del navegador. La ventaja más importante de usar Node es que podemos usar JavaScript como lenguaje tanto de front-end como de back-end.

Como sabemos, JavaScript se usó principalmente para secuencias de comandos del lado del cliente, en las que las secuencias de comandos se incrustaron en el HTML de una página web y se ejecutaron en el lado del cliente mediante un motor de JavaScript en el navegador web del usuario.

Node.js permite a los desarrolladores usar JavaScript para escribir herramientas de línea de comandos y para secuencias de comandos del lado del servidor —ejecutando secuencias de comandos del lado del servidor para producir contenido de página web dinámico antes de que la página se envíe al navegador web del usuario.

Para instalar node:

https://nodejs.org/es/download/

Aunque el node tiene un solo subproceso, aún es más rápido usar funciones asíncronas. Por ejemplo, Node puede procesar otras cosas mientras se lee un archivo del disco o mientras se espera que se complete una solicitud HTTP. El comportamiento asincrónico se puede implementar mediante devoluciones de callback. Además, JavaScript funciona bien con bases de datos JSON y No-SQL.

Módulos NPM

Nodejs permite incluir en la aplicación los módulos de las librerías. Estos módulos pueden ser módulos definidos por el usuario o de terceros.

Los módulos de terceros se pueden instalar con el siguiente comando:

npm install nombre_del_módulo

y los módulos instalados se pueden usar usando la función require():

var módulo = require(‘nombre_del_módulo’)

En las aplicaciones de Node, usaremos un archivo package.json para mantener las versiones del módulo. Este archivo se puede crear con este comando:

npm init

y los paquetes deben instalarse de la siguiente manera:

npm install -s nombre_del_módulo

Hay muchos frameworks que se pueden agregar como módulos a nuestra aplicación Node. Estos se explicarán más adelante según sea necesario.

Aplicación de Chat Simple

La aplicación debe permitir que varios usuarios chateen juntos. Los mensajes deben actualizarse sin refrescar la página. Para simplificar, evitaremos la parte de autenticación.

Podemos empezar por crear un nuevo directorio de proyecto y pasar a él. Luego podemos iniciar nuestro proyecto con el siguiente comando:

npm init

Esto nos pedirá que ingresemos detalles sobre nuestro proyecto.

Después de esto, se creará un archivo package.json:

{
 “name”: “test”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “scripts”: {
 “test”: “echo \”Error: no test specified\” && exit 1"
 },
 “author”: “”,
 “license”: “ISC”
}

Nuestro directorio de aplicaciones ya está configurado.

Lo primero que necesitamos crear es un servidor. Para crear eso, utilizaremos un framework llamado Express.

Express.js

Express.js, o simplemente Express, es un framework de aplicación web para Node.js. Express ofrece un sólido conjunto de características para aplicaciones web y móviles. Express ofrece una capa delgada de características fundamentales de aplicaciones web, sin encubrir las características de Node.js.

Instalaremos Express.js usando el siguiente comando:

npm install -s express

Dentro del archivo package.json se agregará una nueva línea:

dependencies”: {
 “express”: “⁴.16.3”
 }

A continuación, crearemos un archivo server.js.

En este archivo necesitamos requerir Express y crear una referencia a una variable desde una instancia de Express. Los contenidos estáticos como HTML, CSS o JavaScript se pueden servir usando express.js:

var express = require(‘express’);

var app = express();

y podemos comenzar a escuchar un puerto usando el código:

var servidor = app.listen(3000, () => {
 console.log(‘el servidor se está ejecutando en el puerto’, servidor.address().port);
});

Ahora necesitamos crear un archivo HTML index.html que muestre nuestra interfaz de usuario. He agregado bootstrap y JQuery cdn.

//index.html

<!DOCTYPE html>
<html>
<head>
 <! — incluir bootstrap y jquery cdn →
</head>
<body>
<div class=”container”>
 <br>
 <div class=”jumbotron”>
 <h1 class=”display-4">Enviar mensaje</h1>
 <br>
 <input id = “nombre” class=”form-control” placeholder=”Nombre”>
 <br>
 <textarea id = “mensaje” class=”form-control” placeholder=”Su mensaje aquí”>
</textarea>
 <br>
 <button id=”enviar” class=”btn btn-success”>Enviar</button>
 </div>
 <div id=”mensajes”>
 
</div>
</div>
<script>

</script>
</body>
</html>

Tenga en cuenta que la etiqueta vacía <script> <;/script> será el lugar en el que escribiremos el código JavaScript del lado del cliente.

Para decirle a Express eso, usaremos un archivo estático. Agregaremos una nueva línea dentro de server.js:

app.use(express.static(__dirname));

Nosotros podemos ejecutar el server.js usando el comando:

node ./server.js

O un paquete llamado nodemon, para que los cambios realizados en el código sean detectados automáticamente. Descargaremos nodemon usando el comando:

npm install -g nodemon

-g — global, para que sea accesible en todos los proyectos.

Ejecutaremos el código usando el comando:

nodemon ./server.js

Si vas a localhost:3000 podemos ver el archivo de index:

Ahora que nuestro servidor está funcionando, necesitamos crear nuestra base de datos. Para esta aplicación, tendremos una base de datos No-SQL y usaremos Mongodb. Estoy configurando mi mongodb en mongodb.com. Nuestra base de datos contendrá una única colección llamada mensajes con los campos nombre y mensaje.

Para conectar esta base de datos a la aplicación, usaremos otro paquete llamado Mongoose.

Mongoose

Mongoose es una herramienta de modelado de objetos MongoDB diseñada para trabajar en un entorno asíncrono. Mongoose se puede instalar usando el comando:

npm install -s mongoose

Dentro de server.js necesitaremos mongoose:

var mongoose = require(‘mongoose’);

Y le asignaremos una variable, la URL de nuestra base de datos mongodb:

var dbUrl = ‘mongodb://username:pass@ds257981.mlab.com:57981/simple-chat’

Mongoose se conectará a la base de datos mongodb con el método de conexión:

mongoose.connect(dbUrl , (err) => { 
   console.log(‘Mongodb conectado’,err);
})

Y definiremos nuestro modelo de mensaje como:

var Mensaje = mongoose.model(‘Mensaje’,{ nombre : String, mensaje: String})

Podemos implementar la lógica de chat ahora. Pero antes de eso, hay un paquete más que debe agregarse.

Body-Parser

Body-Parser extrae la parte del cuerpo completo de una secuencia de solicitud entrante y la expone en req.body. El middleware formaba parte de Express.js anteriormente, pero ahora debe instalarlo por separado.

Instálalo usando el siguiente comando:

npm install -s body-parser

Agregue los siguientes códigos a server.js:

var bodyParser = require(‘body-parser’)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}))

Enrutamiento

El enrutamiento se refiere a cómo los puntos finales de una aplicación (URIs) responden a las solicitudes de los clientes. Usted define el enrutamiento usando métodos del objeto de aplicación Express que corresponden a métodos HTTP: app.get() para manejar solicitudes GET y app.post() para manejar solicitudes POST.

Estos métodos de enrutamiento especifican una función de callback (a veces denominada "funciones de controlador") que se activa cuando la aplicación recibe una solicitud para la ruta (punto final) y el método HTTP especificados. En otras palabras, la aplicación "escucha" las solicitudes que coinciden con las rutas y los métodos especificados, y cuando detecta una coincidencia, llama a la función de callback especificada.

Ahora necesitamos crear dos rutas a los mensajes para que nuestro chat funcione.

Dentro de server.js:

get: obtendrá todos los mensajes de la base de datos

app.get('/mensajes', (req, res) => {
  Mensaje.find({},(err, mensajes)=> {
    res.send(mensajes);
  })
})

post : publicará nuevos mensajes creados por el usuario en la base de datos

app.post('/mensajes', (req, res) => {
  var mensaje = new Mensaje(req.body);
  mensaje.save((err) =>{
    if(err)
      sendStatus(500);
    res.sendStatus(200);
  })
})

Para conectar estas rutas al front-end, debemos agregar el siguiente código en la etiqueta del script del lado del cliente en index.html:

$(() => {
    $("#enviar").click(()=>{
       enviarMensaje({
          nombre: $("#nombre").val(), 
          mensaje:$("#mensaje").val()});
        })
      obtenerMensajes()
    })
    
function agregarMensajes(mensaje){
   $(“#mensajes”).append(`
      <h4> ${mensaje.nombre} </h4>
      <p>  ${mensaje.mensaje} </p>`)
   }
   
function obtenerMensajes(){
  $.get(‘http://localhost:3000/mensajes', (data) => {
   data.forEach(agregarMensajes);
   })
 }
 
function enviarMensaje(mensaje){
   $.post(‘http://localhost:3000/mensajes', mensaje)
 }

Aquí, enviarMensaje se usa para invocar la ruta de publicación de los mensajes y guardar un mensaje enviado por el usuario. El mensaje se crea cuando un usuario hace clic en el botón enviar.

De manera similar, obtenerMensajes se usa para invocar la ruta de obtención de mensajes. Esto hará que todos los mensajes se guarden en la base de datos y se agregarán al div de mensajes.

El único problema ahora es que no hay forma de que el cliente sepa si el servidor está actualizado. Entonces, cada vez que publicamos un mensaje, debemos actualizar la página para ver los nuevos mensajes.

Para solucionar esto podemos añadir un sistema de notificaciones push que enviará mensajes del servidor al cliente. En Node.js usamos socket.io.

Socket.io

Socket.IO es una biblioteca de JavaScript para aplicaciones web en tiempo real. Permite la comunicación bidireccional en tiempo real entre los clientes web y el servidor. Tiene dos partes: una biblioteca del lado del cliente que se ejecuta en el navegador y una biblioteca del lado del servidor para Node.js. Socket.io permite la comunicación bidireccional basada en eventos en tiempo real.

Para instalar socket.io:

npm install -s socket.io

también necesitamos un paquete HTTP para que funcione Socket.io:

npm install -s http

Agregue el siguiente código a server.js:

var http = require(‘http’).Server(app);
var io = require(‘socket.io’)(http);

Y podemos crear una conexión:

io.on(‘connection’, () =>{
 console.log(‘Un usuario esta conectado’)
})

En el index.html agregue la siguiente etiqueta:

<script src=”/socket.io/socket.io.js”></script>

Ahora necesitamos crear una acción de emisión cuando se crea un mensaje en server.js. Así que la ruta de publicación se convierte en esto:

app.post('/mensajes', (req, res) => {
  var mensaje = new Mensaje(req.body);
  mensaje.save((err) =>{
    if(err)
      sendStatus(500);
    io.emit('mensaje', req.body);
    res.sendStatus(200);
  })
})

Y en la etiqueta del script del lado del cliente en index.html, agregue el siguiente código:

var socket = io();

socket.on(‘mensaje’, agregarMensajes)

Entonces, cada vez que se publica un mensaje, el servidor actualizará los mensajes en el div de mensajes.

¡¡Gran!!

Esta es una aplicación muy básica que podemos crear en Node.js. Hay muchas posibilidades de mejora. El código terminado se puede encontrar en https://github.com/amkurian/simple-chat

server.js

var express = require('express');
var bodyParser = require('body-parser')
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mongoose = require('mongoose');

app.use(express.static(__dirname));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}))

var Mensaje = mongoose.model('Mensaje',{
  nombre : String,
  mensaje : String
})

var dbUrl = 'mongodb://username:password@ds257981.mlab.com:57981/simple-chat'

app.get('/mensajes', (req, res) => {
  Mensaje.find({},(err, mensajes)=> {
    res.send(mensajes);
  })
})

app.get('/mensajes', (req, res) => {
  Mensaje.find({},(err, mensajes)=> {
    res.send(mensajes);
  })
})

app.post('/mensajes', (req, res) => {
  var mensaje = new Mensaje(req.body);
  mensaje.save((err) =>{
    if(err)
      sendStatus(500);
    io.emit('mensaje', req.body);
    res.sendStatus(200);
  })
})

io.on('connection', () =>{
  console.log('Un usuario esta conectado')
})

mongoose.connect(dbUrl ,{useMongoClient : true} ,(err) => {
  console.log('Mongodb conectado',err);
})

var servidor = http.listen(3001, () => {
 console.log(‘el servidor se está ejecutando en el puerto’, servidor.address().port);
});

Espero que esto haya sido útil para comprender algunos conceptos básicos.

Algunos enlaces útiles

Socket.IO
SOCKET.IO 2.0 IS HERE FEATURING THE FASTEST AND MOST RELIABLE REAL-TIME ENGINE ~/Projects/tweets/index.js var io =…socket.io

Express - Node.js web application framework
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and…expressjs.com

http://mongoosejs.com/

Cambiar de rama es algo que debes hacer con frecuencia en Git.

Para hacer esto, puedes usar el comando git checkout.

Cómo crear una nueva rama en Git

Para crear una nueva rama en Git, usa el comando git checkout y pasa el indicador -b con un nombre.

Esto creará una nueva rama a partir de la rama actual. El historial de la nueva rama comenzará en el lugar actual de la rama de la que "se ramificó".

Suponiendo que actualmente te encuentras en una rama llamada master:

(master)$ git checkout -b mi-función
Switched to a new branch 'mi-función'
(mi-función)$

Aquí puedes ver una nueva rama creada llamada mi-función que se ramificó de master.

Cómo cambiar a una rama existente en Git

Para cambiar a una rama existente, puedes usar git checkout nuevamente (sin el indicador -b ) y pasar el nombre de la rama a la que desea cambiar:

(mi-función)$ git checkout master
Switched to branch 'master'
(master)$

También hay un atajo útil para volver a la rama anterior en la que estabas, pasando  -  a  git checkout en lugar de un nombre de rama:

(mi-función)$ git checkout -
Switched to branch 'master'
(master)$ git checkout -
Switched to branch 'mi-función'
(mi-función)$

Cómo salir una confirmación específica

Para salir o cambiar una confirmación específica, también puedes usar  git checkout  y pasar el SHA de la confirmación en lugar de un nombre de rama.

Después de todo, las ramas en realidad solo son indicadores y rastreadores de confirmaciones específicas en el historial de Git.

Cómo encontrar un SHA de una confirmación

Una forma de encontrar el SHA de una confirmación es ver el registro de Git.

Puedes ver el registro usando el comando  git log:

(mi-función)$ git log
commit 94ab1fe28727b7f8b683a0084e00a9ec808d6d39 (HEAD -> mi-función, master)
Author: John Mosesman <johnmosesman@gmail.com>
Date:   Mon Apr 12 10:31:11 2021 -0500

    Este es el segundo mensaje de confirmación.

commit 035a128d2e66eb9fe3032036b3415e60c728f692 (blah)
Author: John Mosesman <johnmosesman@gmail.com>
Date:   Mon Apr 12 10:31:05 2021 -0500

    Este es el primer mensaje de confirmación.

En la primera línea de cada confirmación, después de la palabra commit, hay una larga cadena de caracteres y números: 94ab1fe28727...

Esto se llama SHA. Un SHA es un identificador único que se genera para cada confirmación.

Para ver una confirmación específica, solo necesitas pasar el SHA de la confirmación como parámetro para git checkout:

(mi-función)$ git checkout 035a128d2e66eb9fe3032036b3415e60c728f692
Note: switching to '035a128d2e66eb9fe3032036b3415e60c728f692'.

Estás en estado de 'HEAD separada'. Puedes mirar a tu alrededor,
hacer cambios experimental y confirmaciones, y puede descartar cualquier
confirmación que realices en este estado sin afectar a ninguna rama
cambiando de nuevo a una rama.

Si deseas crear una nueva rama para retener las confirmaciones que creas, puedes
hazlo (ahora o más tarde) usando-c con el comando switch. Ejemplo:

  git switch -c <nombre-de-nueva-rama>

O deshaz esta operación con:

  git switch -

Desactiva este consejo configurando el consejo de la variable de configuración. HEAD separada a falso

HEAD ahora está en 035a128 a
((HEAD separada en 035a128))$

Nota: Por lo general, solo necesitas usar los primeros caracteres de SHA—ya que los primeros cuatro o cinco caracteres de la cadena probablemente sean únicos en todo el proyecto.

¿Qué es un estado HEAD separada?

El resultado de ver una confirmación específica lo coloca en un "estado HEAD separada".

De la documentación:

[un estado HEAD separada] significa simplemente que HEAD se refiere a una confirmación específica, en lugar de referirse a una rama nombrada

Básicamente, HEAD (uno de los indicadores internos de Git que rastrea dónde se encuentra en el historial de Git) se ha desviado de las ramas conocidas, por lo que los cambios desde este punto formarían una nueva ruta en el historial de Git.

Git quiere asegurarse de que eso es lo que pretendes, por lo que te brinda una especie de "espacio libre" para experimentar, como se describe en el resultado:

Estás en estado de 'HEAD separada'. Puedes mirar a tu alrededor,
hacer cambios experimental y confirmaciones, y puede descartar cualquier
confirmación que realices en este estado sin afectar a ninguna rama
cambiando de nuevo a una rama.

Desde esta posición tienes dos opciones:

• Experimenta y luego desecha tus cambios volviendo a tu rama anterior
• Trabaja desde aquí y comienza una nueva rama desde este punto

Puedes usar el comando git switch - para deshacer cualquier cambio que hayas realizado y volver a tu rama anterior.

Si, en cambio, deseas mantener tus cambios y continuar desde aquí, puedes usar git switch -c <nueva-rama-nombre> para crear una nueva rama desde este punto.

Conclusión

El comando git checkout es un comando útil y multipropósito.

Puedes usarlo para crear nuevas ramas, ver una rama, ver confirmaciones específicas y más.

Si declaras varios variables para contener diferentes valores, esto puede hacer que su programa se vuelva desordenado y torpe.

Por ejemplo, si necesitas almacenar tres características cada una para 10 personas, teniendo 30 variables declaradas individualmente puede hacer que su programa parezca menos organizado.

Así que necesitas una forma de agrupar valores con características similares para que su código sea más legible. Y en JavaScript, los objetos funcionan bien para este propósito.

A diferencia de otros tipos de datos, los objetos pueden almacenar valores complejos. Debido a esto, JavaScript depende en gran medida de ellos. Así que es importante que se familiarice con lo que es un objeto, cómo crear uno y cómo puede usarlo antes de profundizar el aprendizaje de JavaScript.

Este artículo le presentará los conceptos básicos de los objetos, la sintaxis de los objetos, los diferentes métodos para crear objetos, cómo copiar objetos y cómo iterar sobre un objeto.

Para aprovechar al máximo este artículo, debes tener al menos un conocimiento básico de JavaScript, en particular las variables, funciones y tipos de datos.

¿Qué son los objetos en JavaScript?

Un objeto es un tipo de datos que puede incluir colecciones de pares clave-valor.

Una diferencia importante entre un objeto y otros tipos de datos, como cadenas y números en JavaScript, es que un objeto puede almacenar diferentes tipos de datos como sus valores. Por otro lado, los tipos de datos primitivos como números y cadenas pueden almacenar solo números y cadenas, respectivamente, como sus valores.

La clave, también conocida como nombre de propiedad, suele ser una cadena. Si se utiliza cualquier otro tipo de datos como nombre de propiedad que no sean cadenas, se convertirá en una cadena.

Puede visualizar un objeto como un estante de usos múltiples que contiene espacio para sus dispositivos y adornos, así como un espacio de almacenamiento para libros y archivos.

La característica más reconocible de un objeto son los corchetes que contienen el par clave-valor.

const objetoVacio = {};
console.log(typeof objetoVacio); //'object'

El contenido de un objeto puede consistir en variables, funciones o ambos. Variables que se encuentran en los objetos son propiedades, mientras que las funciones son métodos. Los métodos permiten que los objetos usen las propiedades dentro de ellos para realizar algún tipo de acción.

Por ejemplo, en el código de muestra a continuación, objeto1.usuario, objeto1.nacionalidad y objeto1.profesion son propiedades de objeto1 mientras que objeto1.miBiografia() es un método:

const objeto1 = {
  usuario: "Alex",
  nacionalidad: "Nigeria",
  profesion: "Ingeniero de Software",
  miBiografia() {
    console.log(
      `Mi nombre es ${this.usuario}. Soy un ${this.profesion} de ${this.nacionalidad}`
    );
  },
};
console.log(objeto1.usuario); // Alex
console.log(objeto1.nacionalidad); // Nigeria
console.log(objeto1.profesion); // Ingeniero de Software
console.log(objeto1.miBiografia()); // Mi nombre es Alex. Soy un Ingeniero de Software de Nigeria

Las claves en el código de muestra anterior son usuario, nacionalidad y profesion, mientras que sus valores son los valores de cadena que vienen después de los dos puntos. Además, observa el uso de la palabra clave this. La palabra clave this simplemente se refiere al objeto en sí.

Como se mencionó anteriormente en este artículo, el valor de una propiedad puede ser cualquier tipo de datos. En el siguiente código de ejemplo, los valores son
arreglos y objetos:

 const objeto2 = {
  usuario: ["Alex", "James", "Mohammed"],
  profesión: {
    alex: "Ingeniero de Software",
    james: "Abogado",
    mohammed: "Escritor técnico",
  },
};
console.log(objeto2.usuario); // ['Alex', 'James', 'Mohammed']
console.log(objeto2.profesión); // {alex: "Ingeniero de Software", james: "Abogado", mohammed: "Escritor técnico"}

Cómo acceder a objetos y crear nuevas propiedades o métodos de objeto en JavaScript

Hay dos formas de acceder a los objetos: notación de puntos y notación de corchetes. En el código de muestra anterior, usamos la notación de puntos para acceder a las propiedades y métodos en el objeto1 y el objeto2.

Además, para crear nuevas propiedades y métodos después de la declaración de un objeto, puedes usar la notación de puntos o la notación de corchetes. Solo tienes que indicar la nueva propiedad y darle un valor.

Por ejemplo, podemos agregar nuevas propiedades a objeto2 de este modo:

objeto2.edad = [30, 32, 40];
objeto2["resumen"] = `Objeto2 tiene ${objeto2.usuario.length} usuarios`;
console.log(objeto2);
/*
{
    "usuario": [
        "Alex",
        "James",
        "Mohammed"
    ],
    "profesion": {
        "alex": "Ingeniero de Software",
        "james": "Abogado",
        "mohammed": "Escritor técnico"
    },
    "edad": [
        30,
        32,
        40
    ],
    "resumen": "Objeto2 tiene 3 usuarios"
}
*/

De manera similar, puedes usar cualquier notación para cambiar el valor de un objeto:

objeto2.usuario = ["jane", "Williams", "John"];
objeto2["edad"] = [20, 25, 29];
console.log(objeto2.usuario); //['jane', 'Williams', 'John']
console.log(objeto2.edad); //[20, 25, 29]

Aunque la notación de puntos es la más utilizada para acceder a las propiedades y métodos de un objeto, tiene algunas limitaciones. Veámoslos ahora.

No puedes usar valores como nombres de propiedades con notación de puntos

Si deseas utilizar el valor de un variable como nombre de propiedad en su objeto, debes utilizar la notación de corchetes y no la notación de puntos. Si el valor de el variable se define en tiempo de ejecución o no es irrelevante.

El tiempo de ejecución es una fase de un programa de computadora en la que el programa se ejecuta en un sistema de computación.

Por ejemplo:

const objeto3 = {};
const aparato = prompt("ingresa un tipo de aparato");
objeto3[aparato] = ["jbl", "sony"];
console.log(objeto3); // (respuesta ingresada en el prompt): ["jbl","sony"] observa que el nombre de la propiedad es el valor que ingresa en la respuesta al mensaje del prompt

Si defines el valor de el variable en su código, y usas la notación de puntos para establecer ese valor como un nombre de propiedad de su objeto, la notación de puntos creará una nueva propiedad con el nombre de el variable en lugar del valor de el variable.

const computadora = "marcas";
objeto3.computadora = ["hp", "dell", "apple"];
console.log(objeto3.marcas); // undefined
console.log(objeto3.computadora); // ['hp', 'dell', 'apple']

objeto3[computadora] = ["hp", "dell", "apple"];
console.log(objeto3.marcas); // ['hp', 'dell', 'apple']

Nota la omisión de comillas dentro de los corchetes. Esto se debe a que los paréntesis tomaron un variable.

No puedes usar propiedades de varias palabras con notación de puntos

Cuando el nombre de la propiedad es una cadena de varias palabras, la notación de puntos es insuficiente. Por ejemplo:

objeto3.usuario altura = [5.6, 5.4, 6.0];
Console.log(objeto3.usuario altura); //SyntaxError

Se produce un error de sintaxis porque JavaScript lee el comando como  objeto3.usuario, pero no reconoce la altura de la cadena, entonces devuelve un error de sintaxis.

Cuando se utiliza la notación de puntos para acceder a objetos, se aplican las reglas habituales de declaración de un variable. Esto significa que si deseas utilizar la notación de puntos para acceder a un objeto o crear una propiedad, el nombre de la propiedad no debe comenzar con un número, no debe incluir espacios y solo puede incluir los caracteres especiales $ y _.

Para evitar este tipo de error, debes usar la notación de corchetes. Por ejemplo, puedes corregir el código de muestra anterior de esta manera:

objeto3["usuario altura"] = [5.6, 5.4, 6.0];  
console.log(objeto3["usuario altura"]); //[5.6, 5.4, 6]

Cómo crear objetos con el constructor de objetos en JavaScript

Hay dos métodos por cuál puedes crear un objeto: un objeto literal y el constructor de objetos. Los objetos usados hasta ahora como ejemplos en este artículo son objetos literales. Objetos literales funcionan bien si deseas crear un solo objeto.

Pero si deseas crear más de un objeto, siempre es mejor usar el constructor de objetos. Esto le permite evitar repeticiones innecesarias en su código y también facilita cambiar las propiedades de su objeto.

Básicamente, los constructores son funciones cuyos nombres suelen estar en mayúsculas. El uso de mayúsculas en el nombre de un constructor no tiene ningún efecto en el objeto. Es sólo un medio de identificación.

Puedes usar un constructor para crear un nuevo objeto llamando al constructor con la palabra clave new. La palabra clave new creará una instancia de un objeto y vinculará la palabra clave this al nuevo objeto.

Como se mencionó anteriormente en este artículo, la palabra clave this es una referencia al objeto en sí.

Un ejemplo de un constructor de objetos es:

function Perfil(nombre, edad, nacionalidad) {
  this.nombre = nombre;
  this.edad = edad;
  this.nacionalidad = nacionalidad;
  this.biografia = function () {
    console.log(
      `Mi nombre es ${this.nombre}. Tengo ${this.edad} años de edad. Soy de ${this.nacionalidad}.`
    );
  };
}

const oladele = new Perfil("Oladele", 50, "Nigeria");
console.log(oladele.biografia()); // Mi nombre es Oladele. Tengo 50 años de edad. soy de Nigeria.

Cómo crear copias de objetos en JavaScript

A diferencia de los tipos de datos primitivos, como cadenas y números, la asignación de un objeto existente a otro variable no producirá una copia del original sino una referencia en la memoria.

Lo que esto significa es que tanto el objeto original como los objetos posteriores creados al asignar el objeto original como un valor hacen referencia al mismo elemento en la memoria.

Esto significa que un cambio en el valor de cualquiera de los objetos también provocará un cambio en los demás. Por ejemplo:

let x = 10;
let y = x;
x = 20;
console.log(x); // 20
console.log(y); // 10

let objeto4 = {
  nombre: "Alex",
  edad: 40,
};
let objeto5 = objeto4;
console.log(objeto5); // {nombre: 'Alex', edad: 40}
objeto4.nombre = "Jane";
console.log(objeto5); // {nombre: 'Jane', edad: 40}
console.log(objeto4 === objeto5); // true

Para crear una copia de un objeto, puedes utilizar el operador de propagación.

¿Qué es el operador de propagación?

El operador de propagación está representado por tres puntos ... . Puedes utilizar el operador de propagación para copiar los valores de cualquier iterable incluyendo objetos.

Un iterable es un objeto que se puede repetir o iterar con la ayuda de un for...bucle. Los ejemplos de iterables incluyen objetos, arreglos, conjuntos, cadenas, etc.

Para usar el operador de propagación, debes anteponerlo al objeto del que deseas copiar. Por ejemplo:

let objeto6 = {...objeto5}; 
objeto5.nombre = "Willaims"; 
console.log(objeto5); //{nombre: 'Willaims', edad: 40}
console.log(objeto6); //{nombre: 'Jane', edad: 40}
console.log(objeto5 === objeto6); //false

Como puedes ver, a diferencia del ejemplo de código anterior, donde un cambio en el objeto4 causó un cambio en el objeto5, el cambio en el objeto6 no resultó en un cambio en el objeto5.

Cómo utilizar el método Object.assign()

El método Object.assign() copia todas las propiedades enumerables de un objeto en otro y luego devuelve el objeto modificado.

El método toma dos parámetros. El primer parámetro es el objeto de destino que toma las propiedades copiadas. El segundo parámetro es el objeto de origen que tiene las propiedades que desea copiar. Por ejemplo :

let objeto7  = Object.assign({}, objeto6); 
console.log(objeto7); //{nombre: 'Jane', edad: 40}
console.log(objeto7); //{nombre: 'Jane', edad: 40}

console.log(objeto6 === objeto7); //false
objeto6.edad = 60
console.log(objeto6); //{nombre: 'Jane', edad: 60}
console.log(objeto7); //{nombre: 'Jane', edad: 40}

Puedes ver en el código de ejemplo anterior que un cambio en el valor de la propiedad de edad del objeto6 no provocó un cambio en el valor de la propiedad de edad del objeto7.

Ten en cuenta que tanto el operador de propagación como el método Object.assign() solo pueden hacer una copia superficial de un objeto.

Esto significa que si tienes objetos o arreglos profundamente anidados en tu objeto de origen, solo las referencias a dichos objetos se copian en el objeto de destino. Entonces, un cambio en el valor de cualquiera de los objetos profundamente anidados provocaría un cambio en el valor del objeto profundamente anidado del otro. Por ejemplo:

let objetoX = {
  nombre: "Mary",
  edad: 40,
  aparato: {
    marca: ["apple", "sony"],
  },
};

let objetoY = { ...objetoX };
objetoY.nombre = "Bianca";
objetoY.aparato.marca[0] = "hp";
console.log(objetoX);
/*
{
    "nombre": "Mary",
    "edad": 40,
    "aparato": {
        "marca": [
            "hp",
            "sony"
        ]
    }
}
*/

console.log(objetoY);
/*
{
    "nombre": "Bianca",
    "edad": 40,
    "aparato": {
        "marca": [
            "hp",
            "sony"
        ]
    }
}
*/

El código de muestra anterior realizó las siguientes acciones:

1. Creó un objeto llamado objetoX.
2. Le dio tres propiedades al objetoX: nombre, edad y aparato.
3. Le dio a la propiedad de aparato del objetoX un objeto como su valor.
4. Le dio al valor de objeto de la propiedad de aparato una propiedad de marca.
5. Le dio a la propiedad de marca un arreglo como su valor.
6. Copio las propiedades del objetoX en el objetoY con el uso del operador de propagación.
7. Cambió el valor de la propiedad de nombre del objetoY a Mary.
8. Cambió el primer elemento en el valor de el arreglo de la propiedad de la marca de apple a hp.

En el código de muestra, el valor de el arreglo es un objeto profundamente anidado. Observa que un cambio en el valor de la propiedad de nombre del objetoY no provocó un cambio en el valor de la propiedad de nombre del objetoX. Pero un cambio en el objeto profundamente anidado del objetoY provocó un cambio similar en el objeto profundamente anidado del objetoX.

Cómo Iterar Sobre Objetos en JavaScript

Use un bucle for...in para iterar sobre un objeto y seleccionar sus propiedades. La sintaxis del bucle for..in es la siguiente:

for(let llave in objeto) {
    //realizar acción(es) para cada llave
}

La palabra clave llave en el sintaxis anterior es un parámetro para las propiedades. Así que puedes reemplazarlo con cualquier palabra de tu elección. Reemplace la palabra clave del objeto con el nombre del objeto sobre el que desea iterar. Por ejemplo:

let objetoZ = {
  nombre: "Ade",
  Pronombre: "el",
  edad: 60,
};
for (let propiedad in objetoZ) {
  console.log(`${propiedad}: ${objetoZ[propiedad]}`);
}
/* 
nombre: Ade
Pronombre: he
edad: 60
*/

Observa el uso de la notación de corchetes en el bucle para obtener los valores de la propiedad. El uso de la notación de puntos en lugar de la notación de corchetes devolvería undefined.

Conclusión

En JavaScript, los objetos son probablemente el tipo de datos más importante. Los conceptos de programación como la programación orientada-a-objetos funcionan según el principio de aprovechar la flexibilidad de los objetos para almacenar valores complejos y su capacidad distintiva de interactuar con propiedades y métodos dentro del objeto.

Este artículo establece una base sólida para comprender conceptos tan avanzados al explicar los conceptos básicos de los objetos.