Nicolas.Tizeira Posted March 22, 2018 Report Share Posted March 22, 2018 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. Pero... ¿que sucede si se reconstruye el DOM cada vez que hay cambios? 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. 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. 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. [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. [3,4,10].reduce(function(accumulator,currentValue){ return accumulator + currentValue; },[initialValue]); Devuelve: 17 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. 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. 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? 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. CallbackCallback 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); 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(){ ... }); }); }); }); 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? 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... 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. 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! Break 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.