introducción a reactjs
TRANSCRIPT
Rendering UI
Eventos UI
Gestión del modelo
Enrutamiento
Comunicación con servidor
Composición app y arquitectura
Cargamos scripts de React y JSX
¡Ojo al tipo de script!
Inicializamos JSX
Mostramos el componente
propTypes: {propiedad: function(props, propName, componentName) {
// usar props[propName] para accedir a la propiedad// Si la validación falla throw new Error(....)
}}
{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}
{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}
{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}
{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}
{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}
{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}
• <div id="msg"
div {id:"msg"}
<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” />}
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>
