Introduccion a React (español)

Introduccion

...

Nota es2015

Vamos a estar usando indiscriminadamente conceptos de es2015, si alguien no sabe algo me lo pregunta y lo discutimos

Conceptops basicos

view = f(data)

esto no es exactamente lo que hace React pero es su inspiracion. react no es tan puro
lo que tenemos aqui es un modelo funcional puro donde View/UI es una funcion pura de la data
Esto implica que si la data no combia entonces volver a ejecutra la funcion dara el mismo resultado (programacion funcional)
en este caso f es donde esta nuestra logica de renderizacion (y logica de UI en general)

Ventajas

Simplicidad
API bien definida
Testabilidad

Ejemplo trivial

supongamos que View/UI es texto por un momento
esto simplifica el razonamiento y nos releva de tratar con el DOM et al

function NameP(name) {
  return `<p>${name}</p>`
}

Notar

Esta funcion siempre devolvera lo mismo para el mismo nombre
Es muy facil de testear
Es muy facil de endetender y razonar

Composicion

Discutiblemente una de las ventajas mas grandes de React (hablar de Angular et al mas tarde) es la capacidad de componer componentes. Es muy facil y es un modelo que se adapta muy intuitivamente a la manera en que escribimos UIs.

function NameP(name) {
  return `<p>${name}</p>`
}

function Avatar(name, url) {
  return `
    <div>
      <img src=${url} />
      ${NameP(name)}
    </div>
  `
}

Por ahora no nos pongamos exquisitos con la sintaxis, esta es solo un ejemplo ilustrativo
Notar como se componen hermosamente
Notar como los parametros (data) de la funcion se beneficiarian de un enfoque mas estructurado
Notar que no estariamos tan lejos de un template engine.

Problemas

Todo esto difiere de como React esta construido pero nos da nociones basicas. Podriamos considerar esta primer iteracion como un modelo ideal de algo similar a React. Como siempre lo necesario es encontrar un balance entre ideal y practico.

Problemas practicos

Manipulacion del DOM: si quisieramos renderizar este texto a html deberiamos hacer un el.innerHTML pero esto se puede poner lento con componenetes (y composicion de los mismos)

Manipulacion de Event Handlres. Con la utilizacion de string e innerHTML deberiamos setter de vuelta los event handlers manualmente cada vez que rendericemos, esto seria bastante engorroso de hacer (del lado del user). Por eso este tipo de librerias (template libs) manejan todo esto.

VirtualDom No vamos a decir mucho pero lo importante que es una forma de optimizar y minimizar las interacciones con el DOM del browser. En general se considera que las operaciones de mutacion del DOM son costosas por lo que React tiene un mecanismo subyacente en donde guarda una version del DOM renderizado por sus componentes en memoria y hace diff para renderizar le menos posible.

React

TODO: hablar de JSX

class NameP extends React.Component {
  render() {
    return <div>{this.props.namae}</div>
  }
}

// TODO verify
ReactDOM.render(<NameP name={"Altoros"} />, document.getElementById('example'))

React toma mucho de los conceptos que ya vimos y los formaliza y los vuelve practicos
data ahora se convierte en this.props
Agrega un concepto de this.state interior a cada componente para manejar componentes que tengan estado interno
Agrega lifecycle hooks para un mayor espectro de funcionalidad
Deja el formato de string for un formato de funciones (JSX)

Por que React?

Simple

Interfaz bien definida y minima
React se encarga de handlers, re render inteligente et al
Si la data/state cambien React re-renderiza

Composabilidad

Reusabilidad
Interfaz de componentes bien definida (prop types, et al)
Componentes dentro de Componentes es trivial

Uni-Directional Data Flow

En react la data solamente fluye desde la raiz del arbol de componentes hasta las hojas, no hay otra forma
Esto parece restrictivo pero simplicifa muchisimo el modelo mental que React requiere
Desventajas: algunas cosas son bastante verbosas de resolver en React (two way data binding mostrar ejempl;o)

Comp con Angular directives

Los componentes de React son comparables con las directivas de angular pero cuentan con varias ventajas:

Interfaz de data mucho mas simple (MUCHO) (props, state y children vs Attributes, $scope, transclude, priority, template, etc, etc, etc, etc, etc)
React usa this.state mientras que angular usa $scope y $scope.apply y $scope.watch Aqui tambien la interfaz es estupidamente mas simple con React que con angular
Unidereccional data flow vs Two Way data binding magico con Scopes anidadas, prop shadowing, y todos los problemas que trae angular
La composicion es mucho mas intuitiva

Mas React

En React tenemos dos attributos de clase importantes que vamos a repasar

`this.state`

Ejemplos

habiamos dicho que en React si this.props cambiaba entonces el componente se renderiza. El problema es que este concepto solo considera el caso de los componentes que no tienen un estado interno. El caso canonico de componente que tiene un estado interno es un simple <select>

Simplisticmanet podemos considerar que el estado de un <select> es:

open/closed

NOTA: hay otras cosas aqui pero no nos compliquemos

Este componente debera renderizar diferente dependiendo de si esta open/closed y debera adminsitrar este estado. Como lo logramos con React? con this.state

class Select extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      open: false
    }
  }
  
  render() {
    .... TODO
  }
}

React automaticamente re-renderiza el componente cuando this.state cambia :) a traves de los hooks this.setState

`this.children`

Los componentes de React pueden lidiar con hijos y manipularlos

TODO ejemplo

franleplant/index.md