React. Introducción a su ecosistema

Transcript

1. React introducción a su ecosistema
2. Es una librería JavaScript para construir interfaces de usuario
3. Un conjunto de herramientas para resolver muchos problemas Una herramienta para resolver un problema específico librería framework
4. MVC React es la V en el MVC
6. https://github.com/petehunt/react-howto React en sí npm JavaScript “bundlers” ES6 Routing Flux Estilos inline Renderizado en el servidor Inmutable.js Relay, Falcor,etc El ecosistema de React
7. React Componentes JSX props & states Virtual DOM
8. Componentes React es todo sobre construir componentes reusables. De hecho, con React la única cosa que haces es construir componentes. Al ser tan encapsulados, los componentes hacen más sencilla la reutilización de código, el testeo y la separación de responsabilidades. React Docs http://bit.ly/why-react
9. Componentes
10. Componentes NavigationBar NavigationStack FlowBox FlowBox Post TopAttributtion Image TitleText
11. Componentes https://jsfiddle.net/catirado/7rqzw4j8/
12. Templates separate technologies, not concerns Pete Hunt
13. JSX Preprocesador que permite usar sintaxis tipo XML (es opcional) La accesibilidad de las plantillas y el poder de JavaScript
14. JSX
15. props & states Los estados (state) representan los datos mutables de nuestra aplicación. Las propiedades (props) los inmutables
16. props & states https://jsfiddle.net/catirado/9ztxh0pe/
17. Virtual DOM Árbol antiguo Nodos afectados Nuevo árbol
18. Virtual DOM CADA ACTUALIZACIÓN setState Construye un nuevo árbol DOM Virtual Algoritmo de diff con el antiguo Calcula el mínimo número de cambios y los pone en cola Ejecuta todas las actualizaciones en batch Re-renderiza todo el DOM
19. JavaScript “bundlers” JSX ES6 ES5
20. Routing Librería para gestionar rutas en React Para aplicaciones SPA (Single Page Applications)
21. Flux La implementación más popular es Redux Es un patrón, no un framework Flujo de datos unidireccional Complementa a React
22. Flux La implementación más popular es Redux
23. Estilos inline http://bit.ly/1S2UuK7 https://jsfiddle.net/catirado/xvuqu45t/
24. Renderizado en el servidor (JavaScript isomorfo) Servidor Cliente Componentes React http://www.crmarsh.com/react-ssr/
25. Renderizado en el servidor (JavaScript isomorfo) http://www.crmarsh.com/react-ssr/ Cargas iniciales más rápidas Mejor preparado para SEO ReactDOMServer.renderToString