React vous semble-t-il écrasant?

Si oui, vous n'êtes pas seul.

J'entends des choses comme celles-ci tout le temps:

• n'utilise pas react; Utilisez Vue à la place.

• react est dur et inutile; Utilisez Htmx ou Vanilla JS à la place.

• Etc.

Mais en tant qu'ingénieur de frontend senior avec 5 ans d'expérience à Palantir, je peux dire en toute confiance: «React était la chose la plus facile que j'ai dû apprendre. »

Dans cet article, je vais expliquer pourquoi React n'est pas aussi complexe que les gens le prétendent - et comment relever les défis si vous avez du mal.

Prêt? Plongeons-nous.

? Téléchargez mon livre de conseils et de trucs React First gratuits pour une longueur d'avance.

7 raisons pour lesquelles React est difficile (et comment le réparer)

Raison 1: vous ne connaissez pas assez bien JavaScript

Les gens ont du mal à réagir 99% du temps parce que leur fondation JavaScript n'est pas solide.

C'était aussi vrai pour moi - je ne pouvais pas comprendre le code React au début. J'ai passé des mois à lutter pour écrire quelque chose de décent. Tout cela a changé quand j'ai appris JavaScript.

Voici le minimum que vous devez savoir avant d'apprendre React:

• La différence entre les types de données primitifs et les objets

• objets destructuration

• Portée

• fermetures

• async

• Etc.

? Consultez ce grand guide de Kent C. Dodds sur les concepts JavaScript que vous devez connaître pour réagir.

Une fois que vos compétences JavaScript s'améliorent, React se sentira beaucoup plus facile.

? Consultez mon article Comment améliorer vos compétences de frontend pour des ressources utiles pour apprendre JavaScript.

Raison 2: vous utilisez les mauvais outils

Si vous êtes nouveau pour réagir, ne vous préparez pas à l'échec en choisissant des outils obsolètes ou trop complexes:

• n'utilisez pas créer une application réact : elle est obsolète, lente, et manque d'extensibilité.

• N'utilisez pas next.js (pour l'instant): Bien que incroyable, il ajoute une courbe d'apprentissage dont vous n'avez pas besoin en tant que débutant.

Au lieu de cela, commencez par Vite. C'est rapide, simple et adapté aux débutants. Vous me remercierez plus tard ?.

Raison 3: Vous confondez la réaction avec les frameworks

react ≠ next.js ≠ remix.

next.js et remix sont des frameworks construits au-dessus de React pour créer des applications complètes.

vous n'avez pas besoin de savoir next.js ou remix pour apprendre à réagir.

mais vous devez savoir react pour utiliser l'un d'eux .

Donc, concentrez-vous d'abord sur React. Les cadres peuvent venir plus tard car ils ajoutent une couche de complexité.

Raison 4: vous essayez de tout construire à partir de zéro

construire tout à partir de zéro - en particulier avec l'accessibilité à l'esprit - peut être écrasant.

Cependant, vous n'avez pas à y faire face seul.

La beauté de React est son écosystème de bibliothèques qui vous facilite la vie ?.

Considérez-les comme raccourcis . Pourquoi réinventer la roue alors que quelqu'un d'autre en a déjà construit un incroyable?

Voici quelques exemples:

• dnd-kit pour la fonctionnalité glisser-déposer

• shadcn / ui pour le style

• SWR pour les données légères obtenant

• etc.

Enregistrer le temps et les efforts en tirant parti de ces outils.

Raison 5: Vous êtes en sous-effectif mais n'utilisez pas de frameworks

Si vous manquez de temps ou de ressources (comme une équipe d'une personne), des frameworks comme Remix ou Next.js peuvent être des sauveteurs.

Quand les utiliser:

• vous êtes en sous-effectif

• Vous créez une application complète

• Vous voulez un routage intégré, un rendu côté serveur et plus

Si vous n'avez pas besoin d'une solution complète, restez pour réagir avec le routeur React et quelques bibliothèques essentielles.

Raison 6: Vous ne comprenez pas le processus de rendu de React (et vous retrouvez avec les problèmes de performances)

Comprendre le processus de rendu de React est essentiel pour éviter les problèmes de performances:

1. Rendu: Réagir les fonctions des composants d'appels (ou méthodes de rendu de composant de classe) pour générer le dom.

2. réconciliation: réacte compare le dom virtuel avec le vrai dom pour comprendre ce qui a changé.

3. Commit Phase: réagir les mises à jour uniquement les éléments DOM nécessaires.

4. peinture: le navigateur repente l'écran.

erreurs communes que les gens font:

• trop de rendus:

  corriger ceci en minimisant l'état, en gardant l'état bas dans l'arborescence des composants, et en utilisant la mémorisation là où il faut (ne me? ? Consultez ce guide sur React Re-Renders.
  
  

  sureservant
useEFFECT
• :

  De nombreux effets peuvent être évités. Voir, vous pourriez ne pas avoir besoin d'un effet.

  ne suivant pas les conventions:
par exemple, lors du rendu des listes, utilisez toujours des clés uniques pour empêcher les bogues.

Raison 7: votre application se casse en production

Si votre application fonctionne dans le développement mais que les ruptures de production, il est temps d'ajouter des tests et un vérificateur de type. Je sais, je sais que le test et le dactylographie peuvent sembler exagérés. Mais écoutez-moi.

Ce sont vos filets de sécurité, attrapant des bugs avant d'atteindre vos utilisateurs.

Votre avenir vous remerciera!

Voici ce que je recommande:

Type Checker:

Utiliser TypeScript. Il est adapté aux débutants, surtout avec ce guide. Si vous utilisez Vite, la configuration est simple.

• Testing:
Utilisez la bibliothèque de tests Vite ou React ou React pour d'autres configurations.

• Les tests et les types vous feront gagner des heures de débogage et vous garderont sain d'esprit?

Résumé

est-il aussi difficile que cela puisse paraître?

Non.

React n'est qu'une bibliothèque JavaScript. La plupart de la complexité vient de:

ne connaissant pas assez bien JavaScript

• confuse réact avec les frameworks

• essayant de tout faire vous-même

• surplombant les bases de la réact

• Rappelez-vous, chaque expert était autrefois un débutant.

Avec le bon état d'esprit et les outils, React peut être votre arme secrète pour créer des applications incroyables.

vous avez ceci?

bonus

: téléchargez mon

ebook gratuit,

101 conseils et astuces réactifs , et enregistrez des heures de frustration tout en créant des applications réacrées plus rapides.

? Nourris à réflexion

// détecter le thème sombre var iframe = document.getElementById ('tweet-1862406693444874439-370'); if (document.body.classname.incluses ('Dark-theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html?id=1862406693444874439&theme=dark" }

? Repérez le problème

// détecter le thème sombre var iframe = document.getElementById ('Tweet-186101779249320435-683'); if (document.body.classname.incluses ('Dark-theme')) { iframe.src = "https://platform.twitter.com/embed/tweet.html?id=186101779249320435&theme=dark" }

c'est un enveloppe?

laissez un commentaire? Pour partager votre plus grand défi avec React ou ce qui l'a fait, cliquez pour vous.

et n'oubliez pas de supprimer un "???".

Si vous apprenez React, téléchargez mon livre 101 React Tips & Tricks pour

gratuit

.

Si vous aimez les articles comme celui-ci, rejoignez mon gratuit newsletter,

frontendjoy

. Si vous voulez des conseils quotidiens, trouvez-moi sur x / twitter ou sur bluesky.