Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introducción a React.js

Introducción a React.js

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

Flavio Corpa Ríos

October 04, 2017
Tweet

More Decks by Flavio Corpa Ríos

Other Decks in Programming

Transcript

  1. Primer Componente
    Nivel 1

    View full-size slide

  2. Primer Componente
    Nivel 1 - Sección 1
    Creando Nuestro Primer Componente de React

    View full-size slide

  3. ¿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.

    View full-size slide

  4. ¿Quién usa React?
    https://github.com/facebook/react/wiki/sites-using-react

    View full-size slide

  5. 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…

    View full-size slide

  6. 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)

    View full-size slide

  7. ¿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

    View full-size slide

  8. 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

    View full-size slide

  9. 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

    View full-size slide

  10. Creando Nuestra Primera App en React
    Queremos simplemente mostrar un mensaje usando un componente.

    View full-size slide

  11. 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

    View full-size slide

  12. 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

    View full-size slide

  13. 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

    View full-size slide

  14. Estructura de la Aplicación
    Hasta aquí cómo se crea un componente. Ahora veamos el setup.
    Contenedor de la app

    View full-size slide

  15. Estructura de la Aplicación
    Todas las dependencias de JS
    Todas los componentes de React van aquí

    View full-size slide

  16. 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.

    View full-size slide

  17. 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.

    View full-size slide

  18. Primer Componente
    Nivel 1 - Sección 2
    Entendiendo JSX

    View full-size slide

  19. 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)

    View full-size slide

  20. 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…

    View full-size slide

  21. 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.

    View full-size slide

  22. De JSX a HTML
    JSX
    JavaScript
    Navegador HTML

    View full-size slide

  23. 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

    View full-size slide

  24. 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.

    View full-size slide

  25. 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.

    View full-size slide

  26. Comunicación con Props
    Nivel 2

    View full-size slide

  27. Estado del Componente
    Nivel 3

    View full-size slide

  28. Eventos Sintéticos
    Nivel 4

    View full-size slide

  29. Comunicación con servidores remotos
    Nivel 5

    View full-size slide