Aide-mémoire React.js pour les débutants | de Vishnu Sivan | Coinmons | juin 2022

React est une bibliothèque JavaScript développée par Meta pour créer efficacement une interface utilisateur avec un minimum de codage. L’objectif principal de React.js est de fournir les meilleures performances de rendu possibles en décomposant les pages en composants d’interface utilisateur plus petits.

La principale caractéristique de React.js est la facilité d’écriture du code. Nous pouvons intégrer des codes JavaScript dans des codes HTML en utilisant la syntaxe JSX contrairement à des technologies telles que Angular où nous devons écrire plus de lignes de code.

Dans cet article, nous allons apprendre les bases de React.js.

Table des matières

Réagir à la configuration de l’environnement

Prérequis pour créer des applications réactives : Node.js et NPM

Exemples de commandes de création d’application,

npx create-react-app hello-world
cd hello-world
npm start

Composants

Les composants sont des morceaux de code indépendants et réutilisables. Elle est similaire aux fonctions JavaScript qui renvoient du HTML via un render() fonction. Les composants sont généralement classés en deux : les composants de classe et les composants de fonction.

Composant de classe

Composant fonctionnel

État

L’état est une instance de React Component Class qui peut être utilisée pour stocker les valeurs de propriété qui appartiennent au composant. Le composant s’affiche à nouveau lorsqu’un changement d’état se produit.

Accessoires

Les accessoires (propriétés) sont des composants immuables en lecture seule. C’est un objet qui stocke la valeur des attributs et sert de support pour transmettre des données d’un composant à un autre. Il transmet des valeurs au composant de la même manière qu’un argument est transmis à une fonction.

Définition des accessoires/état par défaut

La defaultProps est utilisé pour définir les valeurs par défaut des accessoires. Il peut être défini comme une propriété de composant pour définir les accessoires par défaut de la classe. Il fournit également des valeurs par défaut pour l’état dans le constructeur.

accessoires par défaut

État par défaut

Méthodes de cycle de vie

React est utilisé pour appeler plusieurs méthodes de cycle de vie lors de l’exécution du composant de chaque étape. La méthode appelée lors de la création du composant est appelée montage. Chaque mise à jour de composant est appelée mise à jour. Le retrait des composants s’appelle le démontage. L’ensemble du processus s’appelle le « cycle de vie des composants ».

• Méthodes de cycle de vie de montage
  constructeur()
  statique getDerivedStateFromProps()
  rendre()
  composantDidMount()
• Mise à jour des méthodes de cycle de vie
  statique getDerivedStateFromProps()
  devraitComponentUpdate()
  rendre()
  getSnapshotBeforeUpdate()
  componentDidUpdate()
• Méthode de cycle de vie de démontage
  componentWillUnmount
• Erreur lors de la gestion des méthodes de cycle de vie
  statique getDerivedStateFromError()
  composantDidCatch()

Références DOM

React utilise des références pour l’accès DOM dans le composant. Cela peut être réalisé en ajoutant un attribut ref à un élément de votre application.

Événements DOM

L’événement est une action qui peut être déclenchée à la suite de l’action de l’utilisateur ou d’une action générée par le système. React possède son propre système de gestion des événements connu sous le nom d’événements synthétiques, qui est très similaire à la gestion des événements sur les éléments DOM.

Les événements React présentent des différences syntaxiques par rapport aux événements DOM. Elles sont:

• Les événements React sont nommés au format camelCase au lieu du format minuscule.
• Le gestionnaire d’événements React nécessite une fonction au lieu d’une chaîne.

JSX (Javascript XML)

JSX permet aux utilisateurs d’écrire du JavaScript en HTML. Il écrit des éléments HTML en JavaScript et les place dans le DOM sans aucun createElement() ou appendChild() méthodes.

Rendu conditionnel

React offre un rendu conditionnel pour rendre un composant particulier ou un extrait de code en fonction de certaines conditions ou de l’état de notre application.

Validation de propriété

La validation des props est un mécanisme utilisé pour éviter les problèmes liés aux données des props. La PropTypes est une propriété de composant de réaction qui permet aux utilisateurs de valider les types de données des valeurs transmises via les props.

Réagir Routeur

React Router est une bibliothèque JavaScript utilisée pour créer un routage dans l’application React. Le routage est un mécanisme par lequel nous pouvons naviguer vers différentes pages lorsque le chemin de l’URL correspond à n’importe quelle « route » dans le fichier du routeur.

Installation

npm install react-router-dom --save

Il existe deux types de composants de routeur :

• NavigateurRouter : Il est utilisé pour gérer les URL dynamiques.
• HashRouter : Il est utilisé pour gérer les requêtes statiques.

Exemple

Crochets de réaction

Les crochets ont été introduits dans React 16.8. Il permet aux utilisateurs d’utiliser des accessoires et des états directement à l’intérieur d’un composant de fonction. Il est utile de gérer l’état du composant et d’effectuer un effet secondaire lorsque certains changements se produisent dans l’état sans écrire de classe.

Les crochets sont similaires aux fonctions JavaScript, mais il est essentiel que vous suiviez ces règles lors de leur utilisation.

1. N’appelez les crochets qu’au niveau supérieur
   Les crochets doivent toujours être utilisés au niveau supérieur des fonctions React et il est nécessaire de ne pas les appeler à l’intérieur des boucles, des conditions ou des fonctions imbriquées.
2. Appelez uniquement les crochets à partir des fonctions React
   Appelez Hook uniquement à partir des composants de fonction et des Hooks personnalisés.

Les crochets intégrés sont divisés en deux : les crochets de base et les crochets supplémentaires.

Crochets de base

• useState
• utiliserEffet
• useContext

Crochets supplémentaires

• useReducer
• utiliserCallback
• utiliserMémo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

Contexte de réaction

Le contexte permet aux utilisateurs de transmettre des données aux composants enfants sans transmettre manuellement les accessoires à chaque niveau.

Sangle React

Reactstrap est une bibliothèque javascript qui fournit des composants Bootstrap intégrés qui facilitent la création d’une interface utilisateur pour votre application avec des validations intégrées. Reactstrap prend désormais en charge Bootstrap 5.1.

Installation:

npm install reactstrap react react-dom
npm install --save bootstrap

Exemple:

Limites d’erreur

React 16 introduit une nouvelle approche dans la gestion des erreurs au sein de votre application en utilisant des limites d’erreur. Il permet à l’utilisateur de maintenir l’exécution de l’application malgré une erreur survenant pendant l’exécution et affiche une interface utilisateur de secours à l’utilisateur.

React.js vs React natif

React.js est une bibliothèque JavaScript open source utilisée pour créer l’interface utilisateur des applications Web, tandis que React Native est utilisé pour développer une application mobile pour iOS et Android. React Native est presque similaire à React, cependant, il utilise des composants natifs au lieu de composants Web comme blocs de construction et cible les plates-formes mobiles sur les navigateurs.

Merci d’avoir lu cet article.

Merci Gowri M Bhatt pour la révision du contenu.

Pour obtenir l’article au format pdf : React.js-cheatsheet.pdf

L’article est également disponible sur Dev

Si vous avez apprécié cet article, veuillez cliquer sur le bouton clap 👏 et partager pour aider les autres à le trouver !

Si vous souhaitez explorer davantage, voici quelques ressources que j’ai trouvées utiles en cours de route :

Rejoignez Coinmonks Telegram Channel et Youtube Channel pour en savoir plus sur le trading et l’investissement cryptographiques