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.

Deja un comentario

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