Breve introducción a ReactJs, a su filosofia y a sus conceptos básicos

2. Rendering UI
Eventos UI
Gestión del modelo
Enrutamiento
Comunicación con servidor
Composición app y arquitectura

3. Cargamos scripts de React y JSX
¡Ojo al tipo de script!
Inicializamos JSX
Mostramos el componente

7. propTypes: {
propiedad: function(props, propName, componentName) {
// usar props[propName] para accedir a la propiedad
// Si la validación falla throw new Error(....)
}
}

11. {a:10, b:20}
props: {a:10} props: {a:10} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 10, b:20}

12. {a:10, b:20}
props: {a:10} props: {a:10} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 11, b:20}

13. {a:11, b:20}
props: {a:10} props: {a:10} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 11, b:20}

14. {a:11, b:20}
props: {a:11} props: {a:11} props: {b:20}
props: {b:20}props: {b:20}props: {a:10}
props: {b:20}
props: {a:10} props: {a:10}
state:{a: 11, b:20}

15. {a:11, b:20}
props: {a:11} props: {a:11} props: {b:20}
props: {b:20}props: {b:20}props: {a:11}
props: {b:20}
props: {a:11} props: {a:11}
state:{a: 11, b:20}

16. {a:11, b:20}
props: {a:11} props: {a:11} props: {b:20}
props: {b:20}props: {b:20}props: {a:11}
props: {b:20}
props: {a:11} props: {a:11}
state:{a: 11, b:20}

19. • <div id="msg"
div {id:"msg"}

20. <Beer name={if(condicion) {
“name”} else {“other”} />
React.createElement(Beer, {name: if
(condicion) {“name”} else {“other”}});
var beer;
if (condicion) {
beer = <Beer name=“name” />
}
else {
beer =<Beer name=“other” />
}

21. for (var i=0; i<beers.length; i++) {
<Beer />
}
for (var i=0; i<beers.length; i++) {
React.CreateElement(Beer));
}
for (var i=0; i<beers.length; i++) {
data.push(<Beer />);
}
return <div>{data}</div>