Share
Dans la première partie de cette série de didacticiels, nous avons utilisé créer-réagir-app outil pour créer un exemple d'application de travail comme point de départ pour notre application de galerie 'Movie Mojo'.
Dans la deuxième partie, nous verrons comment ajouter notre premier composant personnalisé pour afficher des cartes de film individuelles. Nous verrons également comment l'utilisation d'accessoires nous permet de personnaliser l'apparence des composants en transmettant des données plutôt que de les coder en dur..
Cela démontre la flexibilité et la réutilisabilité des composants, et comment ils peuvent être utilisés comme blocs de construction puissants dans vos applications React..
OK, créons un composant! Pour commencer, nous allons garder les choses assez simples et refactoriser l'en-tête HTML dans son propre composant.
Les meilleures pratiques de Modern React recommandent de séparer chaque composant de votre application dans un fichier séparé. Nous suivrons ce principe donc, dans vos projets / src / composants / dossier, créez un nouveau fichier appelé Header.js et ouvrez-le dans un éditeur de texte.
Au début des fichiers de composants, nous commençons toujours par importer les bibliothèques requises, d'autres composants (car nous pouvons imbriquer des composants) et des ressources supplémentaires dont nous avons besoin (par exemple, des styles). le importation déclaration fait partie de ES6 et nous permet de garder nos projets hautement modulaires.
Pour notre
importer Réagir, Composant de 'réagir';
Ceci importe la totalité de la bibliothèque React et le rend disponible via le Réagir variable. Il importe également le Composant objet directement afin que nous puissions l'utiliser sans avoir à qualifier spécifiquement avec un précédent Réagir. référence d'objet.
En d'autres termes, si nous n'importons pas explicitement le Composant objet alors nous devrions y accéder comme suit:
Composant de réaction
Mais parce que nous avons importé Composant directement, nous pouvons simplement l'utiliser seul, sans aucune référence à la Réagir variable. Peu importe lequel vous utilisez, et c'est juste par préférence.
Ensuite, pour créer le composant, nous étendons la Composant objet pour créer une nouvelle classe qui définit notre importation déclaration, type:
la classe Header étend Component export par défaut App;
Ici, nous utilisons une classe ES6 comme conteneur de composants. Les classes sont un excellent moyen d'encapsuler tout le code nécessaire pour décrire votre composant..
Vous avez peut-être également remarqué que le fichier de composant se termine par une instruction d'exportation. Comme vous vous en doutez, cela exporte notre composant et le rend disponible pour les autres fichiers de notre projet..
Au minimum, tous les composants de React doivent avoir une méthode de rendu, qui retourne du balisage. Il peut s’agir de HTML, d’autres composants de React ou d’un mélange des deux..
Ajoutez ceci dans votre classe de composant:
Accentsconagua
render () return React.createElement ('div', null, 'Bonjour, c'est un composant de React!'); le Pour utiliser un composant React dans un autre composant, nous devons d'abord l'importer. Ajoutez-le donc à la liste des instructions d'importation en haut de Notez que vous n'avez pas besoin d'ajouter le En fait, si vous essayez d'utiliser Nous pouvons maintenant ajouter le Donc ce n'est pas permis: Si vous voulez renvoyer plusieurs éléments, vous devez tous les envelopper dans un seul élément wrapper: Alors assurez-vous que vous ajoutez le Bienvenue dans l'application 'Movie Mojo' React! Cela se traduira par notre Pour compléter le Cependant, vous avez peut-être remarqué qu'il y a un problème. Dans La réponse est JSX. Dans C'est ainsi que nous devons écrire des composants React sans JSX. En fait, c'est ce en quoi JSX est compilé avant de pouvoir être rendu au navigateur.. Vous n'êtes pas obligé d'utiliser JSX du tout pour vos composants React; c'est entièrement à vous. Mais presque tous les composants que vous rencontrerez seront écrits en JSX parce que c'est tellement plus facile à écrire. Il est également très lisible par les nouveaux utilisateurs de votre code. Imaginez avoir à étudier un projet React contenant des dizaines de composants différents écrits en JavaScript simple! Il n’est donc pas surprenant que nous utilisions JSX pour les définitions de composants dans le reste de cette série de didacticiels.. Allez-y et remplacez le Alors que JSX nous laisse beaucoup plus de flexibilité dans l'écriture de nos composants, gardez à l'esprit que ce n'est pas du HTML que nous écrivons, mais une abstraction de celui-ci.. Vous pouvez le voir dans l'extrait de code ci-dessus. Avis dans le Modifions également les styles d'en-tête. Ouvrir Ceci met à jour la couleur de fond de l'en-tête et réduit la hauteur. Jusqu'ici, notre Pensez aux accessoires de composants similaires aux balises HTML. Par exemple, un Nous pouvons faire la même chose pour les composants React. Supposons que nous ne voulions pas que notre en-tête produise le texte fixe "Découvrez votre film Mojo!" tout le temps. Ne serait-il pas préférable que notre en-tête puisse afficher du texte? Contrairement aux attributs HTML, nous pouvons nommer nos accessoires de composant comme bon nous semble. À l'intérieur Ensuite, mettez à jour le Cela a pour résultat que notre en-tête affiche le texte ajouté à la liste. Regardons de plus près comment nous avons référencé le Les accolades indiquent simplement à JSX que nous souhaitons évaluer du code JavaScript. Cela le distingue du texte. Si nous n'avons pas utilisé d'accolades, le littéral de chaîne le Notre C'est une bonne nouvelle lors du développement de futures applications React, car vous pouvez réutiliser des composants de projets précédents pour ne pas avoir à tout écrire à partir de zéro.. Nous avons utilisé les accessoires ci-dessus pour passer une chaîne fixe dans le Pour envoyer une variable via des accessoires, nous pourrions faire quelque chose comme ceci, où Il existe un outil très utile pour le navigateur Chrome qui vous permet d'inspecter des informations sur votre application React.. Les outils de développement par défaut vous permettent uniquement de visualiser les éléments HTML normaux, mais avec l'extension Outils de développement React installée, vous pouvez parcourir tous les composants React de votre application.. Une fois installé, ouvrez les outils de votre inspecteur de navigateur, puis cliquez sur le nouveau logiciel disponible. Réagir languette. Notez qu'au lieu d'éléments HTML, vous voyez la hiérarchie des composants React dans votre application. Clique sur le Une fois sélectionné, les informations sur un composant sont affichées dans la fenêtre à droite. le Les outils de développement de React sont très utiles pour le débogage, en particulier lorsque vous développez des applications React plus complexes. Il est donc utile de s'habituer à les utiliser sur des applications plus simples.. Vous pouvez également utiliser les outils de développement de React pour inspecter l'état de votre application, ce que nous aborderons dans le prochain tutoriel.. Dans ce tutoriel, vous avez appris à diviser votre application en composants distincts pour la rendre plus modulaire. Les accessoires de composant vous permettent de transmettre des valeurs à des composants individuels, de la même manière que vous ajoutez des attributs à des éléments HTML.. Nous avons également vu comment tirer parti des nouveaux outils d’inspecteur de navigateur pour examiner les données relatives aux composants et aux accessoires.. Dans la partie 3, nous ajouterons un état à notre application pour nous aider à gérer nos données plus efficacement..React.createElement () Cette méthode crée un élément HTML (un Header.js et ouvrir App.js.App.js:importer l'en-tête de './Header';
.js extension de fichier comme cela est supposé. Aussi, parce que le importer l'en-tête de './components/Header'; de l'Intérieur App.js, vous aurez une erreur de compilation.
render () return ( )
render () return (
La classe App étend le composant render () return (
Découvrez votre film Mojo!
App.js et l'ajouter à Header.js.Découvrez votre film Mojo!
App.js la Header.js il n'y a qu'un seul appel à React.createElement (). Que se passe-t-il?App.js Nous utilisons JSX pour écrire une syntaxe de type HTML afin de définir la sortie de nos composants. Comparez cela avec notre définition de composant pour Header.js.React.createElement ('div', null, 'Bonjour, c'est un composant de React!');React.createElement () appel avec l'équivalent JSX nous avons copié de App.js. Votre Header.js Le fichier devrait maintenant ressembler à ceci:importer Réagir, Composant de 'réagir'; class En-tête étend Component render () return (
Découvrez votre film Mojo!
nom du cours plutôt que classe indiquer où nous voulons déclarer une classe CSS? C’est parce que tout le JSX est compilé en JavaScript pur, et classe est un mot réservé en ES6 JavaScript.App.css et éditer le .En-tête d'application Classe CSS à être:.App-header background-color: steelblue; hauteur: 70px; rembourrage: 20px; Couleur blanche;
Accessoires de composants
identifiant, classe, style et ainsi de suite qui nous permettent d'attribuer des valeurs uniques à ce particulier App.js, mettre à jour le texte soutenir.this.props.text
texte appui dans App.js.
texte support à l'intérieur Header.js en utilisant:this.props.text
this.props.text serait sorti, ce qui n'est pas ce que nous voulons.ce le mot clé fait référence à la Entête classe de composant, et les accessoires est un objet qui contient toutes les valeurs transmises de les accessoires l'objet ne contient qu'une entrée, mais vous pouvez en ajouter autant que vous le souhaitez en pratique.en-tête est une variable:Inspection des composants de la réaction
Conclusion
