Dejo esto por aquí. Notas relacionadas al tema de la clase:
¡Nunca pares de aprender! (Y practicar)🦄
Gracias por tus anotaciones <3
Majoledesma, la crack del css en twitter jaja
Constructor(props){/*Este método se ejecuta cuando se instancia un componente. Nos permite definir el estado inicial del componente, hacer bind de métodos y definir propiedades internas en las que podemos guardar muchos datos diferente*/}componentWillMonunt(){/*Este método se ejecuta cuando el componente se está por renderizar. En este punto es posible modificar el estado del componente sin causar una actualización (y por lo tanto no renderizar dos veces el componente).*/}render(){/*En este momento de la fase de montado se van a tomar las propiedades, el estado y el contexto y se va a generar la UI inicial de este componente*/}componentDidMount(){/*Este último método de la fase de montado se ejecuta una vez el componente se renderizó en el navegador y nos permite interactuar con el DOM o las otras APIs del navegador (geolocation, navigator, notificaciones, etc.).*/}componentWillReceiveProps(nextProps){/*Este método se ejecuta inmediatamente después que el componente reciba nuevas propiedades. En este punto es posible actualizar el estado para que refleje el cambio de propiedades, ya sea reiniciando su valor inicial o cambiándolo por uno nuevo.*/}shouldComponentUpdate(nextProps, nextState){/*Este método (el cual debe ser puro) se ejecuta antes de empezar a actualizar un componente, cuando llegan las nuevas propiedades (nextProps) y el nuevo estado (nextState).
Acá es posible validar que estos datos sean diferentes de los anteriores (this.props y this.state) y devolver true o false dependiendo de si queremos volver a renderizar o no el componente.*/}componentWillUpdate(nextProps, nextState){/*Una vez el método anterior devolvió true se ejecuta este método, acá es posible realizar cualquier tipo de preparación antes de que se actualice de la UI*/}
Todos estos son las fases del ciclo de vida de un componente en su montaje y actualización, no esta el desmontado, pueden ver la información completa haciendo click aquí
Si está, lee mejor el link que pasaste.
Desmontado
Esta última fase consiste en un solo método que se ejecuta antes de que un componente se elimine (desmonte) de la UI de nuestra aplicación.
componentWillUnmount()
Me refería a que en el post que yo hice, no esta el desmontado
Qué buena manera de explicarlo, en el curso anterior no se entendió nada del ciclo de vida..
Se tenía que decir y se dijo 🤭
Total mente de acuerdo en Platzi estan mejorando bastante para dar lo mejor de lo mejor y con este curso la rompieron!
Apenas van 22 clases, y estoy muy emocionado con lo que ya puedo hacer.
Un profesor increible.
Si la verdad ya es mucho lo que podemos hacer hasta aquí.
sin duda alguna!!
Excelente explicación, soy nuevo en la programación por lo cual me gustaría ayudarle a los compañeros que tiene problemas, solo que no tengo el conocimiento, de igual manera recuerden que si tienen errores, pueden usar https://stackoverflow.com/ o guiarse por medio de los foros de Google, todos los errores que he tenido los he solucionado por medio de Google, no por medio de los aportes de la Clase. Saludos y animo con el código!
venga!!
Antes de llegar al final del vídeo me dieron ganas de hacer el ejemplo un poco más real, por lo que cree un API con los datos y los llamo con fecth, el API es el siguiente:
API Curso React
Con el siguiente tutorial ustedes pueden crear el suyo en firebase:
Mi API tiene un retardo de 2 segundos antes de devolver los datos con el propósito de poder resolver lo expuesto en el vídeo (el componente se desmontada antes de que se resuelva la promesa del fetch).
Aquí les comparto mi solución:
importReact,{Component,Fragment}from'react'import{Link}from'react-router-dom'importBadgesListfrom'../components/BadgesList'importconfLogofrom'../images/badge-header.svg'import'./styles/Badges.css'constAPI='https://us-central1-api-cv-3b8cb.cloudfunctions.net/react';classBadgesextendsComponent{constructor(props){super(props)console.log('1ro. Constructor')this.state={data:[]}}componentDidMount(){this.controller=newAbortController()this.signal=this.controller.signalthis.mounted=truefetch(API,{signal:this.signal}).then(response=> response.json()).then(data=>{if(this.mounted){this.setState(data)}})console.log('3ro. Component Did Mount')}componentDidUpdate(prevProps, prevState){console.log('5to. Component Did Update')console.log({ prevProps, prevState })console.log({props:this.props,state:this.state})}componentWillUnmount(){console.log('6to. Component Will Unmount')this.mounted=false}render(){console.log('2do. y 4to. Render')return(<Fragment><div className="Badges"><div className="Badges__hero"><div className="Badges__container"><img src={confLogo} alt="" className="Badges_conf-logo"/></div></div></div><div className="Badges__container"><div className="Badges__buttons"><Link to="/badges/new" className="btn btn-primary">NewBadge</Link></div><div className="Badges__list"><BadgesList badges={this.state.data}/></div></div></Fragment>)}}exportdefaultBadges
Muy buen aporte, tenia la duda sobre que pasa con los llamados a API's que no se completan por un exit...
Funciona muy bien, gracias.
Este curso de react de verdad q es excelente he hecho otros q son un fracaso en comparación a este xD
Me encantó la clase, Richard es un muy buen profesor, te anima bastante.
Ahora si viene la parte que me gusta. Peticiones a Api 💙
Totalmente satisfecho con las explicaciones de Richard Kaufman, es un excelente profesor y se nota la experiencia da muy buenos consejos y nos enseña con su vasta experiencia
Practica del Ciclo de Vida
Un componente pasa por muchas fases; montaje, actualización y desmontaje y cada una de ellas tiene varios métodos que ocurren, cuando ocurre esa fase, en esta clase comenzaremos a trabajar con el ciclo de vida y vamos a estudiar como podemos utilizar cada una de los métodos para hacer nuestras apps mucho mejores.
Primero vamos a la pagina de los Badges y escribimos los primeros tres métodos en el editor de código, justo encima de render para que quede de la siguiente manera;
Cada uno con su console.log para ver el orden en el que harán su efecto, primero va el constructor, luego el render y por ultimo componentDidMount.
En el constructor hay una cosa que nos falta y es que este recibe props y lo utilizamos para inicializar la superclase que en este caso es component y para esto, llamamos super son esos mismos props.
El constructor, si lo usamos, es el lugar donde deberían estar nuestros states, por lo que debemos pasarlos para allá pero no bajo el nombre de “state” sino bajo el nombre de “this.state”
constructor(props){super(props);console.log(`1. constructor()`);this.state={data:[{id:'2de30c42-9deb-40fc-a41f-05e62b5939a7',firstName:'Freda',lastName:'Grady',email:'Leann_Berge@gmail.com',jobTitle:'Legacy Brand Director',twitter:'FredaGrady22221-7573',avatarUrl:'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',},{id:'d00d3614-101a-44ca-b6c2-0be075aeed3d',firstName:'Major',lastName:'Rodriguez',email:'Ilene66@hotmail.com',jobTitle:'Human Research Architect',twitter:'MajorRodriguez61545',avatarUrl:'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',},{id:'63c03386-33a2-4512-9ac1-354ad7bec5e9',firstName:'Daphney',lastName:'Torphy',email:'Ron61@hotmail.com',jobTitle:'National Markets Officer',twitter:'DaphneyTorphy96105',avatarUrl:'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',},],};}
De la manera planteada arriba.
Nuestro próximo paso sera simular una petición a un api, de manera que simularemos el estado donde data esta vacio y en el componentDidMount vamos a simular una petición al api donde vamos a obtener resultados en algún momento, para ellos usaremos una función asíncrona como lo es el “setTimeOut”
Pasaremos la data de nuestro state inicial a la data de nuestro this.state en nuestro componentDidMount, de manera que nuestro state inicial estará vacio, usando asi nuestra función asíncrona setTimeout dándole un retraso de 3mil milisegundos para asi al cargar la pagina, la información de nuestros badges cargara 3 segundos depues de cargar el resto de nuestra pagina, por lo que tendrá que renderizar nuevamente esa sección agregando la data de nuestros badges.
El código debe quedar de esta manera;
classBadgesextendsReact.Component{constructor(props){super(props);console.log(`1. constructor()`);this.state={data:[],};}componentDidMount(){console.log(`3. componentDidMount()`);setTimeout(()=>{this.setState({data:[{id:'2de30c42-9deb-40fc-a41f-05e62b5939a7',firstName:'Freda',lastName:'Grady',email:'Leann_Berge@gmail.com',jobTitle:'Legacy Brand Director',twitter:'FredaGrady22221-7573',avatarUrl:'https://www.gravatar.com/avatar/f63a9c45aca0e7e7de0782a6b1dff40b?d=identicon',},{id:'d00d3614-101a-44ca-b6c2-0be075aeed3d',firstName:'Major',lastName:'Rodriguez',email:'Ilene66@hotmail.com',jobTitle:'Human Research Architect',twitter:'MajorRodriguez61545',avatarUrl:'https://www.gravatar.com/avatar/d57a8be8cb9219609905da25d5f3e50a?d=identicon',},{id:'63c03386-33a2-4512-9ac1-354ad7bec5e9',firstName:'Daphney',lastName:'Torphy',email:'Ron61@hotmail.com',jobTitle:'National Markets Officer',twitter:'DaphneyTorphy96105',avatarUrl:'https://www.gravatar.com/avatar/e74e87d40e55b9ff9791c78892e55cb7?d=identicon',},]})},3000)}
Junto a esa actualización, de llama a componentDidUpdate y allí recibiremos dos argumentos, prevProps y prevState, realizaremos un console log con el mismo y abajo realizaremos otro console.log para poder comparar los props, de manera que nuestro código quedara de esta manera;
Como podremos observar luego en nuestra consola, los estados entre nuestro componenetDidMount y nuestro componentWillUpdate son totalmente distintos, puesto que nos muestra la diferencia entre los states.
Luego de esto agregaremos nuestro componentWillUnmount
Este se imprimirá luego de que le demos click a “New Badge” en nuestra consola el console.log
Ahora hay un detalle importante en el que hay que trabajar y es ser muy preciso con los tiempos, es decir si vamos a la página anterior y le damos nuevamente a “New Badge” rápidamente, la consola nos dará un “warning” el cual nos explicara que react no puede realizar un update en un componente que esta desmontado, lo que paso es que nuestro llamado asíncrono iba a efectuarse luego de 3 segundos e iba a actualizar el estado pero pasa que el componente ya no existe, eso es un error común que es importante evitar.
En el caso del setTimeout se puede arreglar de la siguiente manera;
Nuestro setTimeout nos va a retornar la información que le estamos pasando al setState por lo que aca como podemos observar le colocamos un id y abajo llamaremos una función que sera “clearTimeout” que sirve para cancelar la actualización del componente y que no nos de error nuestro código, este código, tenemos que pasarlo a “componentWilUnmount” para que al momento de que queramos pasar a otra página, se cancele el update de nuestro componente.
Con esto ahorramos memoria.
Hasta yo, que soy una bestia que viene del diseño lo entendí!
Que buen curso, las explicaciones son muy claras. Mas cursos de Kaufman, por favor.
Un poco complicado al inicio pero una prueba en el codigo y ahora todo esta claro.
Richard Kaufman es el mejor profesor que hay en platzi
Sparragus me cae bien. Dejen las simulaciones y consuman API's 😂😂😂
"Las simulaciones son para niños", muy buena esa también 😆🚀🚀🚀
A lo largo del curso, he estado creando otros proyectos para practicar y también estoy llevando el curso de webpack, sin embargo me surge una duda, no sé si solo a mi me pasa, pero cuando hago un nuevo proyecto con create-react-dom, al terminar me genera el reporte de la instalación del npm y siempre me aparece que encontró vulnerabilidades (en un video también de platzi vi que esto es malo), ahora bien no sé si esto es normal? (estoy utilizando ubuntu)
