🤽🏿 🏴󠁧󠁢󠁷󠁬󠁳󠁿 ◼️ Tutoriel React Partie 2: Composants fonctionnels ⚒️ 🙋🏽 👨🏿‍🚀

Dans l'un de nos articles précédents, nous vous avons demandé s'il était conseillé de faire une série de publications traditionnelles basées sur ce cours React. Vous avez soutenu notre idée. C'est pourquoi nous présentons aujourd'hui à votre attention la poursuite du cours. Ici, nous parlons de composants fonctionnels.

→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 6. Composants fonctionnels

→ Original

Lors de la précédente leçon pratique, nous avons parlé du fait qu'il n'est pas nécessaire de placer tout le code JSX qui forme les éléments HTML dans l'argument de la méthode ReactDOM.render() . Dans notre cas, nous parlons d'une liste à puces, celle décrite ci-dessous.

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

Imaginez ce que vous devez afficher, en utilisant la même approche, une page Web entière sur laquelle il y a des centaines d'éléments. Si cela est fait, il sera pratiquement impossible de maintenir un tel code normalement. Lorsque nous avons parlé des raisons de la popularité de React, l'une d'entre elles était sa prise en charge des composants réutilisables dans cette bibliothèque. Nous allons maintenant parler de la façon de créer des composants React fonctionnels.

Ces composants sont appelés "fonctionnels" car ils les créent en construisant des fonctions spéciales.

Créez une nouvelle fonction et donnez-lui le nom MyApp :

 import React from "react" import ReactDOM from "react-dom" function MyApp() { } ReactDOM.render( <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul>, document.getElementById("root") )

Le nom de la fonction est créé exactement pour la raison que le schéma de dénomination des fonctions constructeurs est utilisé ici. Leurs noms (en fait - les noms des composants) sont écrits en style chameau - les premières lettres des mots qui les composent sont faites en majuscules, y compris la première lettre du premier mot. Vous devez strictement respecter cette convention de dénomination pour ces fonctions.

Les composants fonctionnels sont disposés assez simplement. À savoir, dans le corps de la fonction, il devrait y avoir une commande qui renvoie le code JSX, qui représente le composant correspondant.

Dans notre exemple, il suffit de prendre le code à puces et d'organiser le retour de ce code depuis le composant fonctionnel. Voici à quoi cela pourrait ressembler:

 function MyApp() { return <ul>   <li>1</li>   <li>2</li>   <li>3</li> </ul> }

Et bien que dans ce cas, tout fonctionnera comme prévu, c'est-à-dire que la commande de retour renverra tout ce code, il est recommandé de mettre des constructions similaires entre parenthèses et d'appliquer une autre convention adoptée dans React lors du formatage du code de programme. Il consiste à placer des éléments individuels sur des lignes distinctes et à les aligner en conséquence. À la suite de l'application des idées ci-dessus, le code de notre composant fonctionnel ressemblera à ceci:

 function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) }

Avec cette approche, le balisage renvoyé par le composant est très similaire au code HTML standard.

Maintenant, dans la méthode ReactDOM.render() , vous pouvez créer une instance de notre composant fonctionnel en la passant à cette méthode comme premier argument et en l'enfermant dans une balise JSX.

 import React from "react" import ReactDOM from "react-dom" function MyApp() { return (   <ul>     <li>1</li>     <li>2</li>     <li>3</li>   </ul> ) } ReactDOM.render( <MyApp />, document.getElementById("root") )

Vous remarquerez peut-être qu'une balise à fermeture automatique est utilisée ici. Dans certains cas, lorsque vous devez créer des composants qui ont une structure plus complexe, des conceptions similaires sont construites différemment, mais pour l'instant, nous n'utiliserons que de telles balises à fermeture automatique.

Si vous actualisez la page formée par le code ci-dessus, son apparence sera la même qu'avant le retrait du balisage de la liste à puces dans le composant fonctionnel.

Le balisage renvoyé par les composants fonctionnels obéit aux mêmes règles que nous avons considérées lors de l'application de la méthode ReactDOM.render() au premier paramètre. C'est-à-dire qu'il est impossible qu'il contienne des éléments JSX qui se succèdent. Essayer de placer n'importe quel autre élément après l'élément <ul> dans l'exemple précédent, disons - <ol> , entraînera une erreur. Vous pouvez éviter ce problème, par exemple, en enveloppant simplement tout ce qui renvoie un composant fonctionnel dans un élément <div> .

Peut-être avez-vous déjà commencé à ressentir les opportunités puissantes que nous offre l'utilisation de composants fonctionnels. En particulier, nous parlons de créer nos propres composants qui contiennent des fragments de code JSX, qui est une description du balisage HTML qui apparaît sur la page Web. Ces composants peuvent être disposés ensemble.

Dans notre exemple, il existe un composant qui affiche une simple liste HTML, mais au fur et à mesure que nous créons des applications de plus en plus complexes, nous allons développer des composants qui affichent d'autres composants que nous avons créés. En conséquence, tout cela se transformera en éléments HTML ordinaires, mais parfois, pour la formation de ces éléments, vous aurez peut-être besoin de dizaines de composants natifs.

Par conséquent, lorsque nous créons de plus en plus de composants, nous les plaçons dans des fichiers séparés, mais pour l'instant, il est important pour vous de maîtriser ce que nous venons de discuter, de vous habituer aux composants fonctionnels. Pendant le cours, vous créerez des structures de fichiers de plus en plus complexes.

Dans cette leçon, nous avons examiné les bases des composants fonctionnels, et dans la suivante, nous appliquons les connaissances acquises dans la pratique.

Leçon 7. Atelier. Composants fonctionnels

→ Original

▍Emploi

Préparez un projet React de base.
Créez un composant fonctionnel MyInfo qui forme les éléments HTML suivants:
1. Élément <h1> avec votre nom.
2. Un paragraphe de texte (élément <p> ) contenant votre petite histoire sur vous-même.
3. Une liste, marquée ( <ul> ) ou numérotée ( <ol> ), avec une liste des trois endroits que vous souhaitez visiter.
Répertoriez l'instance du composant MyInfo sur la page Web.

▍Tâche supplémentaire

Stylisez les éléments de la page en apprenant comment le faire vous-même (recherche Google). Il convient de noter que nous parlerons davantage des composants de style dans ce cours.

Remarque: bloc pliable

▍Solution

Ici, nous sommes satisfaits de la même page HTML que nous avons utilisée précédemment. Un fichier avec du code React sera également assez standard. À savoir, nous y importons les bibliothèques, créons le squelette du composant fonctionnel MyInfo et appelons la méthode render() de l'objet ReactDOM , en lui passant le composant à afficher sur la page et un lien vers l'élément de page dans lequel ce composant doit être affiché. À ce stade, le code ressemblera à ceci:

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { } ReactDOM.render(<MyInfo />, document.getElementById("root"))

Vous devez maintenant renvoyer le code JSX de MyInfo qui génère le balisage HTML conformément à la tâche. Voici le code de solution complet.

 import React from "react" import ReactDOM from "react-dom" function MyInfo() { return (   <div>     <h1>Bob Ziroll</h1>     <p>This is a paragraph about me...</p>     <ul>       <li>Thailand</li>       <li>Japan</li>       <li>Nordic Countries</li>     </ul>   </div> ) } ReactDOM.render( <MyInfo />, document.getElementById("root") )

Notez que la construction renvoyée par MyInfo est placée entre parenthèses et que les éléments à afficher se trouvent à l'intérieur de l'élément d'assistance <div> .

Résumé

Dans cet article, nous avons présenté les composants fonctionnels de React. La prochaine fois, nous parlerons des fichiers de composants et de la structure des projets React.

Chers lecteurs! Si vous suivez ce cours, parlez-nous de l'environnement dans lequel vous effectuez les exercices.