Tutoriel React, partie 3: fichiers de composants, structure du projet

Dans cet article, nous parlerons des fichiers de composants et de la structure des projets React.



→ 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 8. Fichiers de composants, structure des projets React

→ Original

Fichiers de composants

Si nous supposons que vous avez effectué la tâche de la leçon pratique précédente en utilisant le projet standard créé par create-react-app , alors maintenant il utilise le fichier index.html du dossier public , dont le contenu nous convient, et le fichier index.js du dossier src , dans lequel nous écrivons le code. En particulier, index.js ressemble maintenant à ceci:

 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") ) 

Veuillez noter que le code du composant fonctionnel MyInfo est contenu dans ce fichier. Comme vous vous en souvenez, React vous permet de créer de nombreux composants, c'est l'un de ses points forts. Il est clair que le fait de placer le code d'un grand nombre de composants dans un seul fichier, bien que techniquement faisable, signifie en pratique un grand inconvénient. Par conséquent, le code des composants, même les plus petits, est généralement organisé dans des fichiers séparés. C'est cette approche qu'il est recommandé de suivre lors du développement d'applications React.

Les fichiers de composants reçoivent des noms correspondant aux noms des composants dont le code stocke ces fichiers. Placez-les, dans le cas de create-react-app , dans le même dossier src où se trouve le fichier index.js . Avec cette approche, le fichier avec le composant MyInfo.js sera nommé MyInfo.js .

Créez un fichier MyInfo.js et transférez-y le code du composant index.js , en le supprimant de index.js .

À ce stade, index.js ressemblera à ceci:

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

MyInfo.js code MyInfo.js sera comme ceci:

 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>   ) } 

Voilà à quoi tout cela ressemble dans VSCode.


Transférer le code du composant dans un nouveau fichier

Nous avons transféré le code du composant depuis index.js , mais la structure que nous avons maintenant est toujours inopérante.

Tout d'abord, rappelez-vous à quoi sert la commande d' import React from "react" index.js dans index.js , même si nous index.js pas directement à React ici. La raison en est que sans l'importation React , les mécanismes de cette bibliothèque, en particulier JSX, ne fonctionneront pas. Grâce à cette commande d'importation, nous avons pu, dans les leçons précédentes, passer le code JSX à la méthode ReactDOM.render() et afficher le balisage HTML créé sur sa base sur la page. Tout cela signifie que dans le fichier MyInfo.js , nous devons également importer React. C'est une pratique courante pour les fichiers de composants.

Deuxièmement, nous devons nous assurer que la fonction MyInfo.js fichier MyInfo.js peut être utilisée dans d'autres fichiers d'application. Il doit être exporté pour cela. Ici, les capacités de la norme ES6 sont utilisées. Par conséquent, le code MyInfo.js mis à jour prend la forme suivante:

 import React from "react" 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>   ) } export default MyInfo 

Maintenant, travaillons sur le fichier index.js . À savoir, nous avons besoin que le composant MyInfo soit disponible dans ce fichier. Vous pouvez le rendre disponible dans index.js important.

Que faire si j'essaie d'écrire une commande d'importation de composants basée sur les react importation index.js react-dom dans index.js ? Par exemple, ajoutez la commande d'importation suivante au fichier:

 import MyInfo from "MyInfo.js" //  

Le système, ayant vu une telle commande, en particulier, se basant sur le fait qu'elle ne contient pas d'informations sur le chemin relatif vers le fichier, recherchera la dépendance du projet - le module avec le nom spécifié lors de l'appel de cette commande ( voici comment installer les dépendances dans les projets créés à l'aide de create-react-app ; ces dépendances peuvent ensuite être importées dans des projets React de la même manière que la bibliothèque React a été importée). Elle ne trouvera pas un tel module, par conséquent, la commande d'importation ne fonctionnera pas. Par conséquent, la commande d'importation de fichier doit être réécrite avec le chemin d'accès. Dans ce cas, nous sommes satisfaits de l'indication du répertoire courant ( ./ ) et la commande d'importation prendra la forme suivante:

 import MyInfo from "./MyInfo.js" //  

De plus, si nous parlons de la commande d' import , il est important de considérer qu'elle implique que les fichiers JavaScript sont importés avec son aide. Autrement dit, l'extension .js peut être complètement supprimée et la commande d' import , ayant acquis le formulaire illustré ci-dessous, ne perdra pas sa fonctionnalité.

 import MyInfo from "./MyInfo" //  

Habituellement, ces commandes d'importation de fichiers JS écrivent de cette façon.

Voici le index.js complet index.js fichier index.js .

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

▍ Structure du projet

Avec l'augmentation de la taille et de la complexité des projets React, il est très important de maintenir leur structure en bon état. Dans notre cas, bien que notre projet soit désormais petit, il est possible, dans le dossier src , de créer le dossier des components , conçu pour stocker des fichiers avec le code du composant.

Créez un tel dossier et déplacez-y le fichier MyInfo.js . Après cela, vous devrez modifier la commande d'importation de ce fichier dans index.js .

À savoir, maintenant le chemin d'accès à MyInfo.js indique que ce fichier se trouve au même endroit que index.js , mais en fait ce fichier se trouve maintenant dans le dossier des components situé dans le même dossier que index.js . Par conséquent, le chemin d'accès relatif à celui-ci dans index.js ressemblera à ceci: ./components/MyInfo . Voici le code index.js mis à jour:

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

Et voici à quoi tout cela ressemble dans VSCode.


Un dossier pour stocker des composants et importer un composant de ce dossier dans VSCode

En fait, un dossier de components , conçu pour héberger le code de tous les composants, est un exemple de structure de projet extrêmement simplifiée. Dans les projets réels, pour garantir la commodité de travailler avec un grand nombre d'entités, des structures de dossiers beaucoup plus complexes sont utilisées. La nature exacte de ces structures dépendra des besoins du projet et des préférences personnelles du programmeur.

Il est recommandé d'expérimenter tout ce que vous avez appris aujourd'hui. Par exemple, vous pouvez essayer de déplacer le fichier MyInfo.js vers un dossier et voir ce qui MyInfo.js , vous pouvez essayer de le renommer en y modifiant du code. Lorsque, au cours de ces expériences, le bon fonctionnement du projet sera perturbé - il sera utile de comprendre le problème et de remettre le projet en état de fonctionnement.

Résumé

Dans cette leçon, nous avons parlé de la mise en forme du code des composants en tant que fichiers séparés, de l'exportation et de l'importation de code à l'aide d'ES6 et de la structure des projets React. La prochaine fois, nous continuerons à nous familiariser avec les capacités des composants.

Chers lecteurs! Nous demandons aux développeurs expérimentés de React de partager leurs idées avec les nouveaux arrivants concernant l'organisation de la structure du projet.