Comment l'ont-ils fait? Comment sont-ils passés de ceux qui ne peuvent pas ouvrir de relations publiques sans aide extérieure à ceux vers qui d'autres demandent de l'aide? Qu'est-ce qui a poussé les gens à demander des conseils à des gens prêts à donner des conseils aux autres? Comment les élèves sont-ils devenus enseignants? Je leur ai posé ces questions. Voici ce qu'ils ont répondu.
1. Utilisez ESLint et TypeScript
JavaScript est un langage de programmation peu typé. En utilisant ce langage, nous pouvons résoudre le même problème d'innombrables façons. JavaScript n'a pas de mécanismes intégrés pour nous protéger de l'écriture de code bogué ou de code dont les performances sont médiocres. Mais, heureusement pour nous, nous pouvons améliorer la situation en recourant à deux outils d'analyse de code statique. Ce sont TypeScript et ESLint.
En utilisant ESLint pour l'analyse de code statique, nous pouvons identifier les problèmes avant qu'ils n'entrent en production. Nous pouvons vérifier le code par rapport à nos normes. Cela améliore la maintenabilité de la base de code.
Par exemple, vous pouvez installer le plugin ESLint
eslint-plugin-react-hooks... Ce plugin remarquera le problème dans le code suivant, qui semble tout à fait normal, et nous informera que nous violons l'une des règles d' utilisation des hooks.
// ,
if (userName !== '') {
useEffect(function persistForm() {
localStorage.setItem('formData', userName);
});
}
TypeScript vous permet d'utiliser un système de type statique pour détecter les erreurs associées. Lorsque vous utilisez TypeScript, vous pouvez utiliser la puissante info-bulle IntelliSense qui permet de travailler plus rapidement et plus facilement avec divers composants et bibliothèques. Les info-bulles qui s'affichent lorsque vous écrivez votre code fournissent des informations sur les mécanismes internes des composants et des bibliothèques. Cela accélère la refactorisation et encourage les conventions de codage comme les génériques.
Quelqu'un qui est bon en TypeScript devient non seulement un meilleur programmeur JavaScript, mais commence finalement à écrire un meilleur code React.
2. Familiarisez-vous avec les hooks React
React Hooks a littéralement envahi le monde du développement de React depuis leur introduction en février 2019. Bien que l'équipe React dise que vous ne devriez pas refactoriser l'ancien code en le traduisant en hooks, les hooks sont littéralement partout ces jours-ci.
Si vous voulez progresser dans le domaine du développement React, le meilleur moment pour prendre le temps de le faire est d'apprendre les crochets en profondeur afin de pouvoir les comprendre pleinement.
Avez-vous besoin d'une sorte d'effet secondaire? Si tel est le cas, le crochet
useEffectest votre meilleur ami. Besoin de surveiller l'état d'un composant et de le restituer lorsque l'état change? Jeter un coup d'œil àuseState. Besoin de stocker et de mettre à jour certaines valeurs entre les rendus, mais lorsque ces valeurs changent, ne pas effectuer le rendu? Ou peut-être avez-vous besoin de connaître la hauteur ou la largeur des éléments DOM? Alors votre ami est ceci useRef.
Par exemple, regardons le cas d'utilisation le plus simple
useEffect. Supposons que nous voulions faire en sorte que le titre de la page soit mis à jour (sous la forme d'un effet secondaire) lorsqu'un bouton est cliqué. Vous pouvez essayer de résoudre ce problème comme ceci:
useEffect(() => {
document.title = `You clicked ${count} times`;
}); //
Ce hook est facile à optimiser en le faisant ne pas s'exécuter sur tous les rendus, mais uniquement lorsque la variable change
count. Cela se fait en incluant les countdépendances dans le tableau:
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // count
Vous devez être à l'aise avec les crochets les plus courants et créer vos propres crochets. Vous devez également être bien familiarisé avec l'utilisation rationnelle des crochets. Par exemple, savoir quand utiliser des hooks semble
useEffectentraîner un nouveau rendu et quand ce n'est pas le cas.
3. N'optimisez pas votre code trop tôt
La conversation sur les hooks nous amène au sujet de l'optimisation prématurée. Trop souvent, j'ai vu des développeurs en herbe de React aller à l'essentiel pour rendre leur code aussi rapide que possible. Le code React est le plus souvent optimisé à l'aide de hooks
useMemoet useCallback. Mais leur utilisation n'est pas toujours justifiée.
Jetons un coup d'œil à un composant simple qui prend un tableau d'informations sur la confiserie comme
props. Le composant filtre le tableau et affiche une liste de noms de chocolats (leur propriété typeest égale à une valeur de chaîne chocolate).
Certains développeurs peuvent avoir une envie irrésistible d'écrire un code similaire à celui illustré ci-dessous. Ils pourraient penser: "Je ne mettrai à jour la liste des chocolats que lorsque la liste globale des confiseries changera." La mise en œuvre de cette idée entraînera une surcharge de code avec des constructions d'assistance difficiles à lire.
const Chocolate = (props) => {
const chocolates = useMemo(
() => props.candies.filter((candy) => candy.type === "chocolate"),
[props.candies]
);
return (
<>
{chocolates.map((item) => (
<p>{item.name}</p>
))}
</>
);
};
Au lieu de créer un composant comme celui-ci, je suggérerais d'écrire un code simple et propre. Dans des cas comme celui-ci, il n'y a aucune raison d'utiliser
useMemo. Les crochets useMemoou useCallbackne doivent être utilisés que pour mémoriser les résultats d'opérations complexes qui créent une charge importante sur le système.
Je recommande de reporter le début des travaux d'optimisation jusqu'à ce que vous obteniez une mesure des performances de l'application qui indique clairement un problème.
Vous ne devriez pas l'utiliser partout
useCallbacket useMemouniquement parce que vous avez récemment lu quelque part à leur sujet. N'optimisez pas tout. Il est préférable d'attendre l'apparition du problème, puis de le résoudre. Ne résolvez pas de problèmes inexistants.
4. Sachez quand créer de nouveaux composants
J'ai vu de nombreux futurs programmeurs React mettre en œuvre la logique métier d'un projet dans des composants destinés à jouer un rôle purement de présentation. Afin de rendre votre code aussi réutilisable que possible, il est important de créer des composants qui soient aussi faciles et pratiques que possible à réutiliser.
Pour ce faire, vous devez vous efforcer de maintenir la séparation entre les composants de présentation et les composants qui implémentent une sorte de logique. Auparavant, une technique courante consistait à diviser les composants en «conteneurs» et, en fait, en «composants». Mais cette approche a progressivement perdu de sa pertinence.
Jetons un coup d'œil à un composant qui charge une liste d'éléments quelque part et les affiche sur la page. Notez que ces deux tâches sont implémentées dans le même composant.
const ListItems = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Il peut être tentant d'emprunter la voie du «conteneur». Suite à cette aspiration, nous arriverons à créer deux composants:
const ListContainer = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return <List items={items} />;
};
const List = (props) => {
return (
<>
{props.items.map((item) => (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
))}
</>
);
};
Mais dans une telle situation, vous devez agir différemment. À savoir, vous devez abstraire les parties du composant qui jouent un rôle purement de présentation. Le résultat sera deux composants - un composant
List(liste) et un composant Item(élément):
const List = () => {
const items = React.useState([]);
React.useEffect(() => {
async function fetchItems() {
await fetched = fetchItems();
setItems(fetched);
}
});
return (
<>
{items.map((item) => (
<Item item={item} />
))}
</>
);
};
const Item = ({ item }) => {
return (
<div className="item-container">
<img src={item.img} />
<div className="name">{item.name}</div>
<div className="author">{item.author}</div>
</div>
);
};
5. Accordez une attention particulière aux tests
Le niveau de maîtrise des technologies de test est ce qui distingue les juniors des seniors. Si vous n'êtes pas familiarisé avec les tests des applications React, vous pouvez trouver et étudier une tonne de matériaux à ce sujet.
Peut-être avez-vous écrit quelques tests unitaires à un moment donné, mais votre expérience n'est pas suffisante pour créer des tests d'intégration qui couvrent l'ensemble de l'application? Cela ne devrait pas vous déranger, car, encore une fois, il existe d'innombrables ressources pour vous aider à combler les lacunes en matière de connaissances et d'expérience.
Par exemple, voici mon article sur le cycle complet de test d'une application full stack basée sur React.
6. Distinguer les situations dans lesquelles vous devez utiliser l'état local et global
Nous aborderons ici le sujet de la gestion de l'état des applications dans React. Il existe des tonnes de technologies pour résoudre ce problème. Par exemple, il s'agit de redux, mobx, recoil, API
contextet bien plus encore. Il n'est même pas facile de les énumérer.
Mais quelle que soit la technologie de gestion d'état que vous choisissez, je vois souvent que les juniors React sont confus lorsqu'ils décident d'utiliser l'état global ou local. Malheureusement, il n’existe pas de règles claires pour prendre de telles décisions sans ambiguïté. Mais certaines règles concernant cette question peuvent encore être formulées. À savoir, afin de décider d'utiliser l'état global ou local pour stocker certaines données, répondez aux questions suivantes:
- Avons-nous besoin d'un composant non directement lié à notre composant pour pouvoir travailler avec ses données? Par exemple, le nom de l'utilisateur peut apparaître dans la barre de navigation et sur l'écran d'accueil.
- Les données doivent-elles persister lors de la navigation entre les pages d'application?
- De nombreux composants utilisent-ils les mêmes données?
Si ces questions peuvent recevoir une réponse positive, alors il pourrait être intéressant de profiter de l'état mondial. Mais, je vais vous dire tout de suite, vous ne devriez pas stocker d'informations sur ce qui se passe avec le menu dans l'état global. Lorsque vous décidez où stocker certaines données, essayez de spéculer sur les données utilisées à différents endroits de l'application et sur les données qui pourraient bien être stockées uniquement à l'intérieur des composants.
Résultat
Vous savez désormais quelles voies prendre pour évoluer professionnellement dans le domaine du développement React.
Quand je repense au code que j'ai écrit quand j'étais React Junior, une chose me vient à l'esprit. J'écrivais un code trop compliqué qui était difficile à comprendre. Au fur et à mesure que je gagnais en expérience, j'ai commencé à remarquer comment mon code devenait plus simple. Plus le code est simple, mieux c'est. Mon code est maintenant facile à comprendre, et vous pouvez le comprendre même six mois après qu'il a été écrit, quand il s'avère qu'une erreur s'est glissée dedans et doit être traitée.
Quels chemins de croissance professionnelle pour les programmeurs React connaissez-vous?
