Pensando en React

Meetup: React Chile

05 Diciembre 2020
Sitio de Matias Hernandez

1 馃憢 Hola!

  • Mat铆as Hern谩ndez
  • Soy Ingeniero de Software
  • 10+ al teclado
  • 9+ de forma remota en 馃嚭馃嚫
  • @matiasfha

twitter.png

github.png

logo-f117a1ab31bf89c07be14bc6d5c691c1.png

2 馃憢 Hola!

modus.png

We are hiring! https://moduscreate.com

egghead.png

Screencasts for badass developers https://egghead.io

auth0.png

Auth service for your JAMstack

3 馃憢 Hola!

1500x500.jpeg

4 Pensando en React

5 Pero antes

mic-audience.jpg

6 Que es React?

  • Publicado el 2003, es una librer铆a para crear interfaces de forma declarativa
  • Implement贸 nuevas ideas sobre como crear aplicaciones web.
  • Propone usar la composici贸n de peque帽as y aisladas unidades para crear interfaces complejas.
  • Propone utilizar un nuevo concepto: VDOM
  • Define la interfaz como una funci贸n del estado
  • Permite utilizar una forma declarativa para definir la interfaz.
  • Propone una nueva sintaxis sobre Javascript.
  • Permite su adopci贸n de forma gradual.

7 驴Qu茅 necesito saber?

  • Familiaridad con HTML y CSS.
  • Conocimientos b谩sicos de Javascript y programaci贸n.
  • Entendimiento b谩sico del DOM
  • Familiaridad con carater铆sticas y sintaxes de ES6+ (no excluyente)
  • Node.js y npm instalados

8 驴Qu茅 es VDOM?

  • Un concepto que define la creaci贸n de una representaci贸n ideal o virtual de la interfaz
  • Esta representaci贸n es la que se manipula y se sincroniza con el DOM reconciliacion
  • Permite indicarle a React en que estado se quiere la UI sin indicar como modificar el DOM.
  • Permite el renderizado incremental del DOM (React Fiber)

9 Como funciona VDOM

  • Al renderizar un componente, todos los objetos del VDOM son actualizados.
  • React compara el nuevo arbol VDOM con el estado anterior y obtiene la diferencia
  • Utiliza esta diferencia para actualizar el DOM solo en esos elementos

10 Ejemplo VDOM

11 ReactDOM

  • React es la librer铆a para crear interfaces de usuario de forma declarativa
  • ReactDOM es el paquete que provee m茅todos espec铆ficos para la manipulaci贸n del DOM:
    • `render()`: Renderiza un 谩rbol de componentes.
    • `findDOMNode()`
    • `unmountComponentAtNode()`
    • `hydrate()`: Equivalente a `render` pero utilizar en SSR.
    • `createPortal()`

12 Componentes

  • Una nueva forma de pensar en como construir una aplicaic贸n
  • Primer paso es “dibujar cajas” para cada componente
  • Es una habilidad b谩sica y necesaria.
  • Similar a como los dise帽adores trabajan.
  • Proceso mental que permite reconocer patrones y crear una arquitectura
  • Proceso sin c贸digo

13 Revisando Interfaz

interfaz.png

Pensemos en como crear peque帽os trozos reutilizables

14 驴Qu茅 es un componente?

  • Trozos individuales de la UI
  • Conjuntos l贸gicos de informaci贸n
  • “Cajas” reutilizables

15 Revisando Interfaz

main-components.png

16 Revisando Interfaz: Feed

center-ui.png

17 Revisando Interfaz: Tweet

tweet.gif

18 Revisando Interfaz: Tweet names

tweet.png

19 Hora de componer

  • Se require un “algo” para sostener los componentes
  • Este es tambi茅n un componente: Padre
  • El padre sirve tambi茅n como pasarela de mensajes entre los hijos

20 驴C贸mo saber que es componente?

  • Decision similar a crear una nueva funci贸n.
  • single-responsibility1.png
  • Single Responsibility Principle
  • Reusabilidad
  • 鈿狅笍 No optimices prematuramente
  • 鈿狅笍no crees abstracciones innecesarias

21 Relacion data y UI

  • UI es la forma de comunicarse con el usuario
  • UI es una representacion de los datos
  • Divide tu interfaz en componentes donde cada componente represente una parte de los datos

22 Code time

code-time.jpg

23 Version est谩tica

  • Momento de convertir las cajas en c贸digo
  • Hay varias formas de utilizar react
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- ADD JSX SUPPORT -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
...
...
<script>
const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);
</script>
  • CRA o CodeSandbox, etc

24 Sobre JSX

  • JS permite manipular el DOM, por medio de APIs
  • React es declarativo. No manipulamos el DOM directamente
  • React ofrece una API para la creaci贸n de componentes
  • React soporta m煤ltiples plataformas una de ellas es el DOM mediante ReactDOM.
 const rootElement = document.createElement('div')
 rootElement.setAttribute('id','root')
 document.body.append(rootElement)

 const element = document.createElement('div')
 element.textContent = 'Hola Mundo'
 element.className = 'container'
 rootElement.append(element)

25 El mundo sin JSX

const rootElement = document.getElementById('root')

const helloElement = React.createElement('span',null,'Hola')

const worldElement = React.createElement('span', { children: 'Mundo' })

const element = React.createElement(
    'div',
    { className: 'container' },
    helloElement,
    ' ',
    worldElement
)

ReactDOM.render(element, rootElement)

26 JSX

  • JSX es mas intuitivo que la api base de React.
  • JSX -> Javascript XML.
  • Y finalmente m谩s f谩cil de leer y entender.
  • JSX no es realmente JS. Requiere un transpilador.
const ui = <h1 id="greeting">Hey there</h1>

// ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓

const ui = React.createElement('h1', {id: 'greeting', children: 'Hey there'})
  • Entrena tu cerebro para actuar como transpilador y ver la versi贸n “cruda” de lo que escribes.

27 Arrays

  • Renderizar un arreglo es un caso muy com煤n.
const list = ['One', 'Two', 'Three']

//const listUI = list.map(listItem => <li>{listItem}</li>)
//<ul>{listUI}</ul>
const ui = (
  <ul>
    {list.map(listItem => (
      <li>{listItem}</li>
    ))}
  </ul>
)

28 Arrays

驴Qu茅 ocurre si se hace agrega un nuevo elemento a la lista? whats-the-worst.jpg

29 Ejemplo

30 Mas ejemplos

31 Next steps

Agregar interactividad mediante el uso de estado y comunicaci贸n con la api.

  • Compartir el estado utilizando Context API
  • Agregar Rutas
  • CSS 驴C贸mo?
  • build & deploy

32 Me pueden encontrar

33 Preguntas

questions2.jpg

Created by matiasfha.