React. Introducción a su ecosistema

Slide 1

Slide 1 text

React introducción a su ecosistema

Slide 2

Slide 2 text

Es una librería JavaScript para construir interfaces de usuario

Slide 3

Slide 3 text

Un conjunto de herramientas para resolver muchos problemas Una herramienta para resolver un problema específico librería framework

Slide 4

Slide 4 text

MVC React es la V en el MVC

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

React Componentes JSX props & states Virtual DOM

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Componentes

Slide 10

Slide 10 text

Componentes NavigationBar NavigationStack FlowBox FlowBox Post TopAttributtion Image TitleText

Slide 11

Slide 11 text

Componentes https://jsfiddle.net/catirado/7rqzw4j8/

Slide 12

Slide 12 text

Templates separate technologies, not concerns Pete Hunt

Slide 13

Slide 13 text

JSX Preprocesador que permite usar sintaxis tipo XML (es opcional) La accesibilidad de las plantillas y el poder de JavaScript

Slide 14

Slide 14 text

JSX

Slide 15

Slide 15 text

props & states Los estados (state) representan los datos mutables de nuestra aplicación. Las propiedades (props) los inmutables

Slide 16

Slide 16 text

props & states https://jsfiddle.net/catirado/9ztxh0pe/

Slide 17

Slide 17 text

Virtual DOM Árbol antiguo Nodos afectados Nuevo árbol

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

JavaScript “bundlers” JSX ES6 ES5

Slide 20

Slide 20 text

Routing Librería para gestionar rutas en React Para aplicaciones SPA (Single Page Applications)

Slide 21

Slide 21 text

Flux La implementación más popular es Redux Es un patrón, no un framework Flujo de datos unidireccional Complementa a React

Slide 22

Slide 22 text

Flux La implementación más popular es Redux

Slide 23

Slide 23 text

Estilos inline http://bit.ly/1S2UuK7 https://jsfiddle.net/catirado/xvuqu45t/

Slide 24

Slide 24 text

Renderizado en el servidor (JavaScript isomorfo) Servidor Cliente Componentes React http://www.crmarsh.com/react-ssr/

Slide 25

Slide 25 text

Renderizado en el servidor (JavaScript isomorfo) http://www.crmarsh.com/react-ssr/ Cargas iniciales más rápidas Mejor preparado para SEO ReactDOMServer.renderToString

Slide 26

Slide 26 text

No content