Las 4 formas de crear un componentes en React

Debido a que React está creado bajo el lenguaje de programación JavaScript, este también depende de su sintaxis para construir y declarar sus componentes y es por ello que existen actualmente 4 formas de crear componentes, las cuales obedecen a las distintas versiones del Estándar ECMAScript.

ECMAScript 5 – createClass

Este fue el primer método que existió para crear componentes en React y aun que ya está bastante anticuado, la realidad es que puedes encontrar mucho material en Internet que todavía utiliza este método. Es muy probable que ya no te toque trabajar con este método, sin embargo, no está de más mencionarlo y si te lo llegaras a encontrar, sepas de que están hablando.
Para crear componentes en ECMAScript 5 es necesario utilizar el método createClass  de la clase React, Veamos un ejemplo muy rápido:

var miComponent = React.createClass({ 
  propTypes: {...}, 
  getDefaultProps: {...}, 
  getInitialState: {...}, 
  render: function(){...} 
})

Lo primero que podemos ver, es que la clase se crea mediante la función React.createClass , el cual recibe un objeto que debe de tener al menos la función render, adicional, se puede declarar los propTypes , defaultProps  y el estado inicial del componente.

ECMAScript 6 – React.Component

Este es el método que hemos está utilizando hasta ahora, en la cual los componentes se crean mediante clases que extienden de React.Component . vemos un ejemplo rápido:

import React from 'react' 
class ECMAScript6Class extends React.Component{ 
  constructor(props){ 
    super(props) 
      state = {
        ...
      } 
    } 
	
  render(){ 
    return ( 
      ... 
    ) 
  } 
}

ECMAScript6Class.propTypes = { ... } 
ECMAScript6Class.defaultProps = { ... }

Cuando declaramos una clase, es necesario crear el constructor que reciba los props , para después enviarlos a la superclase, de esta forma iniciamos correctamente el componente. Los propsTypes  y defaultsProps  son declarados fuera de la clase. Este es el componente más recomendable cuando trabajamos con componentes con estado (Stateful). Pues permite un mejor control sobre el componente.

ECMAScript 6 – Function Component

La siguiente forma que soporta ECMAScript 6, es la creación de componentes mediante funciones, y es recomendado únicamente para componentes sin estado (Stateless). Veamos cómo quedaría:

cont MiComponent = ({prop1, prop2, prop2}) => ( 
  return( 
    ... 
  ) 
) 
MiComponent.propTypes = { 
  ... 
} 
MiComponent.defaultProps = { 
  ...
}

Observemos que el componente se reduce a una arrow function, la cual recibe como parámetros las props . El cuerpo de la función es como el método render, podremos crear variables, poner un poco de lógica y retornar un JSX.
Adicional, se puede definir los propTypes  y defaultProps  por fuera de la función.

ECMAScript 7 – React.Component

La última forma disponible, es utilizar las nuevas sintaxis de ECMAScript 7. Aunque todo apunta a que esta sea la mejor forma de declarar componentes, no es muy utilizada aun, debido a que ECMAScript 7 todavía se encuentra en desarrollo. Este método es muy parecido a la creación de componentes mediante React.Componentes  ES6. Veamos cómo quedaría:

class MiComponent extends React.Component { 
  static propTypes = {
    ...
  } 
  
  static defaultProps = { 
    ... 
  } 
  
  state = { 
	... 
  } 
  
  constructor(props){ 
    super(props) 
  } 
  
  render(){ 
    ... 
  } 
}

Este método es prácticamente igual que crear una clase en ES6, con la diferencia que es posible declarar el estado como una propiedad, adicional, podemos declarar los defaultProps  y propTypes  dentro de la clase y marcarlos como static  para poder ser accedidos desde fuera sin necesidad de crear una instancia.

Conclusiones

Como hemos podido observar, React ha venido cambiando la forma en que podemos crear componentes, permitiendo crear componentes desde una simple arrow function , hasta una clase JavaScript que extiende de React.Component , la forma de definir los defaultProps  y propTypes  también ha venido cambiando a medida que el lenguaje Javascript evoluciona y nos permite nuevas formas de definirlas, lo que nos hace pensar que seguramente veremos más formas de crear Componentes en el futuro.