Maintenant, dans ce cours de recyclage, Module Yeater n'écrira pas une application de réaction complexe car ce n'est tout simplement
pas l'idée de ce module.
Nous écrirons une application réaliste dans le module principal plus tard ce cours après ce module ici où nous travaillerons sur
le projet de cours.
C'est juste un rappel ici.
Et je me concentre sur les éléments de réaction principaux, Stael, et non sur la création d'une application étonnante.
REACT est donc une question de composants et, par conséquent, nous divisons généralement notre application en composants.
Maintenant, commençons sans le diviser, cependant.
Et au lieu de produire H one tech ici, une application, j'utiliserai un div, disons dans ce div.
Ajoutons plus de code h html.
Je dis h html ici bien sûr, c'est J est X mais il est traduit en deux notes HCM Altidore pour le moment.
Droite.
Mais c'est J est X.
Donc, ici, nous pourrions avoir H pour marquer où nous disons les objectifs de cause et ci-dessous que nous voulons avoir une liste ou ajouter une
liste de nos objectifs de cours.
Et c'est un objectif.
Pourrait être.
Papa, nous voulons terminer le cours.
Que nous voulons tout savoir sur le cours.
Sujet principal et que nous voulons, disons, aider.
Nos étudiants dans le cours, CU et.
Une section, et ça pourrait être de l'or.
Maintenant, une application très banale.
Maintenant, je n'ai pas de style spectaculaire spécial ici, c'est pourquoi nous enregistrons cela et nous le retirons.
Mais maintenant, j'ajouterai du style et pour cela j'ajouterai une application, le fichier de Sears ici et j'importerai Deadfall dans
le fichier JavaScript.
Bien sûr, cela n'est pas possible à Manille, en JavaScript, mais à cause de cela sous l'outillage de
capot, que Nien analyse nos fichiers puis transforme le code.
C'est possible et cela est simplement transformé pour injecter ce code CSX dans le H.
Fichier Timal également.
Maintenant, ici, je vais donner un C en classe.
Et il y a une chose spéciale.
L'attribut class comme celui-ci n'existe pas et J est X parce que class est un mot-clé en JavaScript.
C'est donc le nom de la classe.
Et voici comment ajouter des classes siestas aux éléments et J est X.
Tout cela, bien sûr, est une sorte de preuve ou vous rappelle que ce n'est pas H Tim.
Mais H Tim.
La syntaxe de recherche hibou est nommée comme liste d'objectifs de classe ici et maintenant ici, nous le pouvons.
Définit ici certains styles pour le Gollust, et je vais simplement définir la liste de style sur non ici, supprimer une marge
ou lui donner une marge de deux ram en haut et en bas et un rembourrage de zéro.
Et sur chaque élément de la liste des objectifs, j'ajouterai une marge d'une pièce en haut et en bas de zéro deux à gauche et
à droite, puis simplement une bordure d'un pixel solide.
Et puis cette couleur grisâtre ici et un rembourrage d'un bélier.
C'est un style très, très simple parce que je ne veux pas passer beaucoup de temps à écrire ici
comme styles.
Maintenant, peut-être un ajustement.
Donnons en fait à la liste une marge de deux rubans dans toutes les directions.
Nous avons maintenant cette liste de nos objectifs pour ajuster les objectifs du cours ici en haut.
Je vais aussi.
Donnez à cette d'Hiv un nom de classe, bien sûr, des crânes.
Et puis en D. C. comme fichier américain.
Peut-être tout en haut, nous pouvons bloquer les objectifs du cours et leur d. h à marquer pour être aligné au centre.
Juste comme ça.
Encore une fois, des objectifs très énormes.
Mais c'est OK pour le discours ici.
Nous nous entraînons juste à réagir.
Nous avons donc ces objectifs de cours ici.
Impressionnant.
Ceci, bien sûr, est un balisage très simple.
Maintenant, ce que vous faites souvent, réagissez en divisant cela en plusieurs composants, par
exemple, vous externalisez cette liste en un composant séparé pour garder chaque composant relativement propre et
concentré sur une tâche.
Pour cela, nous pouvons ajouter un dossier sup de composants ici dans le dossier source.
Et là, je vais ajouter une liste de buts J. S. Fichier.
Cela contiendra mon composant de liste d'objectifs.
Maintenant, pour créer un tel nouveau composant, nous devons d'abord importer, réagir de réagir.
Sinon, nous ne pouvons pas utiliser ce J comme X Syntex.
Et puis j'ai mentionné la mort.
Un composant est une fonction.
Et en passant, vous pouvez également créer avec le mot-clé de fonction ou.
Avec une expression de fonction ou.
Avec la fonction Flèche bientôt le texte que j'ai utilisé auparavant, ce n'était qu'une somatique que j'utiliserai ici, mais
ce n'est pas un must.
Et puis ici j'exporte ma liste d'objectifs comme ça.
Et maintenant ici, je reviens.
Cette liste non ordonnée, sel, coupez-la ici et ensuite ajoutée, voici une valeur de retour et si une
réforme à cela, vous voyez automatiquement ces parenthèses sont ajoutées autour de lui afin que cela puisse être bien formaté
sur plusieurs lignes.
Sinon, ce ne serait pas du JavaScript valide.
Il en est de même des parenthèses.
C'est parce qu'alors JavaScript sait que ce bloc appartient ensemble.
Alors maintenant, nous avons la liste des objectifs ici et une application.
Oui, nous pouvons maintenant importer notre composant de liste d'objectifs.
Vous pouvez le nommer ici comme vous le souhaitez.
Ne doit pas nécessairement être le même nom que celui sous lequel vous l'exportez ici.
La seule chose importante est qu'il doit commencer par un caractère majuscule ici dans Abcess et une importation à partir du dossier des
composants et ils proviennent de la liste des objectifs.
Et comme je l'ai mentionné plus tôt, vous pouvez omettre D. extension de fichier ici.
Ce n'est pas obligatoire.
Et puis ici, vous utilisez go list comme un J. ordinaire S. L'élément X, comme un élément H tim L régulier, pourrait-on
dire.
Mais comme nous n'avons aucun contenu entre les balises d'ouverture et de fermeture, nous pouvons et nous devons écrire ici une balise à
fermeture automatique.
Cela ne serait pas autorisé.
Il faut toujours fermer les taxes et le jazz x.
Ce serait donc maintenant mon composant de liste d'objectifs.
Et donc, si nous sécurisons, nous voyons la même sortie qu'auparavant.
Nous obtenons également le même style car les styles ici sont toujours appliqués globalement, même si vous les importez dans un
fichier de composant spécifique.
Et pourtant, c'est une bonne pratique de configurer les styles dans le fichier CSX à côté du composant auquel ils appartiennent.
Par conséquent, je vais ajouter une liste d'objectifs C en tant que fichier s.
Ajoutez ma liste d'objectifs Stollsteimer et importez cette liste d'objectifs.
CSX tombe dans le fichier JavaScript de la liste d'objectifs.
Ce n'est pas indispensable, mais cela permet de trouver facilement les styles qui appartiennent à ce composant.
Gardez à l'esprit que les styles ne sont pas automatiquement étendus à un composant, bien que les règles
normales soient appliquées car tout ce C est le suivant, peu importe où vous les importez, est appliqué globalement à
votre page entière.
Avec cela, cependant, nous revenons au même résultat qu'auparavant.
Alors pourquoi avons-nous fait ça?
Et pourquoi divisons-nous cela si nous avons le même résultat qu'auparavant?