¿Reacciona te parece abrumador?

Si es así, no estás solo.

escucho cosas como estas todo el tiempo:

• no use React; use vue en su lugar.

• reaccionar es duro e inútil; Use htmx o vainilla js en su lugar.

• Etc.

Pero como ingeniero de frontend senior con 5 años de experiencia en Palantir, puedo decir con confianza: “Reaccionar fue lo más fácil que tuve que aprender. "

En esta publicación, explicaré por qué React no es tan complejo como la gente hace que sea, y cómo abordar los desafíos si está luchando.

¿Listo? Vamos a sumergirnos.

? Descargue mi libro de consejos y trucos de reactación gratuito 101 para una ventaja.

7 razones por las que React se siente duro (y cómo solucionarlo)

Razón 1: No conoce a JavaScript lo suficientemente bien

Las personas luchan con Reaccion el 99% del tiempo porque su Fundación JavaScript no es sólida.

esto también era cierto para mí, al principio no podía entender el código React. Pasé meses luchando por escribir algo decente. Todo eso cambió cuando aprendí JavaScript.

Aquí está el mínimo que necesita saber antes de aprender reaccionar:

• La diferencia entre tipos de datos primitivos y de objetos

• objetos destructive

• Alcance

• cierres

• async

• Etc.

? Consulte esta gran guía de Kent C. Dodds en los conceptos de JavaScript que necesita conocer para React.

Una vez que sus habilidades de JavaScript mejoren, reaccionará mucho más fácil.

? Consulte mi publicación sobre cómo subir de nivel sus habilidades frontend para obtener recursos útiles para aprender JavaScript.

Razón 2: Estás usando las herramientas incorrectas

Si es nuevo en reaccionar, no se prepare para el fracaso eligiendo herramientas obsoletas o demasiado complejas:

• no use cree react app : está desactualizado, lento y carece de extensibilidad.

• no use next.js (por ahora): Si bien es sorprendente, agrega una curva de aprendizaje que no necesita como principiante.

en su lugar, comience con Vite. Es rápido, simple y amigable para principiantes. Me lo agradecerás más tarde?.

Razón 3: Estás confuso reaccionar con los marcos

reaccionar ≠ next.js ≠ remix.

next.js y remix son marcas construidas en la parte superior de React para crear aplicaciones de Stack.

no necesita saber Next.js o remix para aprender reaccionar.

pero necesita saber reaccionar para usar cualquiera de ellos .

Entonces, concéntrese en reaccionar primero. Los marcos pueden llegar más tarde ya que agregan una capa de complejidad.

Razón 4: Estás tratando de construir todo desde Scratch

construyendo todo desde cero, especialmente teniendo en cuenta la accesibilidad, puede ser abrumador.

Sin embargo, no tiene que enfrentarlo solo.

La belleza de React es su ecosistema de bibliotecas que le facilitan la vida?

Piense en ellos como atajos . ¿Por qué reinventar la rueda cuando alguien más ya ha construido uno increíble?

Aquí hay algunos ejemplos:

• dnd-kit para la funcionalidad de arrastrar y drop

• shadcn/ui para styling

• swr para obtener datos livianos para obtener

• etc.

Guarde tiempo y esfuerzo aprovechando estas herramientas.

Razón 5: Tiene poco personal pero no usa marcos

Si tiene poco tiempo o recursos (como un equipo de una persona), marcos como remix o next.js puede ser vidas.

cuando usarlos:

• ¿Tiene poco personal

• está construyendo una aplicación completa de stack

• desea enrutamiento incorporado, representación del lado del servidor y más

Si no necesita una solución de pila completa, adhiérase para reaccionar con React Router y algunas bibliotecas esenciales.

Razón 6: No comprende el proceso de renderizado de React (y termina con problemas de rendimiento)

Comprender el proceso de representación de React es fundamental para evitar problemas de rendimiento:

1. Rendering: reaccionar las funciones del componente (o los métodos de renderizado de componente de clase) para generar el domingo virtual

2. Reconciliation: React compara el DOM virtual con el DOM real para descubrir qué cambió.

3. fase de confirmación: reaccionan solo las actualizaciones de los elementos DOM necesarios.

4. pintura: el navegador vuelve a pintar la pantalla.

errores comunes que la gente cometen:

• demasiadas renders:

  solucionar esto minimizando el estado, manteniendo el estado bajo en el árbol de componentes y usando memoización donde sea necesario (¿no @ yo ?: la memoización puede cambiar la vida). ? Consulte esta guía en reaccionistas.
  
  

• en exceso

  useEffect : Se pueden evitar muchos efectos. Ver, es posible que no necesite un efecto.

• no siguiendo convenciones:

  Por ejemplo, al renderizar listas, siempre use claves únicas para evitar errores.

Razón 7: Su aplicación se rompe en producción

Si su aplicación funciona en desarrollo pero rompe la producción, es hora de agregar pruebas y un comprobador de tipo.

lo sé, lo sé, la prueba y el mecanografiado pueden sonar como una exageración. Pero escúchame.

Son sus redes de seguridad, captando errores antes de llegar a sus usuarios.

¡Su futuro yo le agradecerá!

aquí es lo que recomiendo:

• escriba checker:

  use typeScript. Es amigable para principiantes, especialmente con esta guía. Si está usando Vite, la configuración es simple.

• Testing:

  Use Vitest con Vite o reaccione la biblioteca de pruebas para otras configuraciones.

Las pruebas y tipos le ahorrarán horas de depuración, ¿y te mantendrán sano?

Resumen

¿Reacciona tan duro como parece?

No.

React es solo una biblioteca JavaScript. La mayor parte de la complejidad proviene de:

sin saber javascript lo suficientemente bien

• confuso reaccionar con marcas

• tratando de hacer todo usted mismo

• con vista a los conceptos básicos reaccionados

• Recuerde, cada experto fue una vez un principiante.

Con la mentalidad y las herramientas correctas, React puede ser su arma secreta para construir aplicaciones increíbles.

¿Tienes esto?

bonus

: descargue mi eBook ebook gratis,

101 reaccionando consejos y trucos , y guarde horas de frustración mientras construye aplicaciones reactas más suaves y rápidas. ? Comida para el pensamiento

// detectar tema oscuro var iframe = document.getElementById ('tweet-1862406693444874439-370'); if (document.body.classname.includes ('Dark-theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html?id=1862406693444874439&theme=dark" }

? MANSE EL PROBLEMA

// detectar tema oscuro var iframe = document.getElementById ('tweet-1861017779249320435-683'); if (document.body.classname.includes ('Dark-theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html?id=1861017779249320435&theme=dark" }

¿Eso es una envoltura?

¿Dejar un comentario? Para compartir su mayor desafío con React o lo que lo hizo clic para usted.

y no olvides dejar caer un "???".

Si está aprendiendo reaccionar, descargue mi libro 101 reaccionamiento de consejos y trucos para

gratis

.

Si le gustan los artículos como este, únase a mi

gratis Newsletter, frontendjoy

.

Si quieres consejos diarios, encuéntrame en x/twitter o en bluesky.