Introducción a React.js

Charla introductoria a la librería de JavaScript más cool del momento! 😎

Transcript

2. Primer Componente Nivel 1
3. Primer Componente Nivel 1 - Sección 1 Creando Nuestro Primer Componente de React
4. ¿Qué es React? React es una librería de JavaScript concebida para construir Interfaces de Usuario (UI). La mayoría lo usamos como la V del modelo MVC. ¿Por qué React? Creado por Facebook React está diseñado para resolver un problema: construir grandes aplicaciones con datos que cambian con el tiempo. Extensamente utilizado en productos hechos por Facebook (ej: Instagram) Pensado para simplificar el proceso de montar UIs complejas.
5. ¿Quién usa React? https://github.com/facebook/react/wiki/sites-using-react
6. Lo que vamos a aprender • …crear componentes de React • …renderizar contenido en una página • …comunicar componentes entre sí • …gestionar eventos del usuario • …capturar input del usuario • …comunicarse con un servidor remoto Abarcaremos algunas de las funcionalidades de React, entre ellas, cómo…
7. Arquitectura basada en Componentes En React, resolvemos problemas creando componentes. Si un componente se vuelve muy complejo, lo desglosamos en componentes pequeños, más sencillos. “Divide et impera” —César Componente Main Componente Photo (se reutiliza) Componente Comments (también se reutiliza)
8. ¿Qué es un componente de React? Un componente de React se parece a una función de JavaScript: genera un output cada vez que es invocado. Output #1 Output #2 Llamar a render() genera esto Llamar a render() genera esto
9. El Virtual DOM Explicado El virtual DOM es una representación en memoria de elementos reales del DOM generados por componentes de React antes de recibir cambios. Virtual DOM HTML Representación en memoria de lo que se convertirán en elementos del DOM Elementos reales renderizados por el navegador
10. El Virtual DOM en Acción El sistema de diferenciación del virtual DOM le permite a React minimizar los cambios al DOM como resultado de las acciones del usuario, permitiendo así mejorar el rendimiento del navegador. Sólo cambia este párrafo… …y sólo se reemplaza ese párrafo. Primer render Segundo render Virtual DOM HTML Virtual DOM HTML
11. Creando Nuestra Primera App en React Queremos simplemente mostrar un mensaje usando un componente.
12. Creando Nuestro Primer Componente Los componentes de React son clases de JavaScript que heredan de la clase base React.Component. Ahora debemos decirle a la App dónde queremos el output en la web. Los componentes empiezan por mayúscula Todo componente requiere una función render() No hacen falta comillas - que no cunda el pánico! La clase Component hereda de la clase base React
13. Renderizando Nuestro Componente Utilizamos ReactDOM para renderizar componentes en nuestra página HTML al leer el output del componente de React y añadirlo al DOM. Invocamos al componente Main - recuerda: sin comillas! Elemento contenedor en el que finalmente se renderizará el componente
14. Referenciando el Componente Cada vez que creamos un nuevo componente de React, lo invocamos creando un elemento con el mismo nombre que la clase. Usando el componente Main
15. Estructura de la Aplicación Hasta aquí cómo se crea un componente. Ahora veamos el setup. Contenedor de la app
16. Estructura de la Aplicación Todas las dependencias de JS Todas los componentes de React van aquí
17. El flujo de nuestra App de React Para aclarar las cosas, esto es lo que pasa cuando se carga la página con un componente de React. Primero, se carga el HTML estático… Virtual DOM …luego se carga React y todos nuestros componentes… …después, ReactDOM renderiza el componente… …devolviendo una representación virtual del DOM, que se acaba convirtiendo en elementos reales del DOM.
18. Recapitulación sobre React • React se diseñó con un propósito: construir grandes aplicaciones con datos que cambian con el tiempo. • En React, creamos aplicaciones en términos de componentes. • Utilizamos clases de JavaScript para declarar componentes de React. • Los componentes deben extender la clase React.Component y contener un método render(). • Llamamos a la función ReactDOM.render() para renderizar componentes en una página web.
19. Primer Componente Nivel 1 - Sección 2 Entendiendo JSX
20. No Hay Comillas en el Markup El markup que usamos cuando escribimos aplicaciones de React no es un string. A este marcado se le llama JSX (JavaScript XML). Los elementos de HTML se escriben siempre en minúscula Los componentes de React se escriben siempre en mayúscula (PascalCase)
21. Una Nueva Forma de Escribir JavaScript JSX sólo es otra forma de escribir JavaScript mediante una transpilación. https://jsx-live.now.sh Este JSX se convierte en… Este JSX se convierte en…
22. Acostumbrándose a la Sintaxis de JSX JSX parece HTML, pero se acaba transformando en JavaScript. Código JavaScript resultante ¡Atención! Usamos el atributo className, y nunca class, que es una palabra reservada en JavaScript.
23. De JSX a HTML JSX JavaScript Navegador HTML
24. El Objeto Date en JSX Aquí, mostramos la hora actual utilizando el objeto Date nativo de JS. Código escrito entre llaves se interpreta como JavaScript literal
25. Iterando Arrays en JSX Aquí, mostramos una lista de elementos utilizando JSX y la función nativa de JavaScript (es5) map(). Ésta función devuelve éste array de JSX.
26. Recapitulación sobre JSX • JSX significa JavaScript XML. • El marcado de JSX parece HTML pero se transpila a llamadas a funciones de JavaScript, que React sabrá cómo renderizar en la página. • El coding escrito entre llaves ({}) se interpreta como JavaScript. • Es un patrón común mapear Arrays en elementos de JSX.
28. Comunicación con Props Nivel 2
29. Estado del Componente Nivel 3
30. Eventos Sintéticos Nivel 4
31. Comunicación con servidores remotos Nivel 5