/ insights

Pensando en React

React se ha convertido en LA HERRAMIENTA de desarrollo por preferencia de muchos desarrolladores, pero hay varias cosas que considerar antes de entrar en este mundo.

State

En otros frameworks / librerías, el manejo del estado, es algo "automático", al cual seguramente conoces como one way / two way binding, pero en React, es un manejo manual, esto quiere decir, que cualquier atributo que quieras modificar dentro de tu componente, debe estar declarado en el state

Por ejemplo

import React, { Component } from 'react'

class MyComponent extends Component {

  constructor (props) {
    super(props)
    
    // declarar todas tus propiedades a verificar aquí
    this.state = {
      propertyThatMayChange: ''
    }
  }
  
  // el método extra y molesto que hay que hacer POR CADA ELEMENTO DEL STATE!
  handlePropertyChange (ev) {
    this.setState({
      propertyThatMayChange: ev.target.value
    })
  }
  
  render () {
    return <div>
      <input
        onChange={this.handlePropertyChange.bind(this)}
        value={this.state.propertyThatMayChange}
      />
      The input value is: {this.state.propertyThatMayChange}
    </div>
  }

}

export default MyComponent

Ahora bien, esto puede parecer innecesariamente complicado, porque al final, se supone que todas estas herramientas nos ayuden a manejar el desarrollo de forma sencilla. Sin embargo, si has trabajado con Polymer por ejemplo, seguro que te has topado con escenarios en los que no es sencillo actualizar el valor renderizado en el DOM, aunque al hacer un debug, el valor SI está actualizado, bien, React simplemente no quiere que pienses que es malo porque ¡ahora tú eres el encargado de actualizar los valores! (que conveniente para ellos, ¿no crees?)

Properties (props)

Cualquier cosa que venga del exterior (componente más arriba), es conocido como un property, y son importantes porque son la única forma de comunicarse con los componentes internos, lo cual en realidad es una buena práctica, toma por ejemplo:

// un componente más externo
<CustomInput
  label="El label"
  value={this.state.algunOtroPropertyDelPadre}
  onChange={_ => console.log('changing the value')}
/>


// nuestro component

class CustomInput extends Component {

  constructor (props) {
    super(props)
    
    // es posible copiar valores que vienen como parámetros al estado local
    // para manejarlo internamente
    this.state = {
      value: props.value
    }
  }
  
  handlePropertyChange (ev) {
    this.setState({
      value: ev.target.value
    })
    
    // podemos llamar una funcion que hayamos recibido como parámetro
    if (this.props.onChange) {
      this.props.onChange(ev.target.value)
    }
  }
  
  render () {
    return <div>
      <label>{this.props.label}</label>
      <input
        onChange={this.props.onChange}
        value={this.state.value}
      />
      The input value is: {this.state.value}
    </div>
  }

}

Como puedes darte cuenta, el concepto de props es más natural y entendible que el estado.. Y justamente ese es un problema, ya que lo más natural para nosotros que utilizamos HTML puro, es un property, pero combinarlo con el manejo del state (de forma manual) lo vuelve complicado (y no se diga de usar redux con esto)

Opinión personal

Personalmente encuentro React sintácticamente feo, prefiero la sintaxis de Polymer, por ejemplo:

<!-- polymer -->
<custom-input
  label="the label"
  value=[[theValue]]>
</custom-input>

// React
<CustomInput
  label="the label"
  value={this.state.theValue}
  onChange={ev => this.setState({ theValue: ev.target.value }) }
/>

Ahora bien, para evitar problemas de bindings, sólo hay que seguir buenas prácticas, he visto muchos proyectos escritos en React y no funcionar correctamente de cualquier forma, o un manejo extremadamente complicado del state sólo porque no fue sencillo hacer el binding con los properties

Sin embargo, hay que considerar que aprender React hoy en día tiene muchas ventajas extras como React Native, React VR, etc.

Finalmente, siempre es bueno aprender las herramientas lo suficiente como para saber si es algo que deberías utilizar en tus proyectos o no