Jump to content

[CLASE 2] React Js - Handling Events, Virtual DOM, Arrays, Funciones, Asincronia, Callbacks, Promises y Axios


Nicolas.Tizeira

Recommended Posts

vWxNbfJ.png&key=c8935bd878b85345b03ec29b

Handling Events

No voy a explicar teoria sobre Handling Events, supongo que todos sabemos lo que es, paso a mostrarles como se realiza en React y nada mas.
Conocemos que un Handling Event en Javascript se realiza de la siguiente forma:

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

Pero en React Js se realiza de la siguiente forma:

<button onClick={saludar()}>
	Click me
</button>

Y dentro de un componente que vimos como crearlos la clase pasada, nos quedaria de la siguiente forma:

class BotonSaludar extends Component {
	saludar = () => {
		alert('Hello World!');
	}
	render() {
		return (
			<button onClick={this.saludar}>
              	Click me
			</button>
		);
	}
}

Entonces esto seria un solo componente, un solo archivo js, como vimos en el ejercicio anterior, y exportandolo, ya podemos usar este boton en cualquier lugar de nuestra web application llamandolo con:

<BotonSaludar/>

VIRTUAL DOM

Virtual DOM es una abstraccion del DOM, y es UNICO de React Js, es una copia fiel del DOM normal que todos conocemos.

DOM

Es una representación estructurada del documento HTML y define de qué manera los programas pueden acceder al fin de modificar, tanto su estructura, estilo y contenido.

Ilxr6UR.png

BltzsLR.png

 

Pero... ¿que sucede si se reconstruye el DOM cada vez que hay cambios?

ZznUwcf.png

Si, se volveria loco nuestro señor pintor jaja, y ESTO es lo que viene pasando EN TODOS los lenguajes de programacion de vistas, como html5. Cada vez que se realiza un cambio en la vista, se recontruye TODO el DOM, y asi millones de veces por cada client. Y aca viene una de las cosas mas novedosas de React Js.

React implementa Virtual DOM.

React crea una copia ligera del DOM y en cada cambio lo compara con el DOM Real. En lugar de renderizar el DOM completo en cada cambio, los aplica exclusivamente en las partes que varían.

wCidBzj.png

Métodos de arrays

forEach

Ejecuta la función callback una vez por cada elemento presente en el array en orden ascendente.

unArray.forEach(function(value, index){
 console.log("En el indice: " + index + " está el valor: " + value);
});

find

Devuelve el valor del primer elemento del array que cumple la función de prueba proporcionada. En caso de no encontrarla, devuelve undefined.

var inventario = [
 {nombre: 'manzanas', cantidad: 2},
 {nombre: 'bananas', cantidad: 0},
 {nombre: 'cerezas', cantidad: 5}
];

inventario.find(function(fruta){
 return fruta.nombre == 'cerezas'
});

Nos devuelve: { nombre: 'cerezas', cantidad: 5 }

map

map llama a la función callback provista una vez por elemento de un array, en orden, y construye un nuevo array con los resultados.

XC3nUC9.png

var results = [10,8,9,31].map(function(value){
 return value % 2;
});

Devuelve: [0,0,1,1]

¿Y si quisiera los resultados por separado?

var results = [10,8,9,31].map(function(value){
 return value % 2;
});
first = results[0];
second = results[1];
third = results[2];

En este caso lo que haremos sera destructurarlo:

var results = [10,8,9,31].map(function(value){
 return value % 2;
});
[first, second, third] = results;
var results = [10,8,9,31].map(function(value){
 return value % 2;
});
[first, second, ...rest] = results;

Y el destructurado tambien nos funciona con objetos:

var o = {p: 42, q: true};
var {p, q} = o;

filter

filter llama a la función dada callback para cada elemento del array , y construye un nuevo array con todos los valores para los cuales callback retorna un valor verdadero.

8MrD6W8.png

[10,8,9,31].filter(function(value){
 return value%2==0;
});

Devuelve: [10,8]

reduce
El método reduce() aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor.

ARizL8W.png

[3,4,10].reduce(function(accumulator,currentValue){
 return accumulator + currentValue;
},[initialValue]);


Devuelve: 17

an4vEqG.png&key=35ac386dedf604376b5b394e

Hora de la practica

var productos = [
  {nombre: 'mouse', categoria: 'computadora', cantidad: 2},
  {nombre: 'teclado', categoria: 'computadora', cantidad: 0},
  {nombre: 'almohadon', categoria: 'deco', cantidad: 0},
  {nombre: 'cartera', categoria: 'moda', cantidad: 0},
  {nombre: 'iphone 8', categoria: 'celulares', cantidad: 5}
];

a. Imprimir los nombres de todos los productos por consola.
b. Imprimir cantidad disponible de iphone 8.
c. Aumentar 2 cantidades en todos los productos.
d. Imprimir solo los productos que pertenecen a la categoría computadora.
e. Imprimir stock total.

an4vEqG.png&key=35ac386dedf604376b5b394e

Funciones

Definición de una función
Declaramos una función con un nombre para hacer referencia e invocar la función.

function cuadrado(lado) {
	return lado*lado
}
cuadrado(5)


Devuelve = 25

Expresión de una función
Asignamos una función anónima a una variable. Podemos invocar la función utilizando la variable.

var cuadrado = function(lado) {
	return lado*lado
}

cuadrado (5)

Devuelve = 25

function declarations vs function expressions

anterior(5);
doble(5);
var doble = function(num){
	return num*2;
};
function anterior(num){
	return num-1;
}
anterior(5); //4
doble(5); //Error

var doble = function(num){
	return num*2;
};

function anterior(num){
	return num-1;
}

Scope
El alcance de una variable determina su accesibilidad.

function next(){
	var a = 6;
	return a+1;
}

En este caso "a" es una variable LOCAL.
var a = 6;
function next(){
	return a+1;
}

Y en este caso "a" es una variable GLOBAL.

Closure

function padre(){
 var a = 1;
 function closure(){
 console.log(a);
 }
 closure();
}

Cuando al anidar funciones, una función crea una variable local y una función interna, ésta función interna es un closure y solo está disponible dentro de la función padre. A diferencia de la función padre, el closure no tiene variables locales y usa las declaradas dentro de padre().

Ahora para ver si entendimos, en el siguiente codigo que imprimiria en la consola?
 

function saludoConVar() {
var saludo = "Hola";
 if (true) {
 var saludo = Chau”;
console.log(saludo);
 }
 console.log(saludo);
}

Si efectivamente, en consola imprimiria las dos veces CHAU.

Let ES6

Permite declarar variables limitando su alcance (scope) al bloque, declaración o expresión donde se está usando.

function saludoConLet() {
let saludo = "Hola";
 if (true) {
 let saludo = "Chau";
console.log(saludo);
 }
 console.log(saludo);
}

Y ahora si, nos imprimiria en el primer console.log un Chau y en el siguiente un Hola.

an4vEqG.png&key=35ac386dedf604376b5b394e

Hora de la practica

a. Definir una función que reciba un número X e imprima los primeros X números de la sucesión Fibonacci. Los números de Fibonacci deben ser generados por la función.

0,1,1,2,3,5,8,13,21,34,55,...

b. ¿Qué creen que imprimirá por consola el siguiente código? ¡No ejecutar el código!

var frutas = ["Cereza", "Manzana", "Melón", "Frutilla"];

for(var i = 0; i <= frutas.length; i++){
	setTimeout( function(){
	console.log(frutas[i]);
}, 2000);
}.

 

c. Ejecutar el código anterior. ¿Qué imprime por consola y por qué?


d. ¿Cómo harían para que imprima por consola cada elemento del array cada 2 segundos?

 

an4vEqG.png&key=35ac386dedf604376b5b394e

Podemos tratar a las funciones como variables. Esto nos da la posibilidad de:

Almacenarla en variables:

var doble = function(a){ return a*2; }

var doble = function(a){
	return a*2;
}

Retornarla:

function vuelto(monto){
 precio = 100;
 function calcVuelto(){
 return precio-monto;
 }
 return calcVuelto();
}

Y pasarla como argumento:

function a(){
 console.log("a");
}
function b(a){
 console.log("b");
 a();
}

Y si te pregunto ¿Que hace esto? ¿Que responderias?
 

function username(unaFuncion){
	var name = prompt("Ingrese su nombre");
		unaFuncion(name);
}

function welcome(name){
	alert("Bienvenido " + name + "!");
}


username(welcome);

PARA SEGUIR LA CLASE UNITE A SLACK, AHI RESPONDES ESTAS PREGUNTAS Y YO TE IRE RESPONDIENDO PARA QUE SEPAS QEU VAS ENTENDIENDO.

Callback
Callback es una función que se pasa por parámetro a otra función y en principio se ejecuta una vez que se haya terminado de ejecutar la función anterior.

Cuando enviamos una función anónima a un evento, estamos utilizando Callbacks.

Un Callback funciona como un Closure.

¿Y esto que hace?

function funcionA(funcionB){
	console.log("a");
	setTimeout(function(){
	funcionB()
},1000);
	console.log("c");
}
function funcionB(){
	console.log("b");
}
funcionA(funcionB);

ezhl9nY.png

Asincronía en JS

Asincronía en JS

◆ Callbacks (ES5)

◆ Promises (ES6)

◆ Async/await (ES7)

Callbacks

Callback -> Procesos asincrónicos

function primero(callback){
		setTimeout(function(){
			callback();
		},1000);
}

function segundo(){
	console.log("Ejecutando callback");
}
console.log(‘antes’);
primero(segundo);
console.log(‘despues’);


//antes
//despues
//Ejecutando callback
function primero(callback){
	setTimeout(function(){
		console.log("Primero");
		callback();
	},1000);
}

function segundo(callback){
	setTimeout(function(){
		console.log("Segundo");
		callback();
	},1000);
}

function tercero(){
	console.log("Tercero");
}


Esto seria: primero(segundo(tercero));

Callback hell

primero(function(){
	segundo(function(){
		tercero(function(){
			cuarto(function(){
				...
			});
		});
	});
});

an4vEqG.png&key=35ac386dedf604376b5b394e

Hora de la practica

a. Consultar datos de un pokemón haciendo llamado ajax a pokeAPI (Por ejemplo: Pidgey) e imprimir por consola su nombre y peso.

Debes iniciar sesión para ver el contenido del enlace en esta publicación.

b. A partir de la consulta anterior, imprimir por consola el nombre y peso de su próxima evolución (Es decir, Pidgeotto).

c. ¿Cómo haríamos si queremos también imprimir los datos de su próxima evolución? (En nuestro ejemplo, Pidgeot). ¿Qué comportamiento se repite?

an4vEqG.png&key=35ac386dedf604376b5b394e

Promises

Promises
Una Promesa es un objeto que representa la terminación o el fracaso eventual de una operación asíncrona.

Representa un valor que puede estar disponible ahora, en el futuro o nunca.

const promise = f();
promise.then(exitoCallback).catch(errorCallback);
function f(){
	return (new Promise((resolve, reject) => {
		var ok = Math.round(Math.random());
		if(ok){
			var foo = "Todo ok";
			resolve(foo);
		} else {
			reject(new Error("Ocurrio un error"));
		}
	})
)}
const promise = f();
promise.then(foo => console.log(foo)).catch(error => console.log(error));

En esta promise que acabamos de ver si la promise se ejecuta bien nos devolvera "Todo ok" y si hay un error durante la ejecucion de la promise nos devolvera el Error.

const promise = f();

promise
  .then(function(response1){ //código })
  .then(function(response2){ //código })
  .then(function(response3){ //código })
  .then(function(responseN){ //código })
  .catch(errorCallback);

Const

Puede recibir un valor en el momento de la declaración. Luego no puede ser modificada.

const pi = 3.14;

pi = 3.141592635; //Error!!

COMO DIJE, NO SE PUEDE MODIFICAR PARA ESO SE USAN VARAIBLES NO CONSTANTES.

Y ahora practiquemos con promises... asi que...

 

an4vEqG.png&key=35ac386dedf604376b5b394e

Hora de la practica

a. Modificar el ejercicio anterior para manejar el código asíncrono con promesas.
b. Instalar la librería Axios y utilizarlo para peticiones HTTP del ejercicio anterior.

an4vEqG.png&key=35ac386dedf604376b5b394e

Y bueno para ir terminando la clase de hoy y no hacerlo mas extenso veremos axios y damos por finalizada esta clase.

AXIOS

 

AXIOS

AXIOS es una librería de Javascript para hacer pedidos asincrónicos HTTP (AJAX) a través de promesas

 

npm install axios
import Axios from 'axios';

Ya voy asumiendo donde van cada comando, y cada cosa, por  eso ya no lo nombre, si siguen atentamente las clases y repasan o realizan las practicas, no hara falta explciarles que el import va en el componente que crearon y que necesitan que usea axios o lo que sea.

AXIOS - GET

Axios.get(url)
  .then(callbackSuccess)
  .catch(callbackFail);

Por ejemplo, usaremos la api de pokemon con la que estuvimos practicando:

Axios.get('https://pokeapi.co/api/v2/pokemon')
  .then((response)=>console.log(response))
  .catch((error)=>console.log(error));

AXIOS - POST

Axios.post(url, data)
  .then(callbackSuccess)
  .catch(callbackFail);

Por ejemplo asi se realiza un post dentro de nuestra api:

Axios.post('/user', {name:'Pepe', age:'18'})
  .then((response)=>console.log(response))
  .catch((error)=>console.log(error));

 

Y con esto terminamos la clase de hoy, fue mucho mas rapida y consisa que la anterior, y cada vez nos vamos mentiendo mas a fondo de lo que trata esta hermosa libreria. Veremos como desarrollare la proxima clase no puedo decirles que veremos la proxima, por que la verdad aun no la pense.... en la semana les dire como proseguiremos, les deseo mucha suerte, buen desarrollo y los espero es Slack para despejar dudas y compartir codigo entre todos!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...