Introducción a ReactJS

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>