Introducción a ReactJS

1.400 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
4 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
1.400
En SlideShare
0
De insertados
0
Número de insertados
197
Acciones
Compartido
0
Descargas
20
Comentarios
0
Recomendaciones
4
Insertados 0
No insertados

No hay notas en la diapositiva.

Introducción a ReactJS

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

×