Forem: Adan Palacios

Tipos de componentes en React Js ⚛️

Adan Palacios — Fri, 17 May 2019 05:41:30 +0000

Hola Coders 👋!

Este Post esta dedicado a ReactJs, describiremos los tipos de componentes que podemos utilizar en React, tenemos dos tipos de componentes, los componentes de clase y los componentes funcionales, que pueden tener otros nombres ya que cada uno de ellos tiene sus propias características.

Class components: Tienen un estado o State y pueden ser llamados también Statefull Components, estos componentes tienen siempre un método render() y otra cosa muy importante en estos componentes existen ciclos de vida, de los cuales hablaremos en otro post.

Functional components: No tienen un estado o State, que pueden ser llamados tambien Stateless Components simplemente son funciones puras y no tienen un método render() a diferencia del anterior.

vamos a ver un ejemplo de cada uno 😉

Componente de clase o Statefull Component👇

Podemos ver que hereda de Component, tiene un método Constructor y un State y como lo mencione anteriormente tiene un método render.

Componente funcional o Stateless Component👇

En este componente podemos ver que no tiene un State, tampoco un método render y mucho menos un método constructor solo retorna un template.

Tal vez te encuentres un poco confundido y te preguntes cuando usar cada uno de estos componentes, es muy sencillo primero vamos a nombrarlos diferente.

Smart Components o Componentes Inteligentes.

Estos componentes son los Componentes de clase, y en estos tenemos toda nuestra lógica específicamente para ese componente por ejemplo en ellos podemos consumir una API y posteriormente, los datos que obtuvimos de esa API los pasamos vía props a nuestro componente funcional para mostrarlo al usuario 🤭.

Componentes Tontos o Silly Components.

Estos componentes son los Componentes funcionales, y solo se encargan de mostrar datos, que previamente recibieron de un Smart Component, cabe resaltar que estos componentes no saben ni se enteran de nada de lo que pasa en la app, solo se encargan de mostrar templates.

En realidad es muy sencillo aprender sobre los tipos de componentes en React Js les dejo un vídeo para que lo entiendan mejor.

Espero este Post les haya servido y hayan resuelto sus dudas nos vemos pronto 😉

Something about me

Adan Palacios — Wed, 11 Jul 2018 15:33:15 +0000

Something about me 😎

Hello, friends, my name is Adan Palacios, I'm studying engineering at Technological University of Mexico (UNITEC) in Mexico.
I enjoy developing web applications, I currently work with frameworks like Django and Laravel and other JavaScript libraries like
Reactjs and Vue.js and sometimes Angular and more...
I have a YouTube channel where I teach you how to program in different languages like Python, Java, JavaScript,
php and C++ also i teach you the basics web technologies like HTML5, CSS and again JavaScript,
and I also share resources for developers, if you want to go to my channel just click my channel!.

Code is Poetry

Something about me

Adan Palacios — Wed, 20 Jun 2018 15:54:25 +0000

Something about me 😎

Hello, friends, my name is Adan Palacios, I'm studying engineering at Technological University of Mexico (UNITEC) in Mexico.
I enjoy developing web applications, I currently work with frameworks like Django and Laravel and other JavaScript libraries like
Reactjs and Vue.js and sometimes JQuery and more...
I have a YouTube channel where I teach you how to program in different languages like Python, Java, JavaScript,
php and C++ also i teach you web the basics web technologies like HTML5, CSS and again JavaScript,
and I also share resources for developers, if you want to go to my channel just click my channel!.