1
00:00:02,270 --> 00:00:03,610
Pour produire nos propres objectifs.

2
00:00:03,680 --> 00:00:08,060
Je vais ajouter un nouveau composant dans le dossier des composants et le garder gérable.

3
00:00:08,150 --> 00:00:11,060
Je vais en fait créer un nouveau sous-dossier pour chaque composant.

4
00:00:11,420 --> 00:00:17,240
Ce n'est pas un must, mais j'aime personnellement le faire parce que je peux rapidement trouver tous mes composants.

5
00:00:17,630 --> 00:00:20,820
Bien sûr, vous devez maintenant ajuster votre importation ici en abcès.

6
00:00:21,110 --> 00:00:23,780
Mon idée l'a fait automatiquement au cas où cela ne se produirait pas.

7
00:00:23,990 --> 00:00:28,090
Assurez-vous d'ajuster l'importation de votre liste d'objectifs pour refléter cela dans U.

8
00:00:28,190 --> 00:00:28,580
Dossier.

9
00:00:28,940 --> 00:00:29,360
J'ai ajouté.

10
00:00:30,100 --> 00:00:35,720
Et puis il ajoutera un nouveau composant objectif ici dans le dossier des composants ainsi que là-dedans.

11
00:00:35,780 --> 00:00:38,990
Ajoutez un nouveau fichier jazz d'objectif et un nouvel objectif.

12
00:00:39,260 --> 00:00:40,310
Voyez-nous comme l'automne.

13
00:00:40,430 --> 00:00:45,830
Si vous souhaitez appliquer un style maintenant dans un nouveau fichier jazz d'or, nous devons tout d'abord importer réagir

14
00:00:45,830 --> 00:00:46,580
de réagir.

15
00:00:46,700 --> 00:00:47,870
Vous devez toujours le faire.

16
00:00:47,960 --> 00:00:54,770
Sinon, vous ne pouvez pas utiliser J comme X dans ce fichier car gardez à l'esprit que J comme exis est traduit pour réagir à la création de

17
00:00:54,800 --> 00:00:55,280
l'élément.

18
00:00:56,060 --> 00:00:59,810
Et puis ici, j'ai mon nouveau composant objectif ici.

19
00:01:00,110 --> 00:01:02,730
Nous pourrions accepter Propp spot tant que nous n'en avons pas besoin.

20
00:01:02,750 --> 00:01:03,620
Nous n'avons pas à le faire.

21
00:01:04,310 --> 00:01:06,650
Et puis j'exporte un nouvel objectif.

22
00:01:07,920 --> 00:01:13,580
Maintenant, dans Abcess, je veux rendre un nouvel objectif, nous allons donc importer du nouvel or.

23
00:01:13,920 --> 00:01:18,390
Encore une fois, le nom vous appartient, mais il doit commencer par un caractère de départ majuscule.

24
00:01:19,070 --> 00:01:20,670
Et j'importe cela à partir des composants.

25
00:01:20,820 --> 00:01:21,450
Nouveau but.

26
00:01:21,600 --> 00:01:22,200
Nouveau but.

27
00:01:23,110 --> 00:01:27,640
Et puis ici, nous pouvons rendre comme ci-dessus notre liste d'objectifs, disons comme ça.

28
00:01:28,390 --> 00:01:34,930
Non, cela ne fonctionnerait pas car le nouvel objectif n'est pas encore un composant React valide car c'est une fonction en ce moment, mais ce

29
00:01:34,930 --> 00:01:39,940
n'est pas une fonction qui fonctionne comme un composant React car il ne fait pas une chose cruciale.

30
00:01:40,510 --> 00:01:41,920
Il ne revient pas à son X.

31
00:01:42,130 --> 00:01:42,930
Revenons donc.

32
00:01:42,940 --> 00:01:48,580
Je suis J is X ici et là pour garder les choses simples, le tout sur un forum.

33
00:01:49,180 --> 00:01:51,640
Et dans ce forum, je vais ajouter un champ de saisie.

34
00:01:53,550 --> 00:01:57,220
Tapez l'élément à fermeture automatique de texte dans HGL standard.

35
00:01:57,260 --> 00:01:59,820
Cela ne doit pas être à fermeture automatique dans J is X.

36
00:01:59,850 --> 00:02:01,920
Il doit être à fermeture automatique.

37
00:02:02,670 --> 00:02:05,340
Et puis un bouton qui est de type soumettre.

38
00:02:06,350 --> 00:02:12,590
Là où je dis à Gohl, un formulaire très simple, et si nous le sécurisons maintenant, vous devriez le voir ici.

39
00:02:13,130 --> 00:02:19,700
Ajoutons maintenant un peu de style pour rendre ce look un peu plus joli pour papa et une classe pour former un nouvel or

40
00:02:19,700 --> 00:02:20,060
tiret.

41
00:02:20,750 --> 00:02:26,780
Et je vais importer le nouvel or voir en tant que fichier dans le nouveau fichier JavaScript or.

42
00:02:27,470 --> 00:02:32,270
Et puis ici sur la nouvelle classe d'or, qui est ajoutée sur le formulaire tout à.

43
00:02:33,860 --> 00:02:38,420
Une marge de deux REM dans toutes les directions et ligne de texte.

44
00:02:43,600 --> 00:02:44,950
Pour que cela semble un peu plus agréable.

45
00:02:46,620 --> 00:02:48,550
Et maintenant, nous pourrions également styliser l'entrée du bouton.

46
00:02:48,580 --> 00:02:50,110
Mais je ne veux pas y consacrer trop de temps.

47
00:02:50,200 --> 00:02:52,540
Nous allons donc laisser les choses telles quelles, en ce moment.

48
00:02:52,540 --> 00:02:57,160
Au fait, lorsque vous cliquez sur le bouton, cette page se rechargera car en ce moment, la fonctionnalité de

49
00:02:57,160 --> 00:02:58,600
navigateur par défaut se déclenchera.

50
00:02:58,810 --> 00:03:03,460
C'est-à-dire que lorsqu'un clic sur un bouton off est cliqué dans un forum, une demande est envoyée au serveur qui

51
00:03:03,490 --> 00:03:04,720
est servi sur cette page.

52
00:03:04,890 --> 00:03:09,940
Mais ce n'est pas le comportement que nous voulons ici, car ici, je ne veux pas envoyer de demande à

53
00:03:09,940 --> 00:03:12,850
un serveur parce que nous ne faisons rien du côté serveur.

54
00:03:13,240 --> 00:03:18,520
Au lieu de cela, je veux gérer ce clic avec JavaScript et c'est la première chose que je ferai ici.

55
00:03:18,550 --> 00:03:22,360
Voyons comment nous pouvons gérer les événements, car jusqu'à présent nous ne l'avons pas fait.

56
00:03:23,290 --> 00:03:27,730
Je veux gérer l'événement de soumission de ce forum ici et réagir rend cela simple.

57
00:03:28,150 --> 00:03:34,300
Nous pouvons ajouter des écouteurs d'événements à n'importe quel élément, non seulement au forum, mais à n'importe quel élément en ajoutant

58
00:03:34,630 --> 00:03:35,590
des minuscules sur.

59
00:03:35,770 --> 00:03:36,880
Et puis le nom de l'événement.

60
00:03:37,030 --> 00:03:39,520
Non, tous les événements ne sont pas pris en charge sur chaque élément.

61
00:03:39,730 --> 00:03:42,820
Mais ici, vous avez le HD par défaut, tous les éléments disponibles.

62
00:03:43,000 --> 00:03:48,400
Ainsi, par exemple, dans un élément de forum, vous devez soumettre l'événement, soumettre sur un bouton.

63
00:03:48,400 --> 00:03:49,840
Vous avez également sur clic.

64
00:03:50,080 --> 00:03:54,190
Mais comme il s'agit d'un bouton dans un forum, il vaut mieux le manipuler sur le forum lui-même.

65
00:03:55,240 --> 00:04:00,160
Maintenant, que passez-vous comme valeur à Enns up Mido comme valeur?

66
00:04:00,190 --> 00:04:06,010
Vous devez passer une fonction qui doit être déclenchée lorsque cet événement se produit.

67
00:04:06,100 --> 00:04:08,020
Donc, un pointeur sur une fonction.

68
00:04:08,740 --> 00:04:12,940
Vous pourriez faire cette année avec des accolades et une fonction en ligne anonyme.

69
00:04:13,510 --> 00:04:14,920
Mais je n'aime pas trop ça.

70
00:04:14,940 --> 00:04:16,870
Au lieu de cela, je vais créer une nouvelle fonction ici.

71
00:04:17,170 --> 00:04:20,470
Et en JavaScript, vous pouvez créer des fonctions et des fonctions.

72
00:04:20,770 --> 00:04:25,780
Donc, au lieu de la nouvelle fonction objectif, ce qu'elle est toujours, je peux finalement créer une nouvelle fonction.

73
00:04:26,380 --> 00:04:27,670
Je vais créer mon.

74
00:04:28,680 --> 00:04:32,040
Au nom du gardien de but, la nomination vous appartient.

75
00:04:32,070 --> 00:04:38,130
Mais j'ai aimé son nom d'avoir Handler à la fin de mon nom de funks.

76
00:04:38,400 --> 00:04:41,640
S'il s'agit d'une fonction qui est déclenchée lors d'un événement.

77
00:04:43,270 --> 00:04:48,160
C'est donc une fonction dans ce cas, je vais à nouveau utiliser une fonction de flèche, ce

78
00:04:48,160 --> 00:04:54,430
qui n'est pas indispensable, mais j'utiliserai uniquement les fonctions de flèche ici et Enns up Mitt peut maintenant pointer vers AD Gohl Handler.

79
00:04:54,940 --> 00:04:57,550
Ne l'exécutez pas ici, alors n'ajoutez pas de parenthèses.

80
00:04:57,790 --> 00:05:04,330
Au lieu de cela, vous souhaitez simplement pointer la fonction afin que le navigateur et réagir dans un effort commun puissent

81
00:05:04,330 --> 00:05:06,010
exécuter un dysfonctionnement pour vous.

82
00:05:06,220 --> 00:05:07,810
Quand l'événement de soumission se produit-il?

83
00:05:08,950 --> 00:05:16,390
Maintenant, cette fonction obtiendra un objet d'événement, un paramètre d'événement transmis automatiquement par react et ensuite, par exemple, nous pouvons appeler prevent

84
00:05:16,390 --> 00:05:23,410
default, ce qui empêche le navigateur par défaut d'envoyer une demande à un serveur principal, ce qu'il ne devrait pas

85
00:05:23,440 --> 00:05:28,060
faire ici parce que nous 'ne gère pas cela du côté serveur ici.

86
00:05:28,930 --> 00:05:31,990
Notre serveur ne sert que ce fichier HMO d'index unique.

87
00:05:31,990 --> 00:05:35,140
Il n'a aucune logique pour gérer les soumissions.

88
00:05:35,740 --> 00:05:39,650
Au lieu de cela, je veux le gérer ici en JavaScript sur le front-end.

89
00:05:39,910 --> 00:05:46,780
Dans mon application REACT et pour l'instant je vais ignorer ce que l'utilisateur a entré ici et je

90
00:05:46,900 --> 00:05:49,210
vais simplement créer un objectif factice.

91
00:05:49,560 --> 00:05:57,010
Et je veux passer cet objectif factice à l'appli G. S. et l'ajouter à mon noyau Scholes ici pour qu'il soit ensuite

92
00:05:57,010 --> 00:05:57,670
rendu ici.

93
00:05:58,270 --> 00:05:59,510
Maintenant, étape par étape.

94
00:06:00,410 --> 00:06:02,690
Nous pouvons bien sûr créer un nouvel objectif Dharmic.

95
00:06:03,780 --> 00:06:05,130
Dans cet article, Hanovre.

96
00:06:06,780 --> 00:06:13,620
En ajoutant ici une nouvelle constante d'objectif, qui est un objet JavaScript, l'idée ici pourrait être un nombre

97
00:06:13,620 --> 00:06:14,020
aléatoire.

98
00:06:14,060 --> 00:06:15,270
Avec mothe aléatoire.

99
00:06:15,600 --> 00:06:20,430
Bien sûr, ce n'est pas vraiment un moi unique. RÉ. , mais c'est assez bon et je vais le convertir en chaîne.

100
00:06:21,360 --> 00:06:23,370
C'est assez bon pour notre application de démonstration ici.

101
00:06:23,370 --> 00:06:23,730
Je veux dire.

102
00:06:24,180 --> 00:06:27,800
Et puis le texte ici plus tard sera le texte saisi par l'utilisateur ici.

103
00:06:28,110 --> 00:06:30,090
Pour l'instant, juste un texte factice.

104
00:06:30,300 --> 00:06:31,290
Mon nouvel objectif.

105
00:06:32,540 --> 00:06:34,040
Alors maintenant, nous avons le nouvel objectif ici.

106
00:06:34,400 --> 00:06:39,980
Et, bien sûr, nous pouvons verrouiller la console pour voir que tout fonctionne jusqu'à ce point.

107
00:06:40,430 --> 00:06:41,480
Donc, si nous enregistrons cela.

108
00:06:42,470 --> 00:06:43,610
Nous voyons notre formulaire ici.

109
00:06:44,030 --> 00:06:46,610
Et si vous cliquez sur ajouter un objectif, la page ne se rechargera pas.

110
00:06:46,940 --> 00:06:48,770
Mais au lieu de cela, nous voyons l'objectif du timbre ici.

111
00:06:49,120 --> 00:06:50,840
Pourrait bien sûr créer plusieurs objectifs.

112
00:06:51,080 --> 00:06:53,660
Mais pour le moment, ils ne sont pas ajoutés à cette liste.

113
00:06:54,560 --> 00:07:01,100
Pour ajouter à la liste, nous devons maintenant extraire cet objectif du nouveau composant d'objectif vers le composant d'application.

114
00:07:01,550 --> 00:07:05,120
Maintenant, avant d'apprendre, nous pouvons passer l'état de notre série d'accessoires.

115
00:07:05,270 --> 00:07:08,180
Mais c'était de l'application à la liste des objectifs.

116
00:07:08,510 --> 00:07:12,530
Donc, pour un composant de niveau inférieur, un composant qui est inclus une application.

117
00:07:13,010 --> 00:07:14,510
Maintenant, c'est l'autre sens.

118
00:07:14,810 --> 00:07:18,500
Nous voulons transmettre les données du nouvel objectif au composant parent.

119
00:07:18,590 --> 00:07:21,110
Donc, le composant qui inclut le nouveau composant objectif.

120
00:07:21,560 --> 00:07:22,400
Comment cela marche-t-il?