Una radiografía al componente de React en ES6

Los Componentes son la unidad básica de organización de funcionalidad y apariencia para el framework de UI hecho por Facebook, React.

Para aquellos, como yo, que vienen de las tierras de Angular, puede resultar complicado encontrar un símil, pues React funciona de manera muy distinta. En Angular, podemos distinguir distintos actores: controladores, directivas, factories y servicios. Lo más similar a un componente en React es la directiva. Cada instancia de componente tiene su propio ambiente (o scope en Angular); ambos pueden recibir propiedades directamente desde el HTML y comunicarse entre otros componentes.

En este post vamos a investigar más detalladamente la estructura básica de un componente, utilizando la nueva sintaxis de ECMAScript 6.

 // Seccion 1
  import React, { Component, PropTypes} from 'react'
  // Seccion 2
  class TextElement extends Component {
    // Seccion 3
    constructor(props) {
      super(props)
    }
    // Seccion 4
    render() {
      return (
          <div>
            // Seccion 5
            <p>{this.props.text || 'Hola Mundo'}</p>
          </div>
      )
    }
  }

  // Seccion 6
  TextElement.propTypes = {
    text: PropTypes.string
  }
  // Seccion 7
  export default TextElement

Vamos por parte.

Sección 1

ejemplifica la sintaxis de ES6 (nueva versión de Javascript) para importar un módulo al contexto de este archivo. Trabajar con módulos es conveniente porque permite separar el código por funcionalidad y sólo ser llamado cuando sea necesario. Específicamente en React, es muy útil dado que todo es un componente.
{Component, PropTypes} se exportan de manera diferente, porque son attributos o métodos dentro de React. En rigor, podrían no requerirse, pero cada vez que se llame a Component debe llamarse como React.Component.

Sección 2

ES6 introduce el concepto de clases a Javascript. Funcionan como syntactical sugar para el acercamiento tradicional para clases en Javascript pre-ES6: herencia basada en prototipos. En esencia, es lo mismo pero la sintaxis es mejor.

Sección 3

Relacionado con la sección anterior, todo componente de React hereda de la clase padre Component, utilizando la misma sintaxis que Java. Todo hijo debe convocar al constructor del padre en su propio constructor: super(props). En esta sección también se debe realizar el binding a funciones personalizadas manualmente, pues en ES6 el proceso no ocurre de manera automática.

Sección 4

Todo componente debe poseer la función render que en pocas palabras, lo visualiza en la vista. Esta función se llama automaticamente cuando el componente se monta, por lo que hay que prestar atención a cualquier objeto que no se haya inicializado al momento del montaje del componente, pues en el contexto de render, ¡no existirá!

Render siempre debe retorna una de cosas:

  • Un sólo elemento o componente

  • Varios elementos o componentes, pero envueltos en un tag <div> .

Sección 5

React introduce JSX, Javascript XML para redactar la visual de los componentes. No es necesario utilizarlo, pero dado que React apunta a desarrollo de UI, una sintaxis más similar a HTML ayuda mucho cuando el proceso involucra a diseñadores. JSX es casi idéntico a HTML excepto algunos detallitos que quedan para otro post, junto con las secciones 6 y 7.