Tutoriel React, partie 4: Composants parents et enfants

Nous publions la prochaine partie de la traduction du cours de formation React. Notre sujet aujourd'hui sera la relation entre les composants parent et enfant.



→ 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 9. Composants parent et enfant

→ Original

Aujourd'hui, nous allons parler des composants parents et enfants. L'utilisation de telles constructions rendra notre application beaucoup plus complexe que lorsqu'elle n'avait qu'un seul composant en sortie vers le DOM, comme MyInfo . Au lieu de cette structure simple, l'application peut avoir une hiérarchie complexe de composants, qui, par conséquent, est convertie en éléments JSX.

Commençons par le modèle d'application que vous connaissez déjà. Afin de rappeler ce que vous avez index.js , vous pouvez, de mémoire, écrire un code dans le fichier index.js vide pour afficher la page d'en-tête de premier niveau avec le texte Hello World! Réagissez aux outils. Voici à quoi pourrait ressembler le code:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <h1>Hello World!</h1>, document.getElementById("root") ) 

La dernière fois, où la description de l'élément <h1> est dans le code ci-dessus, il y avait du code pour afficher le composant MyInfo . Nous allons maintenant créer le composant App et l'afficher. Pour ce faire, nous avons besoin d'un code de la forme suivante:

 import React from "react" import ReactDOM from "react-dom" ReactDOM.render( <App />, document.getElementById("root") ) 

Le composant App sera le point d'entrée de notre application. Vous avez probablement déjà remarqué qu'il manquait quelque chose dans le code de l'exemple précédent. C'est vrai - nous n'avons pas encore importé l' App ici. Faisons-le:

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Mais un tel code reste toujours inopérant. Nous avons besoin du fichier composant App ( App.js ) situé dans le même dossier que index.js . Il s'agit du fichier import App from "./App" nous nous référons dans l' import App from "./App" importation de la commande d' import App from "./App" . Rappelez-vous que les noms des composants React sont écrits en style chameau et commencent par une majuscule. Créez le fichier dont nous avons besoin et décrivez-y le composant App . Essayez de le faire vous-même. À savoir, écrivez le code grâce auquel le composant App affiche à Hello again sur la page.

Voici à quoi ressemble ce code:

 import React from "react" function App(){ return (   <h1>Hello again</h1> ) } export default App 

Ici, la fonction App renvoie un seul élément, mais rappelez-vous que des structures plus complexes peuvent être renvoyées à partir de fonctions similaires. La chose la plus importante est de ne pas oublier que vous ne pouvez renvoyer qu'un seul élément, qui, si, en fait, vous devez afficher plusieurs éléments, est un conteneur qui les inclut. Par exemple, voici à quoi ressemblerait un retour de balisage décrivant un en-tête de premier niveau et une liste à puces:

 import React from "react" function App(){ return (   <div>     <h1>Hello a third time!</h1>     <ul>       <li>Thing 1</li>       <li>Thing 2</li>       <li>Thing 3</li>     </ul>   </div> ) } export default App 

Peut-être que maintenant nous déciderons que ce qui est formé au moyen du composant App devrait être un site Web. Il aura un bloc de navigation ( <nav></nav> ) et une zone de contenu principale ( <main></main> ). Cette solution conduira à la formation du code suivant:

 import React from "react" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>   </div> ) } export default App 

Voici à quoi cela ressemblera dans un navigateur.


Application dans le navigateur

Ici, vous pouvez toujours styliser la liste pour qu'elle ressemble davantage à une barre de navigation.

Vous pouvez remarquer que le code du composant est déjà devenu assez volumineux. Cela va à l'encontre de l'objectif pour lequel nous utilisons React. Plus tôt, nous avons parlé du fait que des fragments de code HTML peuvent être représentés comme des composants séparés, et dans notre composant, tout est empilé en un seul tas. Par conséquent, nous allons maintenant créer des composants pour chaque fragment indépendant du balisage.

Jetez un œil à ce schéma afin de mieux comprendre ce qui est en jeu.


Le composant App affiche le composant MyInfo, la sortie de l'élément <div>

Ici, nous affichons le composant App sur la page. Dans ce cas, le composant App décide d'afficher un autre composant - MyInfo . Et le composant MyInfo affiche déjà un certain élément JSX. Faites attention à la différence entre les concepts de «composant» et «élément». Les éléments sont des entités qui se transforment en code HTML standard. Ainsi, dans l'élément présenté au bas du diagramme, une simple <div> est utilisée, son nom commence par une petite lettre, qui nous indique qu'il s'agit d'un élément ordinaire et non d'un des composants que nous avons créés. En revanche, le nom MyInfo commence par une majuscule. Cela permet de comprendre que nous avons un composant.

Vous avez peut-être entendu parler du DOM (Document Object Model, souvent appelé «arbre»). L'élément racine de cet arbre est l'élément <html> . Dans notre cas, l'élément racine de l'arbre représenté dans le diagramme est le composant App . Les capacités de ce composant ne sont pas limitées à la sortie d'un autre composant, MyInfo dans notre cas. Il peut, par exemple, afficher un autre composant, qui est un "pied de page", au bas de la page. Disons que ce composant sera appelé AwesomeFooter .


L'application de composant génère deux composants

Ce composant, à son tour, peut générer un élément <footer> qui contiendra le code HTML en bas de la page.

Si nous avons un «pied de page» d'une page, elle peut également contenir un «en-tête», qui forme sa partie supérieure.


L'application Composant génère trois composants

Le haut de la page est représenté dans notre diagramme par le composant AwesomeHeader . De tels noms sont donnés à ces composants afin de ne pas les confondre avec les éléments. Le composant AwesomeHeader , comme le composant App , peut générer non seulement du balisage JSX, mais également d'autres composants. Par exemple, il peut s'agir d'un composant NavBar , qui est une barre de navigation, et d'un composant Logo qui affiche un logo. Et ces composants afficheront déjà des éléments ordinaires - tels que <img /> et <nav> .

En examinant ce schéma, vous remarquerez peut-être qu'une application React, au fur et à mesure de son développement, peut devenir de plus en plus complexe. Et ce que nous avons examiné ici est, en fait, un exemple d'une structure d'application extrêmement simple.

Créons maintenant un composant dans notre application de formation qui sera un «pied de page» de la page.

Pour ce faire, créez, dans le même dossier que le fichier index.js , un nouveau fichier. Footer.js le Footer.js et insérez-y le code suivant:

 import React from "react" function Footer() {   return (       <footer>           <h3><font color="#3AC1EF">▍This is my footer element</font></h3>       </footer>   ) } export default Footer 

Veuillez noter que le nom du composant fonctionnel commence par une majuscule ( Footer ) et le nom de l'élément (<footer> ) commence par un petit. Comme déjà mentionné, cela permet de distinguer les éléments des composants.

Si vous actualisez maintenant la page, le balisage généré par le composant Footer ne sera pas affiché dans sa partie inférieure. Cela est complètement attendu, car pour l'afficher, vous devez apporter les modifications appropriées au code du composant App .

À savoir, nous parlons du fait que dans le code du fichier du composant App , vous devez importer le composant Footer et en créer une instance. Modifiez le code du fichier App.js :

 import React from "react" import Footer from "./Footer" function App(){ return (   <div>     <nav>       <h1>Hello a third time!</h1>       <ul>         <li>Thing 1</li>         <li>Thing 2</li>         <li>Thing 3</li>       </ul>     </nav>     <main>       <p>This is where most of my content will go...</p>     </main>     <Footer />   </div> ) } export default App 

Maintenant, la page sur laquelle les formulaires de demande ressembleront à celle ci-dessous.


Le composant App affiche le balisage formé par un autre composant en bas de la page - Pied de page

Vous remarquerez peut-être que dans le code généré par le composant App , il existe un étrange mélange d'éléments JSX ordinaires avec des composants. Il serait préférable que ce que le composant App affiche soit comme une table des matières dans un livre, de sorte qu'il contienne principalement des composants. À savoir, le fait est que le code du composant ressemblerait à ceci:

 import React from "react" import Footer from "./Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Si l'application a une structure similaire (dans notre cas, puisque les fichiers de composant Header et MainContent n'ont pas encore été créés, le code ne fonctionnera pas), alors la description des éléments formant les différentes parties de la page sera dans les fichiers des composants correspondants. Dans le même temps, les composants importés dans le composant App peuvent contenir d'autres composants imbriqués. Ainsi, des structures assez étendues peuvent être formées, dont les dimensions sont déterminées par les besoins d'une application particulière.

Ici, nous avons expliqué comment travailler avec des composants imbriqués. Vous pouvez très bien essayer dans la pratique ce que vous venez d'apprendre en mettant le projet, dont le fichier App.js présente comme indiqué ci-dessus, en état de fonctionnement.

Leçon 10. Atelier. Composants parent et enfant

→ Original

▍Emploi

Créez une application React à partir de zéro. Affichez le composant racine de l' App (défini dans un fichier séparé) sur la page. Imprimez les composants suivants à l'intérieur de ce composant:

1. Navbar
2. MainContent
3. Footer

Les composants affichés par l' App doivent être décrits dans des fichiers séparés, chacun d'eux doit générer des éléments JSX.

▍Solution

Pour résoudre ce problème, un projet standard créé à l'aide des outils create-react-app est utilisé (si vous ne savez pas comment créer un tel projet, jetez un œil à ce matériel). Il utilise le standard index.html .

Le code du fichier index.js :

 import React from "react" import ReactDOM from "react-dom" import App from "./App" ReactDOM.render( <App />, document.getElementById("root") ) 

Voici le code du fichier App.js Veuillez noter que nous utiliserons le dossier des components pour stocker les fichiers des composants.

 import React from "react" import Header from "./components/Header" import MainContent from "./components/MainContent" import Footer from "./components/Footer" function App() {   return (       <div>           <Header />           <MainContent />           <Footer />       </div>   ) } export default App 

Le code du fichier Header.js :

 import React from "react" function Header() {   return (       <header>This is the header</header>   ) } export default Header 

MainContent.js fichier MainContent.js :

 import React from "react" function MainContent() {   return (       <main>This is the main section</main>   ) } export default MainContent 

Code du fichier Footer.js :

 import React from "react" function Footer() {   return (       <footer>This is the footer</footer>   ) } export default Footer 

Vous pouvez organiser le travail avec les composants comme vous le souhaitez. Autrement dit, vous pouvez, par exemple, d'abord écrire tout le code nécessaire dans le fichier App.js qui importe les composants et affiche leurs instances, puis créer les fichiers de composants. Vous pouvez faire l'inverse - créez d'abord des fichiers de composants avec du code, puis travaillez sur le fichier App.js La chose la plus importante est que vous vous retrouvez avec une application qui fonctionne.

Voici à quoi ressemble le projet dans VSCode.


Projet en VSCode

Et voici la page que cette application a formée.


Page d'application dans le navigateur

Notre application React fonctionne, mais ce qu'elle affiche sur la page semble complètement inintéressant. Vous pouvez résoudre ce problème en stylisant le contenu de la page.

Résumé

Aujourd'hui, nous avons parlé des composants parents et enfants. La prochaine fois, nous commencerons à travailler sur notre premier grand projet de formation et parlerons du style des éléments de page.

Chers lecteurs! Si vous êtes engagé dans ce cours, veuillez nous indiquer comment vous effectuez des exercices pratiques. À savoir - écrivez-vous le code qui s'appelle «de la tête», ou regardez-vous le texte de la leçon précédente? Ou peut-être que vous essayez de trouver ce que vous avez oublié sur Internet?