5 erreurs que j'ai commises lors du démarrage de mon premier projet React

Vous savez ce que c'est que de choisir un nouveau langage ou un nouveau framework. Parfois, il existe une excellente documentation pour vous aider à vous y retrouver. Mais même la meilleure documentation ne couvre pas absolument tout. Et lorsque vous travaillez avec quelque chose de nouveau, vous êtes obligé de trouver un problème qui n'a pas de solution écrite.

C'est comme ça que ça s'est passé pour moi la première fois que j'ai créé un projet React - et React est l'un de ces frameworks avec une documentation remarquable, surtout maintenant avec la documentation bêta. Mais j'ai quand même eu du mal à m'en sortir. Cela fait un bon moment depuis ce projet, mais les leçons que j'en ai tirées sont encore fraîches dans mon esprit. Et même s'il existe de nombreux didacticiels "comment faire" sur React, j'ai pensé que je partagerais ce que j'aurais aimé savoir lorsque je l'ai utilisé pour la première fois.

Donc, c'est ce qu'est cet article - une liste des premières erreurs que j'ai commises. J'espère qu'ils contribueront à rendre l'apprentissage de React beaucoup plus fluide pour vous.

Utiliser create-react-app pour démarrer un projet

TL;DR Utilisez Vite ou Colis.

Créer une application React (CRA) est un outil qui vous aide à mettre en place un nouveau projet React. Il crée un environnement de développement avec les meilleures options de configuration pour la plupart des projets React. Cela signifie que vous n'avez pas à passer du temps à configurer quoi que ce soit vous-même.

En tant que débutant, cela semblait être une excellente façon de commencer mon travail ! Aucune configuration ! Commencez simplement à coder !

CRA utilise deux packages populaires pour y parvenir, webpack et Babel. webpack est un bundler Web qui optimise tous les actifs de votre projet, tels que JavaScript, CSS et les images. Babel est un outil qui vous permet d'utiliser les nouvelles fonctionnalités JavaScript, même si certains navigateurs ne les prennent pas en charge.

Les deux sont bons, mais il existe de nouveaux outils qui peuvent mieux faire le travail, en particulier Vite et les Compilateur Web rapide (CFC).

Ces nouvelles alternatives améliorées sont plus rapides et plus faciles à configurer que Webpack et Babel. Cela facilite l'ajustement de la configuration, ce qui est difficile à faire dans create-react-app sans éjecter.

Pour les utiliser tous les deux lors de la configuration d'un nouveau projet React, vous devez vous assurer d'avoir Nœud version 12 ou supérieure installée, puis exécutez la commande suivante.

npm create vite

Il vous sera demandé de choisir un nom pour votre projet. Une fois que vous avez fait cela, sélectionnez React dans la liste des frameworks. Après cela, vous pouvez sélectionner soit Javascript + SWC or Typescript + SWC

Ensuite, vous devrez changer de répertoire cd dans votre projet et exécutez la commande suivante ;

npm i && npm run dev

Cela devrait exécuter un serveur de développement pour votre site avec l'URL localhost:5173

Et c'est aussi simple que ça.

En utilisant defaultProps pour les valeurs par défaut

TL;DR Utilisez plutôt les paramètres de fonction par défaut.

Les données peuvent être transmises aux composants React via quelque chose appelé props. Ceux-ci sont ajoutés à un composant tout comme les attributs d'un élément HTML et peuvent être utilisés dans la définition d'un composant en prenant les valeurs pertinentes de l'objet prop transmis comme argument.

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

Si jamais une valeur par défaut est requise pour un prop, defaultProp propriété peut être utilisée :

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

Avec le JavaScript moderne, il est possible de déstructurer le props objet et affectez-lui une valeur par défaut dans l'argument de la fonction.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

Ceci est plus favorable car le code peut être lu par les navigateurs modernes sans nécessiter de transformation supplémentaire.

Malheureusement, defaultProps nécessitent une transformation pour être lues par le navigateur car JSX (JavaScript XML) n'est pas pris en charge par défaut. Cela pourrait potentiellement affecter les performances d'une application qui utilise beaucoup de defaultProps.

Ne pas utiliser propTypes

TL;DR Utilisez TypeScript.

Dans React, le propTypes La propriété peut être utilisée pour vérifier si un composant reçoit le type de données correct pour ses props. Ils vous permettent de spécifier le type de données à utiliser pour chaque accessoire, comme une chaîne, un nombre, un objet, etc. Ils vous permettent également de spécifier si un accessoire est requis ou non.

De cette façon, si un composant reçoit le mauvais type de données ou si un accessoire requis n'est pas fourni, React générera une erreur.

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

Manuscrit fournit un niveau de sécurité de type dans les données transmises aux composants. Si sûr, propTypes étaient une bonne idée à mes débuts. Cependant, maintenant que TypeScript est devenu la solution incontournable pour la sécurité des types, je recommanderais vivement de l'utiliser par-dessus tout.

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript est un langage de programmation qui s'appuie sur JavaScript en ajoutant une vérification de type statique. TypeScript fournit un système de typage plus puissant, capable de détecter davantage de bogues potentiels et d'améliorer l'expérience de développement.

Utilisation des composants de classe

TL ; DR : écrire des composants en tant que fonctions

Les composants de classe dans React sont créés à l'aide de classes JavaScript. Ils ont une structure plus orientée objet et quelques fonctionnalités supplémentaires, comme la possibilité d'utiliser le this mots-clés et méthodes de cycle de vie.

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

Je préfère écrire des composants avec des classes plutôt que des fonctions, mais les classes JavaScript sont plus difficiles à comprendre pour les débutants et this peut devenir très déroutant. Au lieu de cela, je recommanderais d'écrire des composants en tant que fonctions :

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

Les composants de fonction sont simplement des fonctions JavaScript qui renvoient JSX. Ils sont beaucoup plus faciles à lire et n'ont pas de fonctionnalités supplémentaires comme le this mot-clé et méthodes de cycle de vie ce qui les rend plus performants que les composants de classe.

Les composants fonctionnels ont également l'avantage d'utiliser des crochets. Crochets de réaction vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de composant de classe, ce qui rend votre code plus lisible, maintenable et réutilisable.

Importer React inutilement

TL; DR : Il n'est pas nécessaire de le faire, sauf si vous avez besoin de crochets.

Depuis la sortie de React 17 en 2020, il est désormais inutile d'importer React en haut de votre fichier chaque fois que vous créez un composant.

import React from 'react'; // Not needed!
export default function Card() {}

Mais nous devions le faire avant React 17 car le transformateur JSX (ce qui convertit JSX en JavaScript normal) utilisait une méthode appelée React.createElement cela ne fonctionnerait que lors de l'importation de React. Depuis lors, un nouveau transformateur a été publié qui peut transformer JSX sans le createElement méthode.

Vous devrez toujours importer React pour utiliser les crochets, débris, et toute autre fonction ou composant dont vous pourriez avoir besoin dans la bibliothèque :

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

C'étaient mes premières erreurs !

Peut-être que « erreur » est un mot trop dur puisque certaines des meilleures pratiques sont apparues plus tard. Pourtant, je vois de nombreux cas où «l'ancienne» façon de faire quelque chose est toujours activement utilisée dans des projets et d'autres didacticiels.

Pour être honnête, j'ai probablement fait plus de cinq erreurs au début. Chaque fois que vous recherchez un nouvel outil, cela ressemblera davantage à un voyage d'apprentissage pour l'utiliser efficacement, plutôt qu'à un interrupteur. Mais ce sont les choses que je porte toujours avec moi des années plus tard !

Si vous utilisez React depuis un certain temps, quelles sont les choses que vous auriez aimé savoir avant de commencer ? Ce serait formidable de créer une collection pour aider les autres à éviter les mêmes difficultés.

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/5-mistakes-starting-react/