React JS: Primeros pasos

Slides de la charla de ReactJS en el ValenciaJS del 28/07/2015

Obviamente son SLIDES ORIENTATIVOS para la charla por lo que no encontraréis muchos datos concretos sobre ReactJS

Transcript

2. React.js Primeros pasos ValenciaJS 28/07/2015
3. Angel R. Molina
4. ¿Qué es exactamente React? States y Props Virtual DOM Ciclo de vida de un componente Sintaxis
5. ¿Qué es exactamente React? States y Props Virtual DOM Ciclo de vida de un componente Sintaxis
6. Sintaxis JSX + ES6 Angel R. Molina 24, Nerd
7. Sintaxis JSX + ES6 Angel R. Molina 24, Nerd
8. ¿Qué es exactamente React? States y Props Virtual DOM Ciclo de vida de un componente Sintaxis
9. States & Props Los estados (state) representan los datos mutables de nuestra aplicación. Las propiedades (props) las inmutables.
10. States & Props Online users Yanis Varufakis a.k.a Varoufuker Eurogrup Official Troll Jeroen Dijsselbloem Eurogroup president Christine Lagarde FMI Owner
11. States & Props Online users Yanis Varufakis a.k.a Varoufuker Eurogrup Official Troll Jeroen Dijsselbloem Eurogroup president Christine Lagarde FMI Owner <onlineUsers  /> <userList  /> <userListItem  /> <userListItem  /> <userListItem  />
12. {   ejemplo:  ‘online  users’,   source:  ‘Sublime  Text’   }
13. Componentes Reusables
14. States & Props Online users Yanis Varufakis a.k.a Varoufuker Eurogrup Official Troll Jeroen Dijsselbloem Eurogroup president Christine Lagarde FMI Owner <userList  /> <userListItem  /> <userListItem  /> <userListItem  /> Componentes reusables
15. ¿Qué es exactamente React? States y Props Virtual DOM Ciclo de vida de un componente Sintaxis
16. Virtual DOM Dirty-check Virtual DOM (diff model) DOM updating Se calculan todas las operaciones cada vez Dificultad para escalar grandes volúmenes de datos Requiere comprobar periódicamente si hay cambios (pooling) Dificultad para escalar grandes volúmenes de datos check git@github.com:Matt-Esch/virtual-dom.git for the first virtual dom Solo re-redenderiza los nodos afectados por los cambios O(n^3) problem Ahorramos el tiempo de recalcular todo el árbol de nodos y otros elementos del DOM
17. Virtual DOM 1. Los nodos afectados por los cambios son marcados como ‘dirty’ 2. Estos nodos son re-renderizado desde la función render() Nodos afectados Nodos re-renderizados Nota: los nodos afectados por los cambios surgen a partir del método setState()
18. ¿Qué es exactamente React? States y Props Virtual DOM Ciclo de vida de un componente Sintaxis
19. Ciclo de vida componentWillMount() componentDidMount() componentWillReceiveProps() shouldComponentUpdate() componentWillUpdate() componentDidUpdate() componentWillUnmount()
20. {   ejemplo:  ‘Lista  de  productos’,   source:  ‘Sublime  Text’   }
21. ¡Gracias! Angel R. Molina @cazascripts React.js Community facebook.com/reactjscommunity Estamos buscando desarrolladors Javascript en Hiphunters, búscame para más información. Aquí acabo de colgar enlaces a recursos muy buenos para entender ReactJS Aquí suelo colgar junto con la comunidad los recursosmás actuales sobre ReactJS