React est-il aussi difficile/complexe que cela en a l'air ?

React vous semble-t-il écrasant ?

Si c'est le cas, vous n'êtes pas seul.

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

• N'utilisez pas React ; utilisez Vue à la place.

• React est dur et inutile ; utilisez plutôt HTMX ou Vanilla JS.

• Etc.

Mais en tant qu'ingénieur frontend senior avec 5 ans d'expérience chez Palantir, je peux dire avec confiance : "React a été la chose la plus simple que j'ai dû apprendre."

Dans cet article, j'expliquerai pourquoi React n'est pas aussi complexe que les gens le prétendent – ​​et comment relever les défis si vous avez des difficultés.

Prêt ? Allons-y.

? Téléchargez mon livre GRATUIT de 101 trucs et astuces React pour prendre une longueur d'avance.

7 raisons pour lesquelles React semble difficile (et comment y remédier)

Raison 1 : Vous ne connaissez pas assez bien JavaScript

Les gens ont du mal avec React 99 % du temps parce que leur base JavaScript n'est pas solide.

C'était vrai pour moi aussi : je ne comprenais pas le code de React au début. J'ai passé des mois à lutter pour écrire quelque chose de décent. Tout a changé lorsque 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 objets

• Déstructuration d'objets

• Portée

• Fermetures

• Asynchrone

• Etc.

? Consultez cet excellent guide de Kent C. Dodds sur les concepts JavaScript que vous devez connaître pour React.

Une fois vos compétences JavaScript améliorées, React vous semblera beaucoup plus facile.

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

Raison 2 : vous utilisez les mauvais outils

Si vous débutez avec React, ne vous préparez pas à l'échec en choisissant des outils obsolètes ou trop complexes :

• Ne pas utiliser Créer une application React : Elle est obsolète, lente et manque d'extensibilité.

• Ne pas utiliser Next.js (pour l'instant) : Bien qu'incroyable, cela ajoute une courbe d'apprentissage dont vous n'avez pas besoin car un débutant.

Au lieu de cela, commencez par Vite. C’est rapide, simple et adapté aux débutants. Tu me remercieras plus tard ?.

Raison 3 : Vous confondez React avec Frameworks

Réagir ≠ Next.js ≠ Remix.

Next.js et Remix sont des frameworks construits sur React pour créer des applications full-stack.

Vous n'avez pas besoin de connaître Next.js ou Remix pour apprendre React.

Mais vous devez connaître React pour utiliser l'un d'entre eux.

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

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

Tout construire à partir de zéro, surtout en gardant l'accessibilité à l'esprit, peut s'avérer écrasant.

Cependant, vous n’êtes pas obligé d’y faire face seul.

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

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

Voici quelques exemples :

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

• shadcn/ui pour le style

• SWR pour une récupération de données légère

• etc.

Gagnez du temps et des efforts en tirant parti de ces outils.

Raison 5 : Vous manquez de personnel mais n'utilisez pas de frameworks

Si vous manquez de temps ou de ressources (comme une équipe composée d'une seule personne), des frameworks comme Remix ou Next.js peuvent vous sauver la vie.

Quand les utiliser :

• Vous êtes en sous-effectif

• Vous créez une application full-stack

• Vous souhaitez un routage intégré, un rendu côté serveur et bien plus encore

Si vous n'avez pas besoin d'une solution full-stack, restez fidèle à React avec React Router et quelques bibliothèques essentielles.

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

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

1. Rendu : React appelle des fonctions de composant (ou des méthodes de rendu de composant de classe) pour générer le DOM virtuel.

2. Réconciliation : React compare le DOM virtuel avec le DOM réel pour déterminer ce qui a changé.

3. Phase de validation : React met à jour uniquement les éléments DOM nécessaires.

4. Peinture : Le navigateur repeint l'écran.

Processus de rendu React. Crédits : https://x.com/_georgemoller

Erreurs courantes que font les gens :

• Trop de rendus : Corrigez ce problème en minimisant l'état, en gardant l'état bas dans l'arborescence des composants et en utilisant la mémorisation si nécessaire (ne me faites pas confiance : la mémorisation peut changer la vie) .
  
  ? Consultez ce guide sur les re-rendus React.

• Utilisation excessive useEffect : De nombreux effets peuvent être évités. Vous voyez, vous n'aurez peut-être pas besoin d'un effet.

• Ne suit pas les conventions : Par exemple, lors du rendu de listes, utilisez toujours des clés uniques pour éviter les bugs.

Raison 7 : Votre application s'interrompt en production

Si votre application fonctionne en développement mais s'interrompt en production, il est temps d'ajouter des tests et un vérificateur de type.

Je sais, je sais : les tests et TypeScript peuvent sembler exagérés. Mais écoutez-moi.

Ce sont vos filets de sécurité, détectant les bugs avant qu'ils n'atteignent vos utilisateurs.

Votre futur moi vous remerciera !

Voici ce que je recommande :

• Vérificateur de type : Utilisez TypeScript. C’est adapté aux débutants, surtout avec ce guide. Si vous utilisez Vite, la configuration est simple.

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

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

Résumé

React est-il aussi difficile que cela en a l'air ? Non.

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

• Ne connaissant pas assez bien JavaScript

• Confondre React avec les frameworks

• Essayer de tout faire soi-même

• Oublier les bases de React

N'oubliez pas que chaque expert était autrefois un débutant.

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

Vous avez ça ?.

Bonus : Téléchargez mon eBook gratuit, 101 trucs et astuces React, et économisez des heures de frustration tout en créant des applications React plus fluides et plus rapides.

?NOURRITURE À PENSÉE

<script> // Detect dark theme 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" } </script>

?REGÉRER LE PROBLÈME

C'est fini ?.

Laisser un commentaire ? pour partager votre plus grand défi avec React ou ce qui l'a fait cliquer pour vous.

Et n'oubliez pas de laisser un "???".

Si vous apprenez React, téléchargez mon livre 101 trucs et astuces React GRATUIT

.

Si vous aimez les articles comme celui-ci, rejoignez ma newsletter GRATUIT, FrontendJoy

.

Si vous voulez des conseils au quotidien, retrouvez-moi sur X/Twitter ou sur Bluesky. <script> // Detect dark theme 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" } </script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!