1
00:00:02,190 --> 00:00:08,190
J'ai créé le composant séparé, A, bien sûr, pour vous entraîner à créer vos propres composants, mais B, également

2
00:00:08,220 --> 00:00:14,160
parce que c'est vraiment la philosophie de base de réagir pour diviser votre application en plus petits morceaux.

3
00:00:14,310 --> 00:00:17,120
Bien sûr, c'est à vous de décider à quel point vous voulez le diviser.

4
00:00:17,670 --> 00:00:22,140
Chaque élément de liste, par exemple, pourrait également être son ancien composant, et il n'y aurait rien de mal à

5
00:00:22,140 --> 00:00:22,380
cela.

6
00:00:23,040 --> 00:00:26,520
L'idée est simplement d'avoir de petits fichiers de code gérables.

7
00:00:26,910 --> 00:00:31,140
Et plus tard, une fois que nous ajoutons plus de logique à l'application afin que nous puissions également interagir avec elle.

8
00:00:31,170 --> 00:00:35,730
Et nous avons changé un certain nombre d'objectifs, par exemple, en cliquant sur un bouton, etc.

9
00:00:36,390 --> 00:00:41,370
Bien sûr, nous voulons être en mesure de gérer une grande partie de la logique dans le composant de la liste d'objectifs et non

10
00:00:41,370 --> 00:00:42,150
des composants évidents.

11
00:00:42,390 --> 00:00:49,470
Donc, vraiment le diviser en composants a l'idée de séparer les préoccupations de garder vos fichiers petits, concentrés et gérables, ce qui,

12
00:00:49,500 --> 00:00:55,830
si vous travaillez dans des projets plus importants, est une énorme victoire car il facilite beaucoup la gestion et

13
00:00:55,830 --> 00:00:58,930
le travail dans un tel plus grand projet.

14
00:01:00,000 --> 00:01:03,420
Maintenant, jusqu'à présent, tout dans notre application est codé en dur, cependant.

15
00:01:04,290 --> 00:01:10,880
Maintenant, plus réaliste serait que disons que notre liste d'objectifs est gérée ici dans l'application.

16
00:01:10,970 --> 00:01:12,660
Oui, comme données.

17
00:01:13,170 --> 00:01:20,160
Et nous voulons rendre la liste Digo H des éléments Timal ou J en tant qu'éléments X en fonction de ces données.

18
00:01:20,640 --> 00:01:27,120
Maintenant, je vais le gérer ici dans Abcess simplement parce que plus tard, je vais ajouter un autre composant ici qui nous aide à

19
00:01:27,120 --> 00:01:28,230
créer de nouveaux objectifs.

20
00:01:28,530 --> 00:01:31,590
Mais pour l'instant, ajoutons simplement une constante normale ici.

21
00:01:31,830 --> 00:01:35,760
Composant fonctionnel de Tudor car il s'agit d'une fonction JavaScript normale.

22
00:01:35,940 --> 00:01:40,140
Bien sûr, vous pouvez faire plus que simplement renvoyer le contenu X et le disque de J ici.

23
00:01:40,520 --> 00:01:43,140
Nous aurons mes objectifs de cours.

24
00:01:43,200 --> 00:01:47,010
Vous pouvez le nommer comme vous le souhaitez et ce sera un tableau et un tableau.

25
00:01:47,340 --> 00:01:52,350
Chaque objectif peut être un objet JavaScript créé ici avec la notation littérale de l'objet.

26
00:01:52,560 --> 00:01:58,500
Bien sûr, vous pouvez également créer votre propre classe ou fonction constructeur et l'instancier pour créer un

27
00:01:58,500 --> 00:01:59,220
tel objet.

28
00:02:00,030 --> 00:02:01,530
Supposons maintenant que chaque objectif ait une idée.

29
00:02:02,650 --> 00:02:06,880
C. G. un pour chorus chorus, appelez-en un, puis a du texte, disons.

30
00:02:07,210 --> 00:02:10,030
Et le texte ici est simplement le texte.

31
00:02:10,060 --> 00:02:12,880
J'ai codé en dur ici, terminer le cours.

32
00:02:12,920 --> 00:02:13,960
Je copie donc cela.

33
00:02:14,440 --> 00:02:20,560
Et à ceci ici et je vais diviser sur plusieurs lignes pour le rendre plus facile à lire parce que je n'aurai pas qu'un

34
00:02:20,560 --> 00:02:21,790
seul objectif mais gratuit.

35
00:02:22,000 --> 00:02:25,480
Les idées sont donc C. G. à NCG gratuitement, disons.

36
00:02:25,900 --> 00:02:29,560
Et maintenant, je vais juste copier tout ce texte ici.

37
00:02:31,540 --> 00:02:34,010
Dans mes objets ici à Abcess.

38
00:02:34,780 --> 00:02:36,550
Aussi, ce dernier texte.

39
00:02:37,820 --> 00:02:44,030
Comme ça, et là, je peux maintenant aussi me débarrasser de cette esperluette ici, nous n'en avons pas besoin ici.

40
00:02:44,120 --> 00:02:47,480
Nous pouvons tous mettre le texte comme ceci et réagir le rendra correctement.

41
00:02:48,410 --> 00:02:50,630
Alors maintenant, nous devons griffonner le tableau Scholes à mon idée.

42
00:02:50,660 --> 00:02:54,050
Maintenant, est-ce dans la composante de la liste des objectifs de ces objectifs?

43
00:02:54,080 --> 00:02:56,660
Ces données devraient finalement être sorties.

44
00:02:56,870 --> 00:03:02,080
Il devrait donc être sorti dynamiquement dans ce composant, dans le composant de liste d'objectifs au lieu d'être difficile.

45
00:03:02,450 --> 00:03:03,800
Nous pouvons donc supprimer ce code ici.

46
00:03:04,220 --> 00:03:06,050
Non, cela nous pose deux problèmes.

47
00:03:06,350 --> 00:03:10,810
Numéro un, comment pouvons-nous sortir une liste de données dynamiquement dans J comme X?

48
00:03:11,270 --> 00:03:13,130
Mais plus important que cela pour le moment.

49
00:03:13,400 --> 00:03:18,950
Comment pouvons-nous obtenir cette liste de données qui est définie dans le composant d'application dans le composant Gollust?

50
00:03:19,460 --> 00:03:23,300
Eh bien, concentrons-nous d'abord sur cela, car sans cela, nous ne pouvons pas nous concentrer sur l'autre problème.

51
00:03:24,170 --> 00:03:31,820
Nous pouvons transmettre des données de composant à composant avec un concept appelé props abréviation de propriétés.

52
00:03:32,450 --> 00:03:34,100
Nous pouvons définir les nôtres.

53
00:03:34,130 --> 00:03:39,800
Vous pourriez dire des attributs qui sont ces accessoires sur nos propres composants.

54
00:03:40,250 --> 00:03:46,090
Ainsi, par exemple, ici sur la liste des objectifs, vous pourriez dire que nous avons des éléments, des attributs ou des objectifs, des attributs qui

55
00:03:46,160 --> 00:03:47,120
vous appartiennent totalement.

56
00:03:47,630 --> 00:03:48,710
J'irai avec des objectifs ici.

57
00:03:49,680 --> 00:03:53,340
Et cet attribut ou accessoire en or est le terme commun.

58
00:03:53,370 --> 00:03:57,870
L'hélice de Gold transmet-elle ensuite ces données à ce composant?

59
00:03:58,380 --> 00:04:02,280
Maintenant, pour cela, je n'utilise pas de chaîne ici, que je veux transmettre, mais

60
00:04:02,280 --> 00:04:08,250
je veux plutôt transmettre ma structure de données JavaScript D tableau ici et pour papa ici, en fait, nous utilisons un nombre

61
00:04:08,250 --> 00:04:12,210
spécial Syntex et J comme X. Nous utilisons des accolades bouclées à ouverture et fermeture simples.

62
00:04:12,780 --> 00:04:15,780
On dirait que nous créons un objet jobs ici, mais ce n'est pas le cas.

63
00:04:16,080 --> 00:04:19,420
Si vous faites cela à l'intérieur de J est X, ce que je fais ici.

64
00:04:19,500 --> 00:04:29,190
C'est J is X, cela signifie que vous voulez fusionner votre code J is X avec une expression JavaScript à la fin.

65
00:04:29,460 --> 00:04:31,370
Et ici, nous pouvons souligner les compétences de base.

66
00:04:31,410 --> 00:04:32,970
Il s'agit d'une expression JavaScript valide.

67
00:04:33,060 --> 00:04:34,590
Nous pointons juste une constante.

68
00:04:34,990 --> 00:04:36,450
Et ce que Disneyland signifie est mort.

69
00:04:36,870 --> 00:04:38,640
React passera.

70
00:04:38,670 --> 00:04:39,870
Objectifs du cours ici.

71
00:04:40,170 --> 00:04:44,700
La valeur stockée dans cette constante dans ce cas, ce tableau dans cet endroit de J est X.

72
00:04:44,880 --> 00:04:47,390
Dans ce cas, dans cet accessoire, donc.

73
00:04:47,940 --> 00:04:53,140
Les objectifs seront donc un accessoire qui contient maintenant une référence à ce tableau.

74
00:04:54,120 --> 00:04:58,370
Maintenant à l'intérieur de la liste de buts, nous pouvons maintenant recevoir cet accessoire d'or.

75
00:04:58,770 --> 00:05:02,340
Allons donc à la liste des objectifs et voyons comment cela fonctionne dans la liste des objectifs.

76
00:05:02,370 --> 00:05:03,360
Nous avons une fonction, non?

77
00:05:03,600 --> 00:05:04,830
Un composant fonctionnel.

78
00:05:05,610 --> 00:05:08,670
Maintenant, cette fonction ne reçoit actuellement aucun paramètre.

79
00:05:09,090 --> 00:05:09,930
Nous pouvons changer cela.

80
00:05:10,170 --> 00:05:12,240
Nous pouvons recevoir un paramètre d'accessoires ici.

81
00:05:12,900 --> 00:05:20,820
Chaque fonction utilisée comme composant React, ce qui signifie qu'elle renvoie J is X, reçoit également des accessoires.

82
00:05:22,620 --> 00:05:28,160
Cet objet passe-t-il automatiquement à votre composant fonctionnel React en réagissant?

83
00:05:28,580 --> 00:05:34,070
Et c'est l'objet qui regroupe tous les accessoires que vous avez passés au composant.

84
00:05:34,190 --> 00:05:37,070
Donc, dans notre cas, l'objectif est de disposer d'un seul accessoire.

85
00:05:37,400 --> 00:05:44,420
Donc, ici, nous aurons un objet qui a une propriété avec le nom de buts qui détient la valeur passée à

86
00:05:44,420 --> 00:05:45,170
cet accessoire.

87
00:05:46,270 --> 00:05:53,110
Donc, en d'autres termes, ici, je pouvais verrouiller la console, prop start objectifs, dot objectifs, parce que j'ai nommé par Propp

88
00:05:53,110 --> 00:05:54,130
objectifs ici.

89
00:05:54,430 --> 00:05:59,680
Si vous avez choisi un nom différent ici, ce qui est parfaitement bien, vous devez utiliser le nom différent ici.

90
00:06:00,580 --> 00:06:03,640
Maintenant, si nous sauvegardons cela, nous ne verrons plus nos objectifs pour le moment.

91
00:06:04,090 --> 00:06:08,140
Mais si nous ouvrons les outils de développement, nous voyons ces Arae être verrouillés ici.

92
00:06:08,230 --> 00:06:13,870
Et le journal de papa vient de la ligne de liste des objectifs six, comme vous le voyez, ce qui

93
00:06:13,870 --> 00:06:20,860
est bien sûr ce journal ici et là, nous voyons nos données d'objectifs, ce qui signifie que oui, il arrive avec succès à l'intérieur du composant Gollust.

94
00:06:21,670 --> 00:06:28,420
Le concept d'accessoires est un concept super important dans React, car c'est ce qui vous permet de transmettre

95
00:06:28,420 --> 00:06:34,510
des données du composant A, le composant d'application au composant B, le composant de liste d'objectifs.

96
00:06:34,540 --> 00:06:35,230
Dans ce cas.

97
00:06:35,830 --> 00:06:42,790
Voyons maintenant comment nous pouvons générer une liste de données dynamiquement dans J en tant que X, car nous avons ici une liste

98
00:06:42,790 --> 00:06:48,940
d'objectifs, un tableau d'objectifs, et nous souhaitons les afficher sous forme d'éléments de liste ici dans notre liste non

99
00:06:48,940 --> 00:06:49,360
ordonnée.