Las 4 formas de crear un componentes en React

Las 4 formas de crear un componentes en ReactDebido 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:

 

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:

 

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:

 

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:

 

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.

 

Aplicaciones reactivas con React, NodeJS & MongoDB
¿Quieres aprender React como un profesional? te invito a ves mi nuevo libro

 

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.

Artículos relacionados

Hello World con React Una de las grandes ventajas que ofrece React con respecto a otras herramientas para el desarrollo web, es la facilidad con que es posible implementar ...
React Props (Propiedades) Las propiedades son la forma que tiene React para pasar parámetros de un componente padre a los hijos.normal que un componente pase datos a los compon...
WebSocket con Java En este artículo aprenderemos a implementar WebSocket con Java, ya que en el pasado ya había dado una completa Introducción a los WebSocket y explicam...

Oscar Blancarte

Ideológico, Innovador y emprendedor, Padre, Tecnólogo y Autor, amante de la ciencia y la tecnología en todos sus colores y sabores. Arquitecto de software & Full Stack Developer con experiencia en la industria del desarrollo de software y la consultoría. Amante de la programación y el Ajedrez.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *