PropTypes y Render

Clase 9 de 33 • Curso Profesional de React.js 2017

Clase anteriorSiguiente clase

Raúl Grijalva

student•

Todo muy bien, excepto que Pikachu no evoluciona por nivel sino con la piedra trueno. :P

Vinicio Jose Valbuena

student•

/*   
    DISCULPEN EL SPAN NO ENCONTRE COMO ELIMINAR LOS QUE HICE MAL  
  
Me gustaria saber si utilizo ES5, como puedo hacer un render si  
 debo pasar un string como html? se hacerlo con ES6 y COFFEE sin   
problemas mas quiero aprender con ES5 que tambien me interesa. */  
  
var HelloWork = React.createClass({  
  render: function() {  
    return '<p>HelloWork</p>';  
  }  
});

Cristian Martinez

student•

No uses comillas simples.

var HelloWork = React.createClass({
render: function() {
return <p>HelloWork</p>;
}
});

Sergio Daniel Xalambrí

student•

De esta forma:

var HelloWork = React.createClass({  
  render: function() {  
    var props = null; // null si no hay props, un objeto si hay  
    return React.createElement(  
      'p',  
      props,  
      'HelloWork'  
    );  
  },  
});

Y el render haces:

ReactDOM.render(  
  React.createElement(HelloWork, null),  
  document.getElementById('app')  
);

Vicente

student•

¡Buenos días!

Analizemos las siguiente tres líneas:

var nombre="Mortadelo y Filemón"
React.render(<MyComp name={nombre} />, document.getElementById('container'))
nombre = "Bart Simpson"

Aunque no conozcamos el código de MyComp no es difícil imaginar que las dos primeras líneas de las tres citadas, se encargarían de parametrizar y renderizar el componente MyComp y en algún sitio aparececerían Mortadelo y Filemón.

El cambio sobre la variable nombre que hacemos en la tercera línea sería ignorado por MyComp a menos que no volvamos a renderizar el componente repitiendo de nuevo la línea dos. No digo que eso no sea válido. Sin embargo, a raiz de unos ejemplos que hice con Angular, creo que es necesario conseguir aunar la nitidez en la creación del comoponente que ofrece React, con algo que nos de el doble binding de Angular. Pero la solución no sería desde mi punto de vista complementar React con Angular, lo que me parece matar moscas a cañonazos, sino que esos jóvenes tan espabilados que que están en el mundo de la programación nos regalen como siempre hacen una pequeña librería para resolver el tema o que alguien nos diga como se llama la solución (la librería) que posiblemente esté ya hecha: Lo que se re pretende es que React realice un autorender() cuando alguno de los parámetros de un componente cambie, para lo cual dichos parámetros deberían registrarse en algún lugar vigilado al estilo de "livreloading" o mejor dicho con algún "gulp watching" pero que watchee memoria en lugar de ficheros. Concretando, que en las tres líneas del principio, la ejecución de la tercera línea implique la ejecución automática de la segunda. Es lo primero que se me ocurre y posiblemente sean solo palabras y no una idea realizable. En fin, no se si con esto último la he he liado más y se nota que efectivamente huelo la libre pero desde muy lejos. Disculpen si encuentran palabras o expresiones con escaso significado o incluso carente de él, no es mi intención molestar a nadie.

Saludos
Vicent

Keven saldana

student•

Me podrían decir por favor los paquetes para atom que usa el profesor?? :)

Aitor Ibañez

student•

El sprite que se usa para sacar los diferentes pokemons da 404.

Estaría bueno alguna sesión actualizada a la última version de ReactJS.

:-)

Daniel Hernández

student•

Alguien sable del paquete para sublime text para ECMA6 con react?

Vinicio Jose Valbuena

student•

/* Me gustaria saber si utilizo ES5, como puedo hacer un render si debo pasar un string como html? se hacerlo con ES6 y COFFEE sin problemas mas quiero aprender con ES5 que tambien me interesa.  
  
var HelloWork = React.createClass({  
  render: function() {  
    return '<p>HelloWork</p>';  
  }  
});

Jonhathan Rolando rodas

student•

Hasta el momento me gusto mucho el curso, pero aun es valido para la versión actual?

Sergio Daniel Xalambrí

student•

En grandes rasgos sí, hay diferencias con la versión actual pero no son muchas y es posible actualizarse fácilmente desde la v0.13 a la v15 (actual), en el listado de tutoriales del curso hay una guía de actualización que escribí donde podés ver los cambios que hubo que requieran modificar código (hay muchos internos de performance que no requieren cambiar nada).

Joshua Torres

student•

Hola todo va perfecto hasta que cuando pongo la url, var url='http://veekun.com/dex/media/pokemon/main-sprites/x-y/${this.props.number}.png';
la puse de esta manera porque con comillas invertidas me marcaba error de sintaxis, de esta forma ya no me marca error pero me manda el siguiente mensaje GET http://veekun.com/dex/media/pokemon/main-sprites/x-y/$%7Bthis.props.number%7D.png 404 (Not Found) supongo que no esta reconociendo el parametro y lo toma como texto, espero puedan ayudarme gracias! :)

Ruperto Coronado

student•

var url = `http://veekun.com/dex/media/pokemon/main-sprites/x-y/${this.props.number}.png`;

Son comillas invertidas, copia y pega toda la línea a ver que pasa, por favor.

Jahaziel Ortiz Barrios

student•

Components siempre empiezan con mayúsculas

Vinicio Jose Valbuena

student•

/* Me gustaria saber si utilizo ES5, como puedo hacer un render si   
debo pasar un string como html? se hacerlo con ES6 y COFFEE sin   
problemas mas quiero aprender con ES5 que tambien me interesa. /*  
  
var HelloWork = React.createClass({  
  render: function() {  
    return '<p>HelloWork</p>';  
  }  
});

Vinicio Jose Valbuena

student•

/* Me gustaria saber si utilizo ES5, como puedo hacer un render si debo pasar un string como html? se hacerlo con ES6 y COFFEE sin problemas mas quiero aprender con ES5 que tambien me interesa. */  
  
var HelloWork = React.createClass({  
  render: function() {  
    return '<p>HelloWork</p>';  
  }  
});

Juan Castro

teacher•

<< ` >> = << Alt Gr + } >>>

Lucho A. J. Suárez

student•

Eso depende del idioma y configuración de tu teclado

Rudy Marca

student•

Un error que me paso, talvez a alguien le pase.

class PokeRow extends React.Component   
{  
 render()   
 {  
  return   
   <div>  
    <PokeAvatar number={this.props.number} />  
     {this.props.name}  
   </div>  
 }  
}

Pasa que cuando retornas algo (return), tiene que seguir en la misma linea.

José María Carro López

student•

a mí está parte del código no me funciona:   
  
  
  
            var url =`http://veekun.com/dex/media/pokemon/main-sprites/x-y/${this.props.number}.png`;;  
  
  
               
             return <div>   
                <img src={url} />

terminé eliminando la variable y poniendo en el elemento <img> la url directamente, sin hacerlo interactiva

Daniel Hernández

student•

var vs let, cual es la diferencia?

Saul Navarro V

student•

Las dos se usan para declarar las variables, solamente que una es usada y soportada en ECMAScript 2015 es es "let", "var" también es soportada, a pesar de que es de ES5,

Alvaro Robles

student•

La diferencia es el alcance de la variable declarada, var tiene una visibilidad global dentro de la funcion y let del bloque.

Francisco Eris

student•

Se agradece, todo va quedando claro hasta el momento.

Mariana Serrano Arévalo

student•

mm Hago lo que esta en el video y propTypes no me sirve, me dice que string y number no aparecen en la consola, alguien sabe por que ocurre esto?

carlos larico LF.

student•

se un poco mas especifico.

Ricardo Andres Velasquez Alvis Velasquez A.

student•

Intenta escribiendo React.PropTypes con la letra 'P' en mayúscula mas no en minúscula.

Carlos Pedroza

student•

a mi no me funciona :
var url = 'http://veekun.com/dex/media/pokemon/main-sprites/x-y/$(this.props.number}.png';
da un error
GET http://veekun.com/dex/media/pokemon/main-sprites/x-y/$%7Bthis.props.number%7D.png 404 (Not Found)
tube que modificarlo a:

var url = 'http://veekun.com/dex/media/pokemon/main-sprites/x-y/' + this.props.number + '.png';

Sergio Márquez Márquez

student•

Hola cursoscapetisoft,
funciona igualmente si pones la comilla invertida <http://veekun.com/dex/media/pokemon/main-sprites/x-y/${this.props.number}.png>; en vez de comilla normal 'http://veekun.com/dex/media/pokemon/main-sprites/x-y/${this.props.number}.png';

Un saludo.

Paco Guevara

student•

Al principio tienes un paréntesis que abre y después una llave que cierra

$(this.props.number}.png

Debería ser con llaves

${this.props.number}.png

Saludos!

Cesar Ivan Segura

student•

Estoy empezando en react, y note esto, cuando quise cambiar el nombre del pokemon al de su evolucion pero no cambie el nivel asi que ni siquiera agrege la propiedad pero despues de 5seg el nivel es eliminado, como pudeo hacer si solo quiero cambiar el nombre pero mantener el nivel?

<script type="text/jsx;harmony=true">  
    class HelloWorldComponent extends React.Component{  
        render(){  
            return <h1>{this.props.name} evoluciona en el nivel {this.props.level}</h1>  
        }  
    }  
  
    HelloWorldComponent.propTypes = {  
        name: React.PropTypes.string,  
        level: React.PropTypes.number  
    };  
  
    React.render(< HelloWorldComponent name="pikachu" level={25}/>, document.getElementById('container'));  
  
    setTimeout(() => {  
        React.render(< HelloWorldComponent name="Raychu"/>, document.getElementById('container'));  
    }, 5000)  
</script>

Andrés Felipe Eslava Zuluaga

student•

Pues tiene que pasarle el parametro del nivel. Basicamente lo que tiene pero con level={25}
Recuerde que se va a modificar el componente mediante el estado, si no define el estado pues la lógica dice: ‘OK, el estado no existe; renderizo…’