bastante confuso :S lo de los pokemons pokerow, poketable, pokeapp, pokeshit... me perdi.
Puff este video ya me he perdido bastante
ánimo, es una tecnología que pronto será altamente demandada y resuelve muchos problemas en el frontend, vale la pena aprenderla.
No podemos tener dos components a un mismo nivel, sino que debemos tener un componente que los englobe a los dos.
Los de Facebook han hecho con React lo mismo que casi todos los arquitectos de software. Cuando hay que hacer algo raro con el código se sacan el this de entre las mangas y lo sueltan por el código, ya sea con o sin paréntesis o adornado con un .bind o cualquier otra cosa. Saben que la gente aprenderá a poner ese this en su sitio aunque no sepa exactamente lo que hace, siempre que eso funcione. Creo que se podrían explorar sintaxis más intuitivas para hacer estas cosas y no meterle tanto this por aquí y por allá. Espero, con el tiempo, saber soltar cada this en su justo lugar y en el momento preciso.
Saludos
Vicent
bastante confuso
Cual es la diferencia de hacerlo con estas lineas de codigo, las dos las probé y funcionan:
Hola a todos, tengo una consulta.
Entiendo la función de .bind(), que creo que es para mantener el contexto de una función.
Por ejemplo en PokeApp la función onGrowl() tiene this y cuando quiero ejecutar la función como propiedad en <PokeTable /> tengo que "bindearlo" a PokeApp porque si no ese this de la función haría referencia a PokeTable.
Pero en líneas generales cual es el concepto de .bind(), encontré referencias en internet pero no se entendía bien.
Nota: no sé si alguno lo intentó pero cuando se hace react.js sin ecmascript2015, no necesite hacer .bind() quizá por la manera en como se crea el componente.
varHellowComponent=React.createClass({onClick:function(){console.log(this.props.name);},render:function(){return<div onClick={this.onClick}>Hola</div>}}); ReactDOM.render(<HellowComponent name="mundo"/>,document.getElementById('container'));Quizás haya sido que fue un ejercicio muy simple.
Gracias por la ayuda.
Buen dia, estoy siguiendo el curso pero a la hora de hacer click en el pokemon me muestra lo siguiente en la consola
build.js:168 [Object, Object, Object]
2build.js:1563 Warning: flattenChildren(...): Encountered two children with the same key, undefined. Child keys must be unique; when two children share a key, only the first child will be used.
Y en la pantalla no me muestra los mensajes, espero me puedan ayudar
Esto te puede ayudar:
En onGrow en donde haces el push ponlo de esta manera
El segundo parametro que pasamos es un numero que nos servira para poder evitar el error de la key porque el text si se repite y el key debe ser unico, ahora en PokeChat.js cuando retornes el valor coloca la key unica con el numero generado:
Recomendación: no hagan push a un array guardado en el state de un componente, hacer esto es modificarlo sin usar this.setState y puede dar errores o problemas de consistencia, lo mejor es crear un nuevo array con Array.from(this.state.messages), a ese array hacerle push y luego actualizar el estado con this.setState({ messages }). O si usan algo como Immutable.js para sus colecciones sí hacer push ya que este crear una nueva lista en vez de actualizar la vieja, luego hacen this.setState de esta nueva lista.
Si no! ... pie de manza con bananos! un diagrama del DOM esperado estaria de lujo!,, de la lógica almenos
Tengo este error al ejecutar index.htmlUncaughtTypeError:Super expression must either be null or a function, not undefined_inherits @ biuld.js:184(anonymous function) @ biuld.js:1914.react @ biuld.js:211s @ biuld.js:1(anonymous function) @ biuld.js:13../PokeMessage @ biuld.js:137s @ biuld.js:1(anonymous function) @ biuld.js:11../PokeChat @ biuld.js:26s @ biuld.js:1(anonymous function) @ biuld.js:17../Components/PokeApp @ biuld.js:341s @ biuld.js:1e @ biuld.js:1(anonymous function) @ biuld.js:1
Yo recibí ese error por que al escribir el módulo de PokeMessage en lugar de escribir
React.Component
escribí
React.component
Ya al cambiarlo, me dejo continuar
hola. Primero que nada, no pude hacer que funcionara la página de forma modular, así que puse todo el código dentro de un <script type="text/babel"></script>. Pero bueno, mientras sólo era el ejemplo del onClick() poniendo el nombre de los pokemons en la consola todo iba bien, pero cuando ya se trata de incorporar el pokechat y lo demás deja de funcionar.
Hola tengo el siguiente error:
Each child in an array or iterator should have a unique "key" prop.Check the render method of`PokeChat`.See https://fb.me/react-warning-keys for more information.
Gracias :)
No es un error, es un warning y se soluciona dandole el atributo key a la etiqueta para que React conozca su verdadero orden(No estoy seguro, pero es lo que entendi de las primeras clases donde se hablo al respecto)
sí, tienes que agarrar uno de los atributos que eran únicos en el arras de objetos que estamos empleando como base. estábamos agarrando el número, por conveniencia, pues no se repetía. se agrega en el módulo donde esté el poketable, puesto que ahí es donde estamos haciendo la función map, que es donde va a haber iteración y donde por lo tanto se necesita identificar cada uno de los elementos que va a filtrar el map. se pone como un prop más en los atributos del table : <PokeRow key={pokemon.number} name={pokemon.name}
y es mejor trabajar con concat en vez de push
El método onGrowl también podría escribirse utilizando el spread operator (ES6) de la siguiente manera:
Mientras que el método onClick podría hacerse así:
onClick(event){
this.props.growl(this.props.name);
}
ya que el vídeo es un poco viejo. veo que hay cosas que en el mas actual dicen que no se tiene que hacer, pero es comprensible por que react se esta actualizando rápidamente .
let messages =this.state.messages.push({text: text});this.setState({messages: messages});
this.state.messages inicialmente es un array, cuando haces push le agregas un valor, pero lo que devuelve la función push (y que por lo tanto se guarda en messages) es la posición del nuevo elemento (si messages era [] y ahora es [{ text: 'hola' }] entonces messages es igual a 0). Entonces cuando haces this.setState({ messages }) estas guardando la posición en vez del array, cuando tratas de usar map no funciona porque es un número y no un array.
