1
00:00:02,260 --> 00:00:08,440
In diesem Auffrischungskurs schreibt Module Yeater keine komplexe Reaktions-App, da dies einfach nicht die Idee

2
00:00:08,440 --> 00:00:10,120
dieses Moduls ist.

3
00:00:10,630 --> 00:00:17,260
Wir werden später in diesem Kurs eine realistische App im Hauptmodul schreiben, nach diesem Modul hier, wo wir am

4
00:00:17,260 --> 00:00:18,730
Kursprojekt arbeiten werden.

5
00:00:18,880 --> 00:00:20,890
Das ist hier nur eine Auffrischung.

6
00:00:21,070 --> 00:00:25,840
Und ich konzentriere mich auf die zentralen Reaktionselemente, Stael, und nicht darauf, eine erstaunliche Anwendung zu erstellen.

7
00:00:26,530 --> 00:00:31,870
Bei REACT dreht sich also alles um Komponenten. Daher teilen wir unsere App normalerweise in Komponenten auf.

8
00:00:32,080 --> 00:00:34,300
Beginnen wir jetzt, ohne es zu teilen.

9
00:00:34,390 --> 00:00:41,320
Und anstatt hier eine Technologie, eine App, auszugeben, werde ich ein Div verwenden, sagen wir in diesem Div.

10
00:00:41,710 --> 00:00:43,840
Fügen wir mehr HTML-Code hinzu.

11
00:00:44,050 --> 00:00:50,420
Ich sage hier h html, natürlich ist es J ist X, aber es ist noch in zwei HCM Altidore-Noten übersetzt.

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

13
00:00:50,980 --> 00:00:52,120
Aber es ist J ist X.

14
00:00:53,020 --> 00:01:00,830
Hier könnten wir also H haben, um zu markieren, wo wir Ursachenziele sagen, und darunter möchten wir eine Liste haben oder

15
00:01:00,830 --> 00:01:02,950
eine Liste unserer Kursziele hinzufügen.

16
00:01:03,180 --> 00:01:04,150
Und sie sind ein Ziel.

17
00:01:04,180 --> 00:01:04,840
Könnte sein.

18
00:01:05,260 --> 00:01:09,460
Papa, wir wollen den Kurs beenden.

19
00:01:10,350 --> 00:01:13,560
Dass wir alles über den Kurs erfahren wollen.

20
00:01:17,240 --> 00:01:21,230
Hauptthema und dass wir zum Beispiel helfen wollen.

21
00:01:22,920 --> 00:01:25,950
Unsere Studenten im Kurs, CU und.

22
00:01:28,030 --> 00:01:31,890
Ein Abschnitt, und das könnte etwas Gold sein.

23
00:01:32,260 --> 00:01:34,060
Nun eine sehr triviale Anwendung.

24
00:01:34,240 --> 00:01:39,850
Jetzt habe ich hier kein besonders spektakuläres Styling, weshalb wir das speichern und herausbringen.

25
00:01:39,880 --> 00:01:47,050
Aber jetzt werde ich etwas Styling hinzufügen und dafür werde ich eine App hinzufügen, Sears 'Datei hier und Deadfall in

26
00:01:47,110 --> 00:01:48,370
die JavaScript-Datei importieren.

27
00:01:48,400 --> 00:01:53,710
Dies ist in Manila, JavaScript, natürlich nicht möglich, aber aus diesem Grund analysiert Nien

28
00:01:53,710 --> 00:01:56,860
unsere Dateien und transformiert dann den Code.

29
00:01:57,310 --> 00:02:02,740
Dies ist möglich und wird einfach transformiert, um diesen CSX-Code in das H einzufügen.

30
00:02:02,740 --> 00:02:03,790
Timal-Datei auch.

31
00:02:04,660 --> 00:02:07,580
Jetzt hier gebe ich diesem ein C als Klasse.

32
00:02:07,600 --> 00:02:09,370
Und es gibt eine besondere Sache.

33
00:02:10,080 --> 00:02:16,500
Das Klassenattribut wie dieses existiert nicht und J ist X, da Klasse ein Schlüsselwort in JavaScript ist.

34
00:02:16,840 --> 00:02:18,160
Es ist also Klassenname.

35
00:02:18,190 --> 00:02:21,870
Und so fügen Sie Elementen Siestas-Klassen hinzu und J ist X.

36
00:02:22,240 --> 00:02:28,400
Dies alles ist natürlich eine Art Beweis oder erinnert Sie daran, dass dies nicht H Tim ist.

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

38
00:02:29,320 --> 00:02:37,630
Eulenhaft aussehende Syntax, die hier und jetzt als Klassenzielliste bezeichnet wird.

39
00:02:39,040 --> 00:02:46,300
Definiert hier einige Stile für den Gollust, und ich setze die Liste hier einfach auf "Nicht", entferne einen Rand

40
00:02:46,300 --> 00:02:52,660
oder gebe ihm einen Rand von zwei Widder oben und unten und einen Abstand von Null.

41
00:02:53,350 --> 00:03:00,040
Und zu jedem Ziellistenelement füge ich einen Rand von einem Raum oben und unten Null zwei links und rechts und dann

42
00:03:00,460 --> 00:03:03,020
einfach einen Rand von einem Pixel Volumenkörper hinzu.

43
00:03:03,040 --> 00:03:07,460
Und dann diese graue Farbe hier und eine Polsterung von einem Widder.

44
00:03:07,550 --> 00:03:12,460
Dies ist ein sehr, sehr einfaches Styling, da ich hier nicht viel Zeit mit Schreiben verbringen

45
00:03:12,520 --> 00:03:13,150
möchte.

46
00:03:13,930 --> 00:03:15,820
Nun vielleicht eine Anpassung.

47
00:03:16,420 --> 00:03:19,810
Lassen Sie uns der Liste tatsächlich einen Rand von zwei Bändern in alle Richtungen geben.

48
00:03:20,230 --> 00:03:24,310
Jetzt haben wir diese Liste unserer Ziele, um die Kursziele hier oben anzupassen.

49
00:03:24,640 --> 00:03:25,990
Ich werde auch.

50
00:03:27,750 --> 00:03:30,420
Geben Sie diesem d'Hiv einen Klassennamen, natürlich Schädel.

51
00:03:31,460 --> 00:03:33,050
Und dann in D. C. als US-Datei.

52
00:03:34,390 --> 00:03:41,410
Vielleicht können wir ganz oben die Kursziele und deren d blockieren. h zu markieren, um in der Mitte ausgerichtet zu werden.

53
00:03:41,620 --> 00:03:42,220
Genau so.

54
00:03:43,060 --> 00:03:45,160
Nun wieder sehr große Ziele.

55
00:03:45,190 --> 00:03:47,470
Aber das ist hier für den Diskurs in Ordnung.

56
00:03:47,650 --> 00:03:49,270
Wir üben nur zu reagieren.

57
00:03:49,780 --> 00:03:51,070
Wir haben hier also diese Kursziele.

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

59
00:03:52,450 --> 00:03:54,860
Dies ist natürlich ein sehr einfaches Markup.

60
00:03:55,450 --> 00:04:00,940
Nun, was Sie oft tun, um zu reagieren, wenn Sie dies in mehrere Komponenten aufteilen,

61
00:04:00,940 --> 00:04:07,570
würden Sie beispielsweise diese Liste in eine separate Komponente auslagern, um jede Komponente für sich zu behalten, relativ schlank

62
00:04:07,570 --> 00:04:09,640
und auf eine Aufgabe konzentriert.

63
00:04:10,180 --> 00:04:14,560
Dazu können wir hier im Quellordner einen Komponenten-Sup-Ordner hinzufügen.

64
00:04:15,400 --> 00:04:20,650
Und dort werde ich eine Zielliste J hinzufügen. S. Datei.

65
00:04:20,830 --> 00:04:22,960
Dies wird meine Ziellistenkomponente enthalten.

66
00:04:23,620 --> 00:04:27,880
Um eine solche neue Komponente zu erstellen, müssen wir zunächst importieren, reagieren von reagieren.

67
00:04:27,940 --> 00:04:30,450
Andernfalls können wir dieses J nicht als X Syntex verwenden.

68
00:04:31,000 --> 00:04:32,290
Und dann erwähnte ich tot.

69
00:04:32,290 --> 00:04:33,760
Eine Komponente ist eine Funktion.

70
00:04:33,880 --> 00:04:37,660
Übrigens können Sie auch mit dem Funktionsschlüsselwort oder erstellen.

71
00:04:38,710 --> 00:04:42,280
Mit einem Funktionsausdruck oder.

72
00:04:43,490 --> 00:04:47,480
Mit der Pfeilfunktion bald Text, den ich zuvor verwendet habe, war es nur eine Somatik, die ich hier verwenden werde,

73
00:04:47,480 --> 00:04:48,680
aber das ist kein Muss.

74
00:04:49,430 --> 00:04:52,430
Und dann exportiere ich hier meine Zielliste so.

75
00:04:52,790 --> 00:04:54,860
Und jetzt hier drinnen kehre ich zurück.

76
00:04:55,920 --> 00:05:01,530
Diese ungeordnete Liste, Salt, schneide sie hier ab und füge sie dann hinzu. Hier ist ein Rückgabewert.

77
00:05:01,530 --> 00:05:07,500
Wenn dies reformiert wird, werden diese Klammern automatisch um sie herum hinzugefügt, sodass sie über mehrere Zeilen hinweg gut

78
00:05:07,680 --> 00:05:08,910
formatiert werden können.

79
00:05:08,940 --> 00:05:10,890
Andernfalls wäre dies kein gültiges JavaScript.

80
00:05:11,280 --> 00:05:13,350
So ist es auch mit den Klammern.

81
00:05:13,350 --> 00:05:16,920
Es ist, weil dann JavaScript weiß, dass dieser Block zusammen gehört.

82
00:05:17,730 --> 00:05:20,170
Jetzt haben wir hier die Zielliste und eine App.

83
00:05:20,430 --> 00:05:24,630
Ja, wir können jetzt unsere Ziellistenkomponente importieren.

84
00:05:24,930 --> 00:05:26,520
Sie können es hier benennen, wie Sie möchten.

85
00:05:26,790 --> 00:05:29,990
Muss nicht derselbe Name sein, unter dem Sie es hier exportieren.

86
00:05:30,450 --> 00:05:36,720
Wichtig ist nur, dass es hier in Abcess mit einem Großbuchstaben und einem Import aus dem Komponentenordner beginnen

87
00:05:36,720 --> 00:05:39,510
muss und diese aus der Zielliste stammen.

88
00:05:39,780 --> 00:05:43,430
Und wie ich bereits erwähnt habe, können Sie D weglassen. Dateierweiterung hier.

89
00:05:43,620 --> 00:05:44,460
Es ist nicht erforderlich.

90
00:05:45,210 --> 00:05:52,710
Und dann verwenden Sie hier die Go-Liste wie ein reguläres J. S. X-Element, wie ein reguläres H tim L-Element, könnte man

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

92
00:05:53,310 --> 00:05:58,890
Da wir jedoch keinen Inhalt zwischen dem öffnenden und dem schließenden Tag haben, können und müssen wir hier ein selbstschließendes

93
00:05:58,890 --> 00:05:59,460
Tag schreiben.

94
00:05:59,760 --> 00:06:00,960
Dies wäre nicht erlaubt.

95
00:06:01,050 --> 00:06:03,280
Sie müssen immer Steuern und Jazz x schließen.

96
00:06:03,990 --> 00:06:06,240
Das wäre jetzt meine Ziellistenkomponente.

97
00:06:06,630 --> 00:06:10,230
Und deshalb sehen wir, wenn wir sicher sind, die gleiche Ausgabe wie zuvor.

98
00:06:10,980 --> 00:06:17,520
Wir erhalten auch das gleiche Styling, da Stile hier immer global angewendet werden, auch wenn Sie sie in

99
00:06:17,520 --> 00:06:19,140
eine bestimmte Komponentendatei importieren.

100
00:06:19,590 --> 00:06:26,250
Es empfiehlt sich jedoch, die Stile in der CSX-Datei neben der Komponente einzurichten, zu der sie gehören.

101
00:06:26,520 --> 00:06:28,610
Daher werde ich eine Zielliste C als s-Datei hinzufügen.

102
00:06:29,040 --> 00:06:33,210
Fügen Sie meine Zielliste Stollsteimer hinzu und importieren Sie diese Zielliste.

103
00:06:33,300 --> 00:06:36,450
CSX fällt in die Ziellisten-JavaScript-Datei.

104
00:06:36,720 --> 00:06:41,580
Dies ist kein Muss, erleichtert jedoch das Auffinden der Stile, die zu dieser Komponente gehören.

105
00:06:41,880 --> 00:06:47,160
Beachten Sie, dass Stile nicht automatisch auf eine Komponente angewendet werden, obwohl die normalen as-Regeln angewendet

106
00:06:47,220 --> 00:06:52,860
werden, da all dieses C wie folgt, unabhängig davon, wo Sie sie importieren, global auf Ihre gesamte

107
00:06:52,890 --> 00:06:54,120
Seite angewendet wird.

108
00:06:54,960 --> 00:06:57,540
Damit sind wir jedoch wieder beim gleichen Ergebnis wie zuvor.

109
00:06:58,020 --> 00:06:59,220
Warum haben wir das getan?

110
00:06:59,290 --> 00:07:02,280
Und warum teilen wir das auf, wenn wir das gleiche Ergebnis wie zuvor haben?