Tweet

Matías Hernández Arellano

11 Feb, 10 tweets, 3 min read

¿Clases o funciones al escribir tus componentes en #React?
Esta es una pregunta bastante común entre quienes están comenzando o retomando el desarrollo web con React.
¿Cuál es el approach correcto o el mejor?

¿Que prefieres tu y por que?
Sigue un hilo 🧵

Hoy el uso de componentes funcionales es la forma "aconsejada" o preferida de escribir tus componentes, pero las clases aún siguen ahí y no se irán por un buen tiempo. Incluso hay muchas app en producción que aún usan componentes de clase ya q fueron escritas hace un tiempo...

¿Entonces como decidir que usar o que aprender?
Como siempre la respuesta depende.
Depende de tus objetivos y el ambiente en que desarrollarás.
Si estás comenzando deberías comenzar por aprender la forma "moderna" de escribir componentes, es decir usando funciones..

...Usando funciones y hooks. Que en tu caso seran la única forma de escribir componentes
Si te preguntas que son los famosos hooks, te comparto un breve artículo al respecto.
matiashernandez.dev/que-son-los-ho…

Por que comenzar así? Por que como nuevo desarrollador con React es probable que ingreses a trabajar con proyectos medianamente nuevos, además la forma funcional y 100% declarativa de estos componentes te ayudará a crear el modelo mental necesario.

Además, el uso de componentes funcionales puede realizar lo mismo o mas que una clase, pero con diferentes patrones.
Como mencioné los componentes de clase no se han ido y no se irán en un buen tiempo, así que también deberías aprender a trabajar con ellos, pero...

Pero solo si será necesario para hacer tu trabajo, es decir, si estas tratando con código legacy. Recuerda que hay una diferencia en el modelo mental necesario al trabajar con estos componentes vs funciones.

matiashernandez.dev/react-useeffec…

El uso de componentes de clase tiene sus propios patrones (HOC, render props, etc) y otros compartidos pero escritos diferentes, como los componentes compuestos.
egghead.io/playlists/hook…

Y algunos de los problemas de las clases se resolvieron al utilizar hooks
es.reactjs.org/docs/hooks-int…

Finalmente volvemos a la pregunta. ¿Por donde comenzar?
Primero, pule tus habilidades con #javascript, luego aprender #React actual, después aprender a manejar código legacy.
Te invito a unirte a mi newsletter!! Para aprender más!
matiashernandez.ck.page

• • •

Missing some Tweet in this thread? You can try to force a refresh

This Thread may be Removed Anytime!

Twitter may remove this content at anytime! Save it as PDF for later use!

More from @matiasfha

Matías Hernández Arellano

@matiasfha

11 Feb

@aberron

Hoy se celebra el día internacional de la mujer y la niña en la ciencia.
Y como padres también tenemos una labor, acercar la ciencia a niñas y niños.
Les recomiendo estos libros que a mis hijos. Mía e Inti les encantan.
Papá ¿donde se enchufa el sol? De @aberron

@GaboTuitero

También, obviamente literatura nacional.
¿Por qué los perros mueven la cola?
Y
¿Qué son los mocos?
Del divulgador nacional por ontonomasia @GaboTuitero

@uchile

También, astronomía (por cierto el CATA de @uchile tendrá curso de astronomía para niñez este 15/02 cata.cl/noticia.php?id…) y un gran exponente de esto es el profesor Maza.
Somos polo de estrella.

Read 6 tweets

Matías Hernández Arellano

@matiasfha

4 Nov 20

¿Cuál es la diferencia entre los hooks useEffect y useLayoutEffect?

¿Cuándo usar useLayoutEffect?

Lo descubriremos en un nuevo hilo sobre #React #hooks 🧵

useLayoutEffect es similar en casi TODO a useEffect, solo tiene pequeñas diferencias.

TLDR: useEffect es lo que quieres usar el 99% del tiempo.

Ambos reciben dos argumentos, un callback que define el efecto y una lista de dependencias.

matiashernandez.dev/react-useeffec…

La diferencia entre ambos radica en el momento en que el efecto definido en el callback es ejecutado.

useEffectes ASINCRONO. y ejecuta el efecto después que tu componente se renderiza asegurando así que tu efecto no bloquerá el proceso principal.

Read 13 tweets

Matías Hernández Arellano

@matiasfha

1 Nov 20

Una más sobre React useEffect.
Por que el arreglo de dependencias es importante? Y por que si no escribo alguna aparece un warning?
Ayer hablamos se la relación entre este hook y los métodos del ciclo de vida en un hilo y este post matiashernandez.dev/react-useeffec…

El hook useEffect recibe dos argumentos, una funcion/callback que define el efecto deseado y un listado/arreglo de valores que definen las dependencias del efecto.
Estas dependencias indican cuando o más bien por qué el efecto es emitido/ejecutado.

Internamente useEffect "observa" este listado de dependencias y cuando uno de los valores de ellas cambia el efecto es emitido.
El equipo de React provee un plugin de eslint que ayuda a identificar cuando hay dependencias no identificadas
reactjs.org/docs/hooks-faq…

Read 13 tweets

Matías Hernández Arellano

@matiasfha

1 Nov 20

#React
useEffect y los estados del ciclo de vida de un componente.
Son comparables? Funcionan igual? Es uno del reemplazo del otro?.
No, no, y no, pero ¿por qué?
Intentaré resumirlo en este breve nuevo hilo 🧵

@dan_abramov

Primero, creo que este post de @dan_abramov lo explica completamente overreacted.io/a-complete-gui…

Los estados del ciclo de vida son una definición y concepto utilizados en los componentes de clase, esos definidos antes del advenimiento de hooks utilizando la sintaxis `class`

Estos componentes implementan algunos métodos que te permiten ejecutar lógica en ciertos "momentos". Y esto es importante. La ejecución de esta lógica esta relacionada con un momento particular del proceso de renderizado de un componente.

Read 12 tweets

Matías Hernández Arellano

@matiasfha

29 Oct 20

@nextconf

Ya fue la @nextconf y fue muy buena pero hubo un tema que salió a la luz durante y después el evento y que ha dado mucho que hablar. Y también tengo una opinión.
¿Las conferencias son para que los genios sigan mostrándose como genios? ¿Es necesario cuota de diversidad? 🧵

Primero, personalmente creo que las conferencias son espacios para mostrar el trabajo de otros, para compartir lo aprendido y aumentar así el conocimiento de la comunidad.
Todos tenemos una voz diferente para comunicar y todos tenemos algo que decir.

@eggheadio

esto es algo que he aprendido muy bien gracias a las comunidades @eggheadio @partycorginetwk y @FrontEndCafe
La idea es aumentar la visiblidad de todo quien quiera participar y no seguir concentrando atención en los mismos actores de siempre.

Read 16 tweets

Matías Hernández Arellano

@matiasfha

29 Oct 20

Cuál es la diferencia entre #React y #ReactNative?
Una pregunta completamente valida sobre todo si estás comenzando.
Bueno, son conceptualmente lo mismo, pero... 🧵

Ambos nacen de la misma idea de utilizar un modelo de componentes como abstracción para definir una interfaz de usuario.
Ambos utilizan la misma "tecnología" base que es el "core" de #React., el "reconciler" es.reactjs.org/docs/reconcili…, manejo de estado, props, etc.

Similares en sintaxis: ambos son "solo javascript" y utilizan JSX para definir sus componentes (y evitar tener que escribir React.createElement cada vez).

Pero se diferencian en el "engine" en donde se ejecutan.

Read 10 tweets

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!