1
00:00:02,260 --> 00:00:08,440
Maintenant, dans ce cours de recyclage, Module Yeater n'écrira pas une application de réaction complexe car ce n'est tout simplement

2
00:00:08,440 --> 00:00:10,120
pas l'idée de ce module.

3
00:00:10,630 --> 00:00:17,260
Nous écrirons une application réaliste dans le module principal plus tard ce cours après ce module ici où nous travaillerons sur

4
00:00:17,260 --> 00:00:18,730
le projet de cours.

5
00:00:18,880 --> 00:00:20,890
C'est juste un rappel ici.

6
00:00:21,070 --> 00:00:25,840
Et je me concentre sur les éléments de réaction principaux, Stael, et non sur la création d'une application étonnante.

7
00:00:26,530 --> 00:00:31,870
REACT est donc une question de composants et, par conséquent, nous divisons généralement notre application en composants.

8
00:00:32,080 --> 00:00:34,300
Maintenant, commençons sans le diviser, cependant.

9
00:00:34,390 --> 00:00:41,320
Et au lieu de produire H one tech ici, une application, j'utiliserai un div, disons dans ce div.

10
00:00:41,710 --> 00:00:43,840
Ajoutons plus de code h html.

11
00:00:44,050 --> 00:00:50,420
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.

12
00:00:50,500 --> 00:00:50,700
Droite.

13
00:00:50,980 --> 00:00:52,120
Mais c'est J est X.

14
00:00:53,020 --> 00:01:00,830
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

15
00:01:00,830 --> 00:01:02,950
liste de nos objectifs de cours.

16
00:01:03,180 --> 00:01:04,150
Et c'est un objectif.

17
00:01:04,180 --> 00:01:04,840
Pourrait être.

18
00:01:05,260 --> 00:01:09,460
Papa, nous voulons terminer le cours.

19
00:01:10,350 --> 00:01:13,560
Que nous voulons tout savoir sur le cours.

20
00:01:17,240 --> 00:01:21,230
Sujet principal et que nous voulons, disons, aider.

21
00:01:22,920 --> 00:01:25,950
Nos étudiants dans le cours, CU et.

22
00:01:28,030 --> 00:01:31,890
Une section, et ça pourrait être de l'or.

23
00:01:32,260 --> 00:01:34,060
Maintenant, une application très banale.

24
00:01:34,240 --> 00:01:39,850
Maintenant, je n'ai pas de style spectaculaire spécial ici, c'est pourquoi nous enregistrons cela et nous le retirons.

25
00:01:39,880 --> 00:01:47,050
Mais maintenant, j'ajouterai du style et pour cela j'ajouterai une application, le fichier de Sears ici et j'importerai Deadfall dans

26
00:01:47,110 --> 00:01:48,370
le fichier JavaScript.

27
00:01:48,400 --> 00:01:53,710
Bien sûr, cela n'est pas possible à Manille, en JavaScript, mais à cause de cela sous l'outillage de

28
00:01:53,710 --> 00:01:56,860
capot, que Nien analyse nos fichiers puis transforme le code.

29
00:01:57,310 --> 00:02:02,740
C'est possible et cela est simplement transformé pour injecter ce code CSX dans le H.

30
00:02:02,740 --> 00:02:03,790
Fichier Timal également.

31
00:02:04,660 --> 00:02:07,580
Maintenant, ici, je vais donner un C en classe.

32
00:02:07,600 --> 00:02:09,370
Et il y a une chose spéciale.

33
00:02:10,080 --> 00:02:16,500
L'attribut class comme celui-ci n'existe pas et J est X parce que class est un mot-clé en JavaScript.

34
00:02:16,840 --> 00:02:18,160
C'est donc le nom de la classe.

35
00:02:18,190 --> 00:02:21,870
Et voici comment ajouter des classes siestas aux éléments et J est X.

36
00:02:22,240 --> 00:02:28,400
Tout cela, bien sûr, est une sorte de preuve ou vous rappelle que ce n'est pas H Tim.

37
00:02:28,660 --> 00:02:29,320
Mais H Tim.

38
00:02:29,320 --> 00:02:37,630
La syntaxe de recherche hibou est nommée comme liste d'objectifs de classe ici et maintenant ici, nous le pouvons.

39
00:02:39,040 --> 00:02:46,300
Définit ici certains styles pour le Gollust, et je vais simplement définir la liste de style sur non ici, supprimer une marge

40
00:02:46,300 --> 00:02:52,660
ou lui donner une marge de deux ram en haut et en bas et un rembourrage de zéro.

41
00:02:53,350 --> 00:03:00,040
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

42
00:03:00,460 --> 00:03:03,020
à droite, puis simplement une bordure d'un pixel solide.

43
00:03:03,040 --> 00:03:07,460
Et puis cette couleur grisâtre ici et un rembourrage d'un bélier.

44
00:03:07,550 --> 00:03:12,460
C'est un style très, très simple parce que je ne veux pas passer beaucoup de temps à écrire ici

45
00:03:12,520 --> 00:03:13,150
comme styles.

46
00:03:13,930 --> 00:03:15,820
Maintenant, peut-être un ajustement.

47
00:03:16,420 --> 00:03:19,810
Donnons en fait à la liste une marge de deux rubans dans toutes les directions.

48
00:03:20,230 --> 00:03:24,310
Nous avons maintenant cette liste de nos objectifs pour ajuster les objectifs du cours ici en haut.

49
00:03:24,640 --> 00:03:25,990
Je vais aussi.

50
00:03:27,750 --> 00:03:30,420
Donnez à cette d'Hiv un nom de classe, bien sûr, des crânes.

51
00:03:31,460 --> 00:03:33,050
Et puis en D. C. comme fichier américain.

52
00:03:34,390 --> 00:03:41,410
Peut-être tout en haut, nous pouvons bloquer les objectifs du cours et leur d. h à marquer pour être aligné au centre.

53
00:03:41,620 --> 00:03:42,220
Juste comme ça.

54
00:03:43,060 --> 00:03:45,160
Encore une fois, des objectifs très énormes.

55
00:03:45,190 --> 00:03:47,470
Mais c'est OK pour le discours ici.

56
00:03:47,650 --> 00:03:49,270
Nous nous entraînons juste à réagir.

57
00:03:49,780 --> 00:03:51,070
Nous avons donc ces objectifs de cours ici.

58
00:03:51,430 --> 00:03:51,880
Impressionnant.

59
00:03:52,450 --> 00:03:54,860
Ceci, bien sûr, est un balisage très simple.

60
00:03:55,450 --> 00:04:00,940
Maintenant, ce que vous faites souvent, réagissez en divisant cela en plusieurs composants, par

61
00:04:00,940 --> 00:04:07,570
exemple, vous externalisez cette liste en un composant séparé pour garder chaque composant relativement propre et

62
00:04:07,570 --> 00:04:09,640
concentré sur une tâche.

63
00:04:10,180 --> 00:04:14,560
Pour cela, nous pouvons ajouter un dossier sup de composants ici dans le dossier source.

64
00:04:15,400 --> 00:04:20,650
Et là, je vais ajouter une liste de buts J. S. Fichier.

65
00:04:20,830 --> 00:04:22,960
Cela contiendra mon composant de liste d'objectifs.

66
00:04:23,620 --> 00:04:27,880
Maintenant, pour créer un tel nouveau composant, nous devons d'abord importer, réagir de réagir.

67
00:04:27,940 --> 00:04:30,450
Sinon, nous ne pouvons pas utiliser ce J comme X Syntex.

68
00:04:31,000 --> 00:04:32,290
Et puis j'ai mentionné la mort.

69
00:04:32,290 --> 00:04:33,760
Un composant est une fonction.

70
00:04:33,880 --> 00:04:37,660
Et en passant, vous pouvez également créer avec le mot-clé de fonction ou.

71
00:04:38,710 --> 00:04:42,280
Avec une expression de fonction ou.

72
00:04:43,490 --> 00:04:47,480
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

73
00:04:47,480 --> 00:04:48,680
ce n'est pas un must.

74
00:04:49,430 --> 00:04:52,430
Et puis ici j'exporte ma liste d'objectifs comme ça.

75
00:04:52,790 --> 00:04:54,860
Et maintenant ici, je reviens.

76
00:04:55,920 --> 00:05:01,530
Cette liste non ordonnée, sel, coupez-la ici et ensuite ajoutée, voici une valeur de retour et si une

77
00:05:01,530 --> 00:05:07,500
réforme à cela, vous voyez automatiquement ces parenthèses sont ajoutées autour de lui afin que cela puisse être bien formaté

78
00:05:07,680 --> 00:05:08,910
sur plusieurs lignes.

79
00:05:08,940 --> 00:05:10,890
Sinon, ce ne serait pas du JavaScript valide.

80
00:05:11,280 --> 00:05:13,350
Il en est de même des parenthèses.

81
00:05:13,350 --> 00:05:16,920
C'est parce qu'alors JavaScript sait que ce bloc appartient ensemble.

82
00:05:17,730 --> 00:05:20,170
Alors maintenant, nous avons la liste des objectifs ici et une application.

83
00:05:20,430 --> 00:05:24,630
Oui, nous pouvons maintenant importer notre composant de liste d'objectifs.

84
00:05:24,930 --> 00:05:26,520
Vous pouvez le nommer ici comme vous le souhaitez.

85
00:05:26,790 --> 00:05:29,990
Ne doit pas nécessairement être le même nom que celui sous lequel vous l'exportez ici.

86
00:05:30,450 --> 00:05:36,720
La seule chose importante est qu'il doit commencer par un caractère majuscule ici dans Abcess et une importation à partir du dossier des

87
00:05:36,720 --> 00:05:39,510
composants et ils proviennent de la liste des objectifs.

88
00:05:39,780 --> 00:05:43,430
Et comme je l'ai mentionné plus tôt, vous pouvez omettre D. extension de fichier ici.

89
00:05:43,620 --> 00:05:44,460
Ce n'est pas obligatoire.

90
00:05:45,210 --> 00:05:52,710
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

91
00:05:52,710 --> 00:05:53,040
dire.

92
00:05:53,310 --> 00:05:58,890
Mais comme nous n'avons aucun contenu entre les balises d'ouverture et de fermeture, nous pouvons et nous devons écrire ici une balise à

93
00:05:58,890 --> 00:05:59,460
fermeture automatique.

94
00:05:59,760 --> 00:06:00,960
Cela ne serait pas autorisé.

95
00:06:01,050 --> 00:06:03,280
Il faut toujours fermer les taxes et le jazz x.

96
00:06:03,990 --> 00:06:06,240
Ce serait donc maintenant mon composant de liste d'objectifs.

97
00:06:06,630 --> 00:06:10,230
Et donc, si nous sécurisons, nous voyons la même sortie qu'auparavant.

98
00:06:10,980 --> 00:06:17,520
Nous obtenons également le même style car les styles ici sont toujours appliqués globalement, même si vous les importez dans un

99
00:06:17,520 --> 00:06:19,140
fichier de composant spécifique.

100
00:06:19,590 --> 00:06:26,250
Et pourtant, c'est une bonne pratique de configurer les styles dans le fichier CSX à côté du composant auquel ils appartiennent.

101
00:06:26,520 --> 00:06:28,610
Par conséquent, je vais ajouter une liste d'objectifs C en tant que fichier s.

102
00:06:29,040 --> 00:06:33,210
Ajoutez ma liste d'objectifs Stollsteimer et importez cette liste d'objectifs.

103
00:06:33,300 --> 00:06:36,450
CSX tombe dans le fichier JavaScript de la liste d'objectifs.

104
00:06:36,720 --> 00:06:41,580
Ce n'est pas indispensable, mais cela permet de trouver facilement les styles qui appartiennent à ce composant.

105
00:06:41,880 --> 00:06:47,160
Gardez à l'esprit que les styles ne sont pas automatiquement étendus à un composant, bien que les règles

106
00:06:47,220 --> 00:06:52,860
normales soient appliquées car tout ce C est le suivant, peu importe où vous les importez, est appliqué globalement à

107
00:06:52,890 --> 00:06:54,120
votre page entière.

108
00:06:54,960 --> 00:06:57,540
Avec cela, cependant, nous revenons au même résultat qu'auparavant.

109
00:06:58,020 --> 00:06:59,220
Alors pourquoi avons-nous fait ça?

110
00:06:59,290 --> 00:07:02,280
Et pourquoi divisons-nous cela si nous avons le même résultat qu'auparavant?