Psst… voici les 8 meilleures feuilles de triche pour les développeurs React

Cette article a été initialement publié le .culte par Ashutosh Mishra. .cult est une plateforme communautaire basée à Berlin pour les développeurs. Nous écrivons sur tout ce qui concerne la carrière, réalisons des documentaires originaux et partageons des tas d’autres histoires inédites de développeurs du monde entier.

La pratique est la clé de la maîtrise de toute compétence ou domaine de connaissances. On n’apprend pas des choses en un jour. Vous avez besoin de semaines, de mois et parfois même d’années de pratique constante pour être bon dans quelque chose.

React, en général, est aussi vaste et il faut du temps pour bien l’apprendre. Ainsi, au lieu de pleurer devant le miroir lorsque vous oubliez des concepts ou de la syntaxe, recherchez les solutions.

Je suppose ici que vous avez au moins une connaissance de base de React, car si ce n’est pas le cas, j’ai un autre cadeau pour vous, ouvrez-le ici.

OK, on ​​dirait que vous avez déjà une certaine expérience avec React, mais les concepts et la syntaxe vous échappent. Dans ce cas, voici les 9 grandes feuilles de triche qui pourraient potentiellement vous aider dans votre voyage :

Noter: Les feuilles de triche sont utiles non seulement aux développeurs débutants, mais également aux développeurs expérimentés. La programmation consiste à trouver des solutions et non à mémoriser la syntaxe, donc plus vous êtes familiarisé avec les bases, plus cela aide.

1. Aide-mémoire du développeur

Aide-mémoire pour les développeurs est un site Web de feuille de triche de développement Web par Léon Gilyadov. Ce site Web de conception minimale contient des feuilles de triche sur :

Histoire du développement web

• Réagir
• Réagir Routeur
• Redux
• ES6

Cette feuille de triche React n’a pas beaucoup de profondeur, mais elle fournit un contenu de surface suffisamment bon pour parcourir les extraits et la syntaxe. Consultez-le pour rattraper rapidement la syntaxe lorsque vous êtes pressé.

Depuis avril 2022, cette feuille de triche a une syntaxe pour (ne comptant que les composants fonctionnels):

• Créer une application React
• Composant sans état
• Props dans le composant sans état
• Enfants
• useRef Crochet
• crochet useState
• Composant d’ordre supérieur
• Accessoires de rendu

2. Conseils de développement

Devhint.io est un autre site Web plein de feuilles de triche pour diverses technologies. La feuille de triche React de DevHint contient plus de contenu que les feuilles de triche du développeur.

Cependant, la plupart de son contenu est basé sur des composants de classe dont vous n’aurez probablement pas besoin à moins de travailler sur un héritage codebase.

Pourtant, cette feuille de triche contient quelques extraits utiles du monde des composants fonctionnels. Il s’agit de la déclaration du composant fonctionnel, de la déclaration et des exemples de crochet useState, du crochet useEffect et, surtout, de la création d’un crochet personnalisé.

3. Barger de roseaux

Cette feuille de triche est un article freecodecamp de Reed Barger. C’est l’un de mes favoris et la meilleure feuille de triche React pour les débutants. Il a été publié en février 2022, c’est donc aussi le plus récent parmi les autres cheatsheets mentionnés dans cet article.

La bonne partie de cette feuille de triche est que ce n’est pas une feuille de triche uniquement syntaxique, mais elle vous donne également le contexte derrière la syntaxe et vous en apprend un peu sur ces concepts. Donc, si vous êtes au niveau débutant, cela vous sera utile.

Cette feuille de triche contient du contenu sur les bases telles que React Elements, attributs, styles, fragments, composants, accessoires, etc. à divers crochets tels que useState, useEffect, useRef, useContext, useCallback et useMemo.

Le contenu est bien écrit, adapté aux débutants et suffisamment approfondi pour vous retenir ici pour la plupart des problèmes.

Personnellement, je ne pense pas qu’il y ait une raison pour que ce site ne soit pas dans vos favoris.

4. Eric le codeur

Cette feuille de triche est un article dev.to par Eric The Coder. Il a écrit cet article en juin 2021 comme aide-mémoire lorsqu’il oublie les concepts et la syntaxe de React.

Le contenu de cette feuille de triche n’est pas très approfondi, mais il contient beaucoup de choses très basiques que d’autres feuilles de triche auraient pu manquer. Cela inclut les règles JSX de base, JavaScript dans JSX, Liste avec clé, divers détails sur les événements de clic, etc.

En ce qui concerne le crochet, cette feuille de triche inclut useState, useEffect et useRef.

Eric a créé cette feuille de triche lorsqu’il était débutant dans React. Ainsi, même les choses les plus élémentaires sont correctement documentées et soulignées (ce que d’autres feuilles de triche manquent dans une certaine mesure).

5. SheCodes

Feuille de triche React de Shecodes est une feuille de triche basée sur la syntaxe uniquement et entièrement fonctionnelle.

Vous pouvez consulter tous les extraits en même temps ou les filtrer par catégorie. Il n’y a aucune explication donnée avec les extraits de code, vous pouvez donc l’utiliser pour jeter un coup d’œil rapide sur les différentes syntaxes.

Le contenu est similaire à d’autres sites Web et est facilement et rapidement accessible, ce qui en fait une excellente feuille de triche pour une référence rapide de la syntaxe.

6. Réagissez TypeScript

Enfin, nous avons quelque chose d’incroyable pour nos développeurs TypeScript.

Réagir dactylographié est un projet de feuille de triche open source sous licence MIT avec plus de 33 000 étoiles sur GitHub et de nombreux contributeurs géniaux pour maintenir le projet en vie et de haute qualité.

Si vous aimez travailler dans React et TypeScript, vous aimerez sûrement aussi cette feuille de triche. Vous pouvez accéder au contenu sur leur site Internet ou GitHub LISEZMOI.

L’ensemble de la feuille de triche est divisé en 4 parties :

• De base – Concentré à aider les développeurs React à commencer à utiliser TS dans les applications React.
• Avancé – Montre et explique l’utilisation avancée des types génériques pour les personnes qui écrivent des utilitaires de type réutilisables/fonctions/accessoires de rendu/composants d’ordre supérieur et bibliothèques TS + React.
• Migration – Aide à rassembler des conseils pour migrer progressivement de grandes bases de code à partir de JS ou de Flow, des personnes qui l’ont fait.
• HOC – Compile toutes les connaissances disponibles pour écrire des composants d’ordre supérieur avec React et TypeScript.

La qualité de l’ensemble du projet est au top, les explications nécessaires sont données partout où c’est nécessaire et, surtout, cette feuille de triche est activement entretenue et mise à jour par la communauté.

7. Codingcheats.io

Il s’agit d’un autre excellent composant uniquement fonctionnel Feuille de triche de réaction. Bien qu’elle ne soit pas excellente dans sa conception, cette feuille de triche a un excellent contenu.

Tous les extraits sont disponibles sur la page d’accueil avec une petite explication de chacun.

Le contenu comprend la syntaxe des composants de base, les raccourcis, la gestion des événements et 6 crochets différents – useState, useEffect, useRef, useMemo, useReducer. utilisez le rappel.

Des exemples appropriés sont donnés dans chaque extrait avec une brève explication de chacun. Vous devriez certainement consulter cette feuille de triche au moins une fois.

8. Ohans Emmanuel

Cette feuille de triche est l’article de LogRocket par Ohans Emmanuel. Contrairement aux autres feuilles de triche de notre liste, celle-ci ne se concentre pas sur les bases de React.

C’est une feuille de triche React Hooks qui ne traite que de l’explication de React Hooks. Il contient la syntaxe, le fonctionnement des crochets et les meilleures pratiques à garder à l’esprit lorsque vous travaillez avec des crochets dans React. Tout est expliqué avec des exemples et le contenu est très bien écrit.

Les crochets suivants sont inclus dans la feuille de triche :

• useState
• utiliserEffet
• useContext
• useLayoutEffect
• useReducer
• utiliserCallback
• vous êtes en mémo
• useRef

En tant que React moderne développeurla connaissance des crochets est essentielle et cette feuille de triche vous aidera à comprendre en profondeur leur noyau et comment les utiliser dans votre vie quotidienne.

Apprendre React n’est pas une tâche d’une journée. Cela prendra du temps, mais être cohérent, investir dans vos connaissances et être intelligent en utilisant des feuilles de triche vous aidera à rester dans le jeu à long terme.

Je vous souhaite bonne chance dans votre voyage. Si vous avez des questions, envoyez-moi un ping sur Twitter.

Consultez mon Blog pour plus.

Bon codage !