1
00:00:00,560 --> 00:00:03,760
Moin zufolge 89 von einfach 
komplex heute, der seit Ende 

2
00:00:03,760 --> 00:00:07,040
2023 versprochene Deepdive in 
React Jazz eine Bibliothek, um 

3
00:00:07,120 --> 00:00:13,040
ja Elemente anzuzeigen im Web 
und Burkhard hat uns da was 

4
00:00:13,040 --> 00:00:14,600
vorbereitet. 
Es geht richtig tief rein, aber 

5
00:00:14,600 --> 00:00:17,960
wir gucken auch, dass wir jetzt 
nicht jeden und jede abholen, 

6
00:00:17,960 --> 00:00:20,560
aber zumindest die Leute, die 
jetzt vielleicht noch nicht so 

7
00:00:20,560 --> 00:00:23,120
tief drin sind, auch für die was
dabei haben, wenn Burkhard für 

8
00:00:23,120 --> 00:00:27,080
der Plan. 
Ja, Moin für alle die die 

9
00:00:27,080 --> 00:00:28,960
Legotechnik kennen, die nehmen 
wir heute noch mal mit. 

10
00:00:29,600 --> 00:00:33,320
Den würde ich das später merken.
Also nicht nur React muss, man 

11
00:00:33,320 --> 00:00:35,920
wird gelernt, es gibt auch 
Deepdive und lego Technik heute.

12
00:00:36,480 --> 00:00:39,520
Ja, cool. 
OK, ich bin gespannt, alles 

13
00:00:39,520 --> 00:00:40,720
klar. 
Also vielleicht noch mal ganz 

14
00:00:40,720 --> 00:00:42,840
kurz als kleiner recup, ich hab 
mir dummerweise unsere alte 

15
00:00:42,840 --> 00:00:44,720
Folge gar nicht mal angehört, 
ich hab aber natürlich jetzt die

16
00:00:44,720 --> 00:00:48,600
Mittel der Zeit genutzt, a la 
Germany JGBT und Co. 

17
00:00:48,600 --> 00:00:52,440
Mal noch mal Durchgeguckt, React
kommt aus dem Hause Meta ne, 

18
00:00:52,440 --> 00:00:55,280
dort hat man irgendwie 
Performance Probleme gehabt mit.

19
00:00:55,680 --> 00:00:59,000
Mit dem Newsfeed ja, und hat das
dann dort in innerhalb von Meta,

20
00:00:59,000 --> 00:01:02,200
also unter Facebook hat man das 
vielleicht eher entwickelt und 

21
00:01:02,200 --> 00:01:04,000
dann die erste Anwendung, die es
dann verwendet hat, war 

22
00:01:04,000 --> 00:01:07,520
tatsächlich Chat ist. 
Die Kernidee ist irgendwie, dass

23
00:01:07,920 --> 00:01:11,120
Benutzeroberflächen automatisch 
auf Veränderungen, also von 

24
00:01:11,120 --> 00:01:14,160
Datenzuständen reagieren, ne und
deswegen auch der Name React. 

25
00:01:14,160 --> 00:01:16,760
Ich reagiere auf irgendeine 
Veränderung und das ist ziemlich

26
00:01:16,760 --> 00:01:20,320
flott, ja und ich glaube auch, 
es wird dann häufig in einem. 

27
00:01:20,560 --> 00:01:23,680
Ab war schon einem Zuge genannt 
mit mit View, JS und und 

28
00:01:23,680 --> 00:01:27,120
Angular, aber letzten Endes ist 
der feine und kleine Unterschied

29
00:01:27,120 --> 00:01:28,880
und da müssen wir jetzt 
aufpassen, zumindest hab ich das

30
00:01:28,880 --> 00:01:30,960
gelesen, dass es sich bei den 
anderen beiden eher um 

31
00:01:30,960 --> 00:01:34,040
Frameworks handelt, während 
Racked ne Bibliothek ist, 

32
00:01:34,040 --> 00:01:37,000
tatsächlich die sich dann doch 
wieder auf ne kleinere auf nen 

33
00:01:37,000 --> 00:01:40,120
kleineren Teil des Ganzen 
fokussiert. 

34
00:01:40,120 --> 00:01:43,680
Ja gegenüber diesen anderen 
Frameworks ja so, das war meine 

35
00:01:43,680 --> 00:01:45,480
kleine Einleitung Booker zum 
Thema, das darfst du mich 

36
00:01:45,480 --> 00:01:47,600
korrigieren. 
Ja ne, du bist ne super 

37
00:01:47,600 --> 00:01:50,320
Einleitung, ja. 
Das sind so feine Details. 

38
00:01:50,320 --> 00:01:52,280
Ne, Wo sind die Unterschiede 
zwischen den Frameworks haben 

39
00:01:52,280 --> 00:01:54,280
wir glaube ich in der Folge 
davor n bisschen rausgehoben 

40
00:01:54,280 --> 00:01:57,200
aber du hast recht Gerrit, also 
man spricht ja gerne mal so von 

41
00:01:57,200 --> 00:02:02,440
opin United ja also wieviel 
Meinung bringt so nen Framework 

42
00:02:02,440 --> 00:02:06,640
Produkt im Reinen wie man es zu 
benutzen hat und wie Sachen 

43
00:02:07,200 --> 00:02:09,280
aufzubauen zu sind und da würde 
ich tatsächlich auch so sagen 

44
00:02:09,280 --> 00:02:12,960
React lässt einem am meisten 
Freiheit ja also es hat zwar 

45
00:02:12,960 --> 00:02:15,200
grundkonzepte und die wollen wir
heute genau angucken. 

46
00:02:15,680 --> 00:02:18,160
Es ist aber nicht so n man wird 
nicht so eingegleist wie bei 

47
00:02:18,160 --> 00:02:21,680
anderen Frameworks, so relativ 
klar ist, wie ich wo was 

48
00:02:21,680 --> 00:02:23,440
hinschreiben muss und so weiter 
das werden wir noch. 

49
00:02:23,440 --> 00:02:24,360
Kennen. 
Anscheinend gibt es aber 

50
00:02:24,360 --> 00:02:27,240
tatsächlich, da auch beim bei 
der Benamung sag ich mal 

51
00:02:27,240 --> 00:02:30,000
wirklich der Unterschied, dass 
es viele sagen, es ist nicht ein

52
00:02:30,000 --> 00:02:32,320
Framework, es ist tatsächlich 
eine Bibliothek, die sich 

53
00:02:32,320 --> 00:02:35,840
ausschließlich um die 
Darstellungsebene kümmert, 

54
00:02:35,840 --> 00:02:40,320
während Themen wie Routing oder 
sowas nicht von Racked mitgelöst

55
00:02:40,320 --> 00:02:43,160
werden, was bei diesen echten 
Frameworks irgendwie eher der 

56
00:02:43,160 --> 00:02:43,840
Fall ist. 
So ne. 

57
00:02:44,480 --> 00:02:46,800
Ja, das kann man so sagen ich. 
Ich würd das so stehen lassen, 

58
00:02:46,800 --> 00:02:48,880
ich find das OK, wenn es ne 
Bibliothek ist, also man also 

59
00:02:48,880 --> 00:02:52,080
die in der echten Welt ist es ja
so, dass du ne Bibliothek n 

60
00:02:52,080 --> 00:02:55,280
Produkt oder wie auch immer 
sofort aufbaust und Aufgeleist 

61
00:02:55,280 --> 00:02:57,840
mit dem ganzen Ecosystem, was 
darum gibt ja, also React gibt 

62
00:02:57,840 --> 00:03:00,520
es natürlich schon lange und es 
gibt ein riesiges gigantisches 

63
00:03:00,520 --> 00:03:04,040
Ecosystem und du kannst Routing,
es gibt den React Dom Router und

64
00:03:04,040 --> 00:03:05,680
so weiter da wollen wir halt 
nicht so im Detail sprechen, 

65
00:03:05,680 --> 00:03:08,720
aber das kannst du alles dran 
linken dran kleben sag ich mal 

66
00:03:08,720 --> 00:03:11,840
ganz grob gesprochen und dann 
dann bekommst du halt auch ja 

67
00:03:12,000 --> 00:03:14,400
Framework. 
Charakteristika mit rein. 

68
00:03:14,880 --> 00:03:17,720
Aber noch mal, du kannst also 
das React selber, da hast du 

69
00:03:17,720 --> 00:03:19,880
schon recht, Gerrit, das bringt 
das nicht gleich alles so aus 

70
00:03:19,880 --> 00:03:22,520
dem Hause mit und du hast halt 
noch mehr Freiheiten dir den 

71
00:03:22,520 --> 00:03:24,680
Router oder den Router oder den 
nächsten Router noch mit 

72
00:03:24,680 --> 00:03:29,680
Reinzuhängen und baust dir quasi
deine deine Gesamtlösung noch n 

73
00:03:29,680 --> 00:03:31,840
bisschen modularer auf als es 
jetzt vielleicht in einem in 

74
00:03:32,240 --> 00:03:33,920
einem Angular oder Irgendsowas 
stattfindet. 

75
00:03:33,920 --> 00:03:36,880
Ja, das ist so. 
Ja OK, das erklär es doch ganz 

76
00:03:36,880 --> 00:03:38,400
gut. 
Müssen wir noch irgendeine 

77
00:03:38,400 --> 00:03:42,240
Grundlage kennen, bevor wir uns 
um Legotechnik und Rack kümmern?

78
00:03:42,720 --> 00:03:45,960
Na ja, ich glaube also, die 
Zuhörer, die die, die uns ab und

79
00:03:45,960 --> 00:03:48,480
zu schon mal hören, die, die 
haben, glaub ich, ja diese 

80
00:03:48,480 --> 00:03:51,200
Grundlagen von kleinen Server, 
Internet und so weiter das muss 

81
00:03:51,200 --> 00:03:53,040
man jetzt schon mal verstanden 
haben, das fangen wir, das 

82
00:03:53,040 --> 00:03:55,560
fangen wir jetzt nicht mehr an 
hier, also wir wollen, ja, wir 

83
00:03:55,920 --> 00:03:58,880
wollen ja direkt mal tief 
einsteigen, vielleicht nur so 

84
00:03:58,880 --> 00:04:01,560
viel gesagt, dass das React ist 
ne sogenannte Single Page 

85
00:04:01,560 --> 00:04:04,280
Application, also nur einmal 
ganz grob abgestochen, was wir 

86
00:04:04,280 --> 00:04:07,440
hier haben es es gibt, also wir 
sind in der Webtechnologie, es 

87
00:04:07,440 --> 00:04:12,480
gibt irgendwo nen Server der. 
Da da wird quasi ein Programm, 

88
00:04:12,480 --> 00:04:14,280
das erzähl ich gleich mal n 
bisschen genauer zur Verfügung 

89
00:04:14,280 --> 00:04:16,600
gestellt. 
Das wird im Klienten geladen, im

90
00:04:16,600 --> 00:04:20,079
Browser und dann läuft quasi ne 
Webapplikation. 

91
00:04:20,079 --> 00:04:22,440
Ja, das kann alles Mögliche 
sein, ja es kann Facebook sein, 

92
00:04:22,440 --> 00:04:25,040
es kann unsere Applikation, 
alles mögliche kannste Leute 

93
00:04:25,040 --> 00:04:29,280
machen ja mit React, ja genau 
muss man erstmal nicht wissen, 

94
00:04:29,280 --> 00:04:31,280
so und dann können wir 
einsteigen und versuchen zu 

95
00:04:31,280 --> 00:04:35,440
verstehen was ist genau React ja
was hab ich davon ja warum warum

96
00:04:35,440 --> 00:04:37,920
nutze ich das so und und wie 
funktioniert das so ungefähr ja 

97
00:04:38,560 --> 00:04:40,440
Mhm alles klar. 
Ja, ready. 

98
00:04:40,960 --> 00:04:43,840
When you are Gerit nickt, dann 
können wir loslegen. 

99
00:04:43,840 --> 00:04:47,520
Ja, ich fang mal an mit dem Lego
Technik Krams du das mal 

100
00:04:47,520 --> 00:04:50,800
eingleisen was da los ist. 
Also ich hab mir also manchmal 

101
00:04:50,800 --> 00:04:53,120
macht das halt Sinn mit Bildern 
zu sprechen, manchmal macht das 

102
00:04:53,120 --> 00:04:55,320
nicht so viel Sinn, dass das 
verwirrend und ich würde in 

103
00:04:55,320 --> 00:04:57,800
dieser Folge mal probieren so n 
Bild zu wählen und mal gucken 

104
00:04:57,800 --> 00:05:00,320
wie weit wir kommen. 
Ja und ich beschreibe mal das 

105
00:05:00,320 --> 00:05:02,680
Bild was wir haben ne also ich 
ich weiß nicht wer alles lego 

106
00:05:02,680 --> 00:05:04,720
Technik kennt, ich kennt sehr 
gut ich hab mein meine ganze 

107
00:05:04,720 --> 00:05:07,080
Jugend verbracht mit Lego 
Technik hatte davon sehr viel 

108
00:05:07,080 --> 00:05:09,680
ich fand das sehr cool. 
Also LEGO kennt jeder. 

109
00:05:09,680 --> 00:05:11,360
Das sind halt diese diese 
Blöckchen. 

110
00:05:11,360 --> 00:05:14,560
Ja weiß ich nicht, hier gibt es 
Stangen und Platten und so 

111
00:05:14,560 --> 00:05:16,880
weiter und das kannst du halt 
übereinander kleben und sofort, 

112
00:05:16,880 --> 00:05:19,720
ja die haben halt n Interface, 
was miteinander passt, sodass du

113
00:05:19,720 --> 00:05:22,560
verschiedene kleine Blöcke 
aufeinander bauen kannst. 

114
00:05:23,240 --> 00:05:25,640
Das ist jetzt auch schon bei 
javascript wichtig, komm ich 

115
00:05:25,640 --> 00:05:28,840
aber gleich zu und das Macht und
das Lego Technik das Wort 

116
00:05:28,840 --> 00:05:32,080
Technik, das braucht man nämlich
für dieses Bild, das Technik ist

117
00:05:32,080 --> 00:05:34,560
ja quasi, dass ich noch so 
Sachen hab wie Zahnräder, 

118
00:05:34,960 --> 00:05:37,120
Getriebe, ja schrauben 
differenziale. 

119
00:05:37,360 --> 00:05:40,520
Hydrauliksysteme, Elektromotoren
und so weiter das ist quasi das,

120
00:05:40,520 --> 00:05:42,880
was das Technik an dem Lego 
erweitert. 

121
00:05:42,880 --> 00:05:45,400
Sag ich mal. 
Ja, also grob gesprochen und 

122
00:05:45,400 --> 00:05:47,200
jetzt komm fang ich schon mal an
mit dem Bild malen. 

123
00:05:47,200 --> 00:05:50,480
Ja grob gesprochen ist lego da 
kannst du was bauen ist sehr 

124
00:05:50,480 --> 00:05:52,000
statisch. 
Ja da kannst du da draußen mit 

125
00:05:52,000 --> 00:05:55,400
dem Finger dran tippen, passiert
aber nichts ja weil es gibt 

126
00:05:55,400 --> 00:05:58,680
keine Logik, kein Getriebe, es 
macht nichts innen drin, ja es 

127
00:05:58,680 --> 00:06:01,120
ist halt schön, es ist da kannst
du irgendwas? 

128
00:06:01,560 --> 00:06:03,440
Irgendwie ne Mickey Mouse bauen 
oder irgend so was. 3. 

129
00:06:03,440 --> 00:06:05,040
D ja kannst dir angucken, ist 
cool. 

130
00:06:05,040 --> 00:06:08,000
Ja das ist die coole HTML Seite,
die statische ja passiert aber 

131
00:06:08,000 --> 00:06:09,800
nichts kannst du dich nicht mit 
lackieren kannst du lesen, 

132
00:06:09,800 --> 00:06:13,400
kannst du angucken, kannst dich 
freuen super ja Deko Technik 

133
00:06:13,400 --> 00:06:16,000
kannst du halt n ganzen Bagger 
bauen ne so n so n richtig 

134
00:06:16,000 --> 00:06:17,960
schönen Bagger mit einer 
Schaufel da kannst mit Pleumatik

135
00:06:17,960 --> 00:06:20,400
drinne, da läuft da irgendwie n 
Motor der macht pumpt irgendwie 

136
00:06:20,400 --> 00:06:21,920
in so n Kompressor rein dass du 
Luft hast. 

137
00:06:21,920 --> 00:06:25,080
Dann hast du Ventil ja also da 
hast du, da hast du erst was 

138
00:06:25,080 --> 00:06:27,840
Schönes zum Angucken und dann 
kannst du Knöpfchen drücken 

139
00:06:27,840 --> 00:06:29,880
kannst du am Hebeln drehen und 
so weiter und das Ding macht 

140
00:06:29,880 --> 00:06:32,800
sogar was, ja. 
So, und das ist was wir ne 

141
00:06:32,800 --> 00:06:34,800
moderne Webanwendung nennen, 
weil wir wollen nämlich ganz 

142
00:06:34,800 --> 00:06:36,320
viel interagieren und ganz viel 
machen. 

143
00:06:36,320 --> 00:06:40,040
Ja, und so weiter und und und. 
Der Bagger der Lego Technic 

144
00:06:40,040 --> 00:06:44,000
Bagger ist das was React ist. 
Ja, und da sag ich jetzt voraus,

145
00:06:44,000 --> 00:06:49,040
weil React ermöglicht uns mal 
ganz grob mit den Steinchen was 

146
00:06:49,040 --> 00:06:53,080
die HTML Bauteile sind, die 
statisch sind die zu kombinieren

147
00:06:53,080 --> 00:06:55,960
mit einer Business Logik. 
In einer also ne. 

148
00:06:56,080 --> 00:06:59,520
Also ich mit mit Knöpfen und so 
weiter mit mit einer Methodik wo

149
00:06:59,520 --> 00:07:03,160
ich auf Events reagieren kann 
auf auf und zwar auf 2 Sorten 

150
00:07:03,160 --> 00:07:05,960
von Events die die vom User 
kommen weil ich im Browser 

151
00:07:05,960 --> 00:07:09,600
irgendwas klicke und mache oder 
die die von einem Backend kommen

152
00:07:09,600 --> 00:07:11,760
weil sich da irgendwas verändert
hat, weil vielleicht ein anderer

153
00:07:11,760 --> 00:07:14,160
User irgendwas geklickt hat und 
ich synchronisiert werden soll, 

154
00:07:14,560 --> 00:07:16,800
da brauche ich dann auf einmal 
Logik für ja und das ist die 

155
00:07:16,800 --> 00:07:20,200
Technik in Sambagger und. 
Diese Kombination, die ist ja 

156
00:07:20,200 --> 00:07:21,680
komplex. 
Ja, wenn ich so n Bagger baue 

157
00:07:21,680 --> 00:07:23,880
auch mit lego Technik, da 
braucht man fette Anleitung und 

158
00:07:23,880 --> 00:07:25,520
so, da hat sich jemand n 
bisschen was überlegt, dass das 

159
00:07:25,520 --> 00:07:27,640
alles so klappt, da muss ich 
nämlich jetzt auf einmal 

160
00:07:27,640 --> 00:07:32,880
statische Blöcke mit 
funktionierender Technik bei uns

161
00:07:32,880 --> 00:07:36,800
jetzt hier mehr Logik verknüpfen
und dafür ist React nen 

162
00:07:36,800 --> 00:07:40,160
Framework, dass ich das gut 
machen kann und ne Übersicht 

163
00:07:40,160 --> 00:07:42,920
behalte bei so einem komplexen 
Wesen wie n Bagger ja oder bei 

164
00:07:42,920 --> 00:07:45,200
so einem komplexen Wesen wie 
einer fetten Webanwendung bei 

165
00:07:45,200 --> 00:07:46,560
möglichen Sachen passieren 
müssen. 

166
00:07:47,600 --> 00:07:49,520
Das mal so vorausgeschickt, das 
wird unser Bild ja. 

167
00:07:50,080 --> 00:07:52,880
Ja, und und und vor vor React 
war das gar nicht möglich. 

168
00:07:52,880 --> 00:07:54,840
Ja, es klingt jetzt fast so, als
konntest du nicht interagieren 

169
00:07:54,840 --> 00:07:56,320
mit Webseiten, bevor es React 
gab. 

170
00:07:56,320 --> 00:07:57,840
Doch doch, kannst du schon 
alles? 

171
00:07:57,840 --> 00:08:00,480
Ja, also es ist ja also am Ende.
Was machen wir denn hier am 

172
00:08:00,480 --> 00:08:03,240
Ende, die die Tools jetzt ganz 
technisch unten drunter sind? 

173
00:08:03,240 --> 00:08:07,360
Javascript ja javascript ist ne 
Programmiersprache die die fügt 

174
00:08:07,360 --> 00:08:10,480
dem die fügt statischen 
Webseiten dynamische 

175
00:08:11,120 --> 00:08:14,040
Möglichkeiten hinzu, ja. 
Und das kann ich jetzt auch mal 

176
00:08:14,040 --> 00:08:15,200
sagen. 
React funktioniert immer noch 

177
00:08:15,200 --> 00:08:17,360
mit javascript. 
Ja es ist ne ist ne Bibliothek, 

178
00:08:17,360 --> 00:08:20,120
im Prinzip ne javascript 
Bibliothek, aber wenn ich nur 

179
00:08:20,120 --> 00:08:22,600
das blanke Javascript hab, dann 
ist es dann muss ich ja trotzdem

180
00:08:22,600 --> 00:08:25,400
noch sehr viel selber machen 
also es ist diese ganzen 

181
00:08:25,400 --> 00:08:28,800
Getriebe und also bei auch bei 
bei bei Legotechnik muss ich ja 

182
00:08:28,800 --> 00:08:31,440
jetzt nicht auch noch die wie 
soll ich sagen die Schläuche mir

183
00:08:31,440 --> 00:08:34,159
ausdenken und die selber bauen 
und diese ganzen Ventile und so 

184
00:08:34,159 --> 00:08:38,080
weiter und die und die wie sagt 
man die Diplomatik wie heißt 

185
00:08:38,080 --> 00:08:40,840
denn das wenn das Zylinder ja 
danke den Zylinder und so weiter

186
00:08:40,840 --> 00:08:42,559
das ist halt vorgefertigt ja 
und? 

187
00:08:42,880 --> 00:08:45,280
Dass der dass wenn du da dann 
oben Luft reinpumps, dass der 

188
00:08:45,280 --> 00:08:46,640
dann rausfährt. 
Und wenn du unten Luft 

189
00:08:46,640 --> 00:08:48,640
reinpumps, dass er, wie sie sich
wieder reinfährt und so weiter 

190
00:08:48,640 --> 00:08:51,200
also so Minimalsachen sind da 
quasi schon fertig. 

191
00:08:51,200 --> 00:08:54,480
Ja, und diese Minimalsachen, das
sind so Sachen, die kriegst du 

192
00:08:54,480 --> 00:08:56,280
dann von React mit. 
Ja und hier noch mal die 

193
00:08:56,280 --> 00:08:58,720
Einsortierung, die sind halt 
schon ziemlich minimal und das 

194
00:08:58,720 --> 00:09:02,480
ist das coole, es geht ja immer 
ums Abstraktionslevel ja, React 

195
00:09:02,480 --> 00:09:05,840
ist noch, ja es bringt dir was 
mit, aber es ist auch noch nicht

196
00:09:05,840 --> 00:09:08,960
riesig, ja es sind es sind ganz 
kleine Komponenten. 

197
00:09:09,440 --> 00:09:12,400
Die aber schon nen mehr riesigen
Mehrwert bieten um dir den 

198
00:09:12,400 --> 00:09:15,120
Bagger zu bauen. 
Aber du musst jetzt nicht noch 

199
00:09:15,120 --> 00:09:17,880
ne Cut Zeichnung machen von 
deiner von deinem Zylinder oder 

200
00:09:17,880 --> 00:09:19,360
Irgendsowas, der ist halt schon 
dabei. 

201
00:09:19,360 --> 00:09:22,960
Ja genau und wenn man wenn man 
sich jetzt ansucht ansieht, dann

202
00:09:22,960 --> 00:09:25,160
kann man also wenn man sich 
jetzt so n so n Bagger kauft im 

203
00:09:25,160 --> 00:09:28,040
Geschäft ja und pack den aus und
schmeiß den mal so auf den Tisch

204
00:09:28,040 --> 00:09:30,600
aus den ganzen Plastiktüten raus
dann dann hab ich halt meine 

205
00:09:30,600 --> 00:09:32,920
ganzen Teilchen ja also 
Zahnräder seh ich Schläuche seh 

206
00:09:32,920 --> 00:09:36,080
ich und sofort ja und die und 
jetzt in unserem Beispiel sind 

207
00:09:36,080 --> 00:09:39,000
die immer erstmal alle grau ja 
haben keine Farbe ja das. 

208
00:09:39,120 --> 00:09:40,400
Dazu kommt man nämlich auch 
noch. 

209
00:09:41,040 --> 00:09:43,680
Die muss ich nämlich die, die 
ich, die Anmale, das ist nämlich

210
00:09:43,680 --> 00:09:46,520
auch noch ne Sache, da hat React
auch sehr viel Möglichkeiten, 

211
00:09:46,520 --> 00:09:49,640
wie ich das machen kann und das 
bringt mich auch noch zu einem 

212
00:09:49,640 --> 00:09:52,800
anderen Punkt, selbst wenn ich 
jetzt, ich springe mal voraus 

213
00:09:52,800 --> 00:09:55,600
und sage, OK, wir bauen jetzt 
quasi mit React ne Anwendung, 

214
00:09:55,600 --> 00:09:57,880
also wir haben es jetzt 
geschafft n Bagger zu bauen, ja 

215
00:09:57,880 --> 00:09:59,160
dann habe ich den 
zusammengesteckt und der 

216
00:09:59,160 --> 00:10:01,840
funktioniert kann ich 
ausprobieren, dann sieht es so 

217
00:10:01,840 --> 00:10:04,720
aus für den Entwickler, ja dann 
ist der dann ist der Bagger da. 

218
00:10:05,200 --> 00:10:07,120
Und bei Lego Technik bin ich 
jetzt fertig. 

219
00:10:07,120 --> 00:10:10,640
Ja, den kann ich dann benutzen, 
das ist ein React Analogie 

220
00:10:10,640 --> 00:10:13,400
nicht, da habe ich dann aber nur
auch ne funktionierende 

221
00:10:13,400 --> 00:10:16,000
Webseite, bin aber auf dem 
Development Server, hab das noch

222
00:10:16,000 --> 00:10:19,680
nicht fertig deployed, so würde 
ich nicht in Produktion gehen ne

223
00:10:19,760 --> 00:10:23,440
das will ich jetzt noch mal 
sagen bei React alleine damit 

224
00:10:23,440 --> 00:10:27,800
macht man heute keine fertige 
Webanwendung, man braucht noch 

225
00:10:27,800 --> 00:10:30,160
einen sogenannten Bundler ein 
Tool. 

226
00:10:30,720 --> 00:10:34,280
Was was, wenn ich den React Code
fertig habe, also den Bagger 

227
00:10:34,280 --> 00:10:36,880
gebaut hab, fertig? 
Was dann noch mal drüber geht 

228
00:10:37,360 --> 00:10:40,000
und was bestimmtes Macht in dem 
Bild vom Lego Technik könnte man

229
00:10:40,000 --> 00:10:43,040
sagen so ich bau noch mal alles 
auseinander alle Teile hab mir 

230
00:10:43,040 --> 00:10:45,200
gemerkt wie das sein muss und 
jetzt mach ich überall 

231
00:10:45,200 --> 00:10:49,440
Sekundenkleber zwischen diese 
plastikblöcke ja dass das nie 

232
00:10:49,440 --> 00:10:51,760
wieder jetzt ist. 
Mein Ziel ist, das Ding darf nie

233
00:10:51,760 --> 00:10:54,920
wieder auseinanderfallen ne und 
dann mach ich noch irgendwie nen

234
00:10:54,920 --> 00:10:57,400
nen Lack drauf also nicht 
farblichen Lack sondern einfach 

235
00:10:57,400 --> 00:10:59,680
nen Lack drauf und so weiter und
sofort ja so dass das Ding. 

236
00:11:00,120 --> 00:11:02,200
Production Ready ist ja, dass 
ich den halt auch in die 

237
00:11:02,200 --> 00:11:04,320
Sandkiste mitnehmen kann oder 
unter das Wasser tauchen oder 

238
00:11:04,320 --> 00:11:06,680
was weiß ich so. 
Ja und vielleicht werden noch 

239
00:11:06,680 --> 00:11:09,400
mal bestimmte Teile optimiert, 
wo ich irgendwie n zu schweres 

240
00:11:09,400 --> 00:11:11,560
Teil gemacht hab, nämlich n 
leichteres oder Irgendsowas das 

241
00:11:11,560 --> 00:11:14,800
ist der Wandler. 
Ja und das sind im im echten 

242
00:11:14,800 --> 00:11:19,400
Leben sind das sind das, da gibt
es eigentlich 2 Tools 2 also die

243
00:11:19,400 --> 00:11:22,400
ich so kenne 2 wichtige Tools, 
das ist der sogenannte CRA, das 

244
00:11:22,400 --> 00:11:27,000
liest man immer, heißt aber CRA 
steht für Create React App, das 

245
00:11:27,000 --> 00:11:29,920
ist das ältere Tool. 
Das funktioniert im Hintergrund 

246
00:11:29,920 --> 00:11:31,360
mit Webpack. 
Darüber haben wir auch schon mal

247
00:11:31,360 --> 00:11:34,560
gesprochen und im Prinzip ist 
das so, was ich sage, dass dann 

248
00:11:34,560 --> 00:11:37,120
dem gibst du quasi deine fertige
React Anwendung, die du halt 

249
00:11:37,120 --> 00:11:40,400
kodiert hast und der nimmt es 
quasi noch mal auseinander, 

250
00:11:40,400 --> 00:11:42,760
guckt was kann er damit 
optimieren, so dass es trotzdem 

251
00:11:42,760 --> 00:11:44,600
Bagger bleibt und gleiche 
Funktionalität, aber dass es 

252
00:11:44,600 --> 00:11:46,600
quasi noch geschmeidiger 
funktioniert, das ganze Ding 

253
00:11:46,600 --> 00:11:48,400
leichter ist. 
Ja dann wird er halt quasi 

254
00:11:48,800 --> 00:11:51,280
zusammengeklebt und fertig 
gemacht, ja und dann kriegst du 

255
00:11:51,280 --> 00:11:53,440
quasi nur hochoptimiertes 
javascript. 

256
00:11:53,840 --> 00:11:56,640
Was das Gleiche ist, aber noch 
schneller, ist ja vielleicht 30%

257
00:11:56,640 --> 00:11:59,920
und noch viel kleiner ist von 
der vom also im Code ist es dann

258
00:11:59,920 --> 00:12:03,760
halt kleiner von den Kilobytes 
ne, dann ist es wichtig den 

259
00:12:03,760 --> 00:12:07,120
Bagger, den muss ich ja jedem 
Nutzer ne Kopie von dem Bagger 

260
00:12:07,120 --> 00:12:10,000
hinladen wenn der in seinen 
Browser geht, dann ist der 

261
00:12:10,000 --> 00:12:13,840
Bagger lebt quasi wenn er fertig
gebandelt ist auf dem Server und

262
00:12:13,840 --> 00:12:16,000
jeder Nutzer der dann in den 
Browser kommt bekommt ne Kopie 

263
00:12:16,000 --> 00:12:19,640
vom Bagger zum Spielen ne und 
der Bundler macht halt den 

264
00:12:19,640 --> 00:12:22,080
Bagger leichter beziehungsweise 
den Code. 

265
00:12:22,520 --> 00:12:24,960
Klein ja, weil ich will nicht 
lange fette Megabytes 

266
00:12:24,960 --> 00:12:27,040
runterladen, das ist wichtig, 
ja, heutzutage. 

267
00:12:27,200 --> 00:12:30,240
Und der Bandler kommt aber immer
einmal zum Einsatz, ganz ähnlich

268
00:12:30,240 --> 00:12:32,440
wie weiß ich nicht. 
N Compiler oder sowas. 

269
00:12:32,440 --> 00:12:34,760
In dem Moment wo dir die 
Software zur Verfügung stellst 

270
00:12:34,760 --> 00:12:38,240
oder released quasi ganz genau. 
Ja, und tatsächlich ist das, je 

271
00:12:38,240 --> 00:12:41,040
größer deine React Anwendung 
wird auch n krasses Ding. 

272
00:12:41,080 --> 00:12:43,360
Ja also das der kann dann schon 
mal 20 bis 30 Minuten oder 

273
00:12:43,360 --> 00:12:47,000
länger bundeln, damit der halt 
deinen Bagger durchoptimiert und

274
00:12:47,000 --> 00:12:48,720
zusammenklebt sag ich mal, dass 
der gut passt. 

275
00:12:48,720 --> 00:12:50,720
Ja. 
OK, das passiert also jedes Mal 

276
00:12:50,720 --> 00:12:53,360
mit unserer. 
Eigenen Software wenn du. 

277
00:12:53,600 --> 00:12:58,400
Wenn ich dann hier so lese, 
genau, ja, so ist es und der 

278
00:12:58,400 --> 00:13:02,600
Bunlas hat hat dann ganz andere.
Also man optimiert 2 Dinge ja 

279
00:13:02,600 --> 00:13:04,440
und die sind sehr sehr 
unterschiedlich für den 

280
00:13:04,440 --> 00:13:08,160
Entwickler, während der baut 
willst du ist dir das völlig 

281
00:13:08,160 --> 00:13:10,680
wurscht, also da wird noch nicht
mal alles immer neu gebaut, da 

282
00:13:10,680 --> 00:13:13,360
ist wichtig, dass du sofort 
ausprobieren kannst. 

283
00:13:13,360 --> 00:13:16,040
Ja, als Entwickler veränderst du
was am Bagger und dann willst du

284
00:13:16,040 --> 00:13:18,400
sofort gucken, geht das jetzt ja
hab ich das hab ich das Zahnrad 

285
00:13:18,400 --> 00:13:21,720
richtig da dran gemacht, ja. 
Das sind, das ist auch wichtig, 

286
00:13:21,720 --> 00:13:24,640
und das sind, das Macht auch, 
das Macht auch normalerweise 

287
00:13:24,640 --> 00:13:26,880
React nicht, das sind auch 
Tools, die Drumherum sind. 

288
00:13:26,880 --> 00:13:30,000
Meistens ist das im Bundler mit 
enthalten, der Bundler macht es 

289
00:13:30,000 --> 00:13:32,960
fertig für Produktion, der hilft
dir aber auch, dass du damit 

290
00:13:32,960 --> 00:13:34,960
cool entwickeln kannst. 
Ja, dass du sofort wieder den 

291
00:13:34,960 --> 00:13:36,800
funktionierenden Bagger hast, 
den du ausprobieren kannst. 

292
00:13:36,800 --> 00:13:39,120
Ja, mal grob gesprochen, das ist
der Development Server, der 

293
00:13:39,120 --> 00:13:42,800
sogenannte und der, der führt, 
der, der führt dazu, dass nicht 

294
00:13:42,800 --> 00:13:44,480
immer der ganze Bagger noch mal 
neu gebaut werden müssen, 

295
00:13:44,480 --> 00:13:45,720
sondern nur die Teile, die du 
gerade brauchst. 

296
00:13:45,720 --> 00:13:47,600
Die werden dann noch mal schnell
ausgetauscht und so weiter ja. 

297
00:13:48,200 --> 00:13:49,760
Aber das das soll mal genug da 
sein. 

298
00:13:49,760 --> 00:13:51,920
Ich will nur noch mal erwähnen, 
was heute der moderne Wandler 

299
00:13:51,920 --> 00:13:54,720
ist wird es wird vit 
ausgesprochen glaube ich. 

300
00:13:55,120 --> 00:14:01,600
VITE funktioniert innen drinne 
auch ganz anders als als Create 

301
00:14:01,600 --> 00:14:05,040
React App und ist glaube ich in 
vielen Belangen create react App

302
00:14:05,040 --> 00:14:06,880
voraus. 
Ja also es ist moderner, es ist 

303
00:14:06,880 --> 00:14:10,040
schneller, ist das was da 
rauskommt führt schneller aus 

304
00:14:10,040 --> 00:14:12,840
und so weiter ist also. 
Wenn jemand jetzt heute n React 

305
00:14:12,840 --> 00:14:14,960
Projekt anfangen würde, würde 
ich sagen, guckt euch mal Beat 

306
00:14:14,960 --> 00:14:16,680
an. 
Ne, das ist das modernere wird 

307
00:14:16,680 --> 00:14:20,120
tatsächlich basieren noch auf 
dem CRA, weil das damals als wir

308
00:14:20,120 --> 00:14:22,440
angefangen haben The Shit war 
sag ich mal, ist jetzt auch 

309
00:14:22,440 --> 00:14:24,240
schon wieder n bisschen 
outdated, aber es ist auch nicht

310
00:14:24,240 --> 00:14:26,560
einfach, das kann ich jetzt auch
schon mal sagen, den Wandler 

311
00:14:26,560 --> 00:14:29,400
einfach auszutauschen das das 
kann mehr Schmerzen geben als 

312
00:14:29,400 --> 00:14:31,040
man denkt. 
Ja das vor allen Dingen bei 

313
00:14:31,040 --> 00:14:34,720
einer großen Software, OK. 
Hat das gepasst? 

314
00:14:34,720 --> 00:14:36,800
Mit dem Bildgerät hast du ne 
Vorstellung was was jetzt so 

315
00:14:36,800 --> 00:14:39,560
REACT ist und also React noch 
mal zu wiederholen, dass wir das

316
00:14:39,560 --> 00:14:42,240
abgeschlossen haben, ist quasi 
der der der Baukasten, die 

317
00:14:42,240 --> 00:14:46,000
Steine, die Tarnräder und der 
Bundler ist quasi so n Finisher 

318
00:14:46,000 --> 00:14:48,600
zum Schluss so. 
Das das hab ich schon alles 

319
00:14:48,600 --> 00:14:50,720
nachvollziehen können und was 
mir noch nicht ganz klar ist und

320
00:14:50,720 --> 00:14:52,640
ich weiß nicht, das ist 
vielleicht eher Grundlagen als 

321
00:14:52,640 --> 00:14:55,120
Deepdive. 
Was ist eigentlich dieses 

322
00:14:55,200 --> 00:14:59,080
grundlegende Problem was 
irgendwie React gelöst hat sag 

323
00:14:59,080 --> 00:15:01,280
ich mal als es damals eingeführt
wurde, weil deine Aussage war ja

324
00:15:01,280 --> 00:15:03,600
ja klar, waren Webseiten schon 
davor. 

325
00:15:04,080 --> 00:15:08,640
Interaktiv oder oder oder Web 
Produkte wie auch immer, aber 

326
00:15:08,640 --> 00:15:10,680
irgendwas muss ja dazu geführt 
haben, dass das, dass man gesagt

327
00:15:10,680 --> 00:15:12,880
hat, so, jetzt brauchen wir was 
neues, ja, und das muss ja 

328
00:15:12,880 --> 00:15:16,160
irgendwas grundlegend verändert 
haben, weil jetzt ist es ja 

329
00:15:16,160 --> 00:15:20,080
extrem verbreitet und überall im
Einsatz, also wo hat das 

330
00:15:20,080 --> 00:15:21,760
angesetzt, kannst du da noch was
zu sagen? 

331
00:15:22,480 --> 00:15:25,600
Ja, also ich meine es. 
Du hast halt das Problem, dass 

332
00:15:25,600 --> 00:15:28,720
du, dass du, wenn du wenn du 
Webanwendungen machst, die nicht

333
00:15:28,720 --> 00:15:30,880
nur statisch sind, dann hab ich 
ja schon gesagt, dann brauchst 

334
00:15:30,880 --> 00:15:33,360
du halt irgendwie Logik, ja. 
Wenn du das irgendwie anfängst, 

335
00:15:33,360 --> 00:15:36,560
Bild alleine, ohne ohne 
irgendwelche Struktur 

336
00:15:37,040 --> 00:15:40,000
aufzuschreiben und das groß 
wird, dann endest du 

337
00:15:40,000 --> 00:15:43,480
normalerweise im Chaos da und 
dem Spaghetti ja, weil weil es 

338
00:15:43,480 --> 00:15:48,200
ist nämlich auch so, dass dass 
Logik und also dass Komponenten,

339
00:15:48,200 --> 00:15:50,720
die du anzeigst und aber auch 
Logik sich ganz viel 

340
00:15:50,720 --> 00:15:53,600
wiederholen, ne. 
Also wieviel 1000 knöpfe hast du

341
00:15:53,600 --> 00:15:54,880
zum Beispiel auf einer 
Webanwendung? 

342
00:15:54,880 --> 00:15:57,680
Ja und wieviel 1000 mal machen 
die halt einfach wieder on click

343
00:15:57,680 --> 00:16:00,760
ja und wieviel 1000 mal willst 
du irgendwie wenn bei on click 

344
00:16:00,760 --> 00:16:02,880
irgendwas ausführen? 
Ne innere Logik ja irgendwas 

345
00:16:02,960 --> 00:16:06,960
machen und sofort ja und so ist 
es auch, da passt das Bild auch 

346
00:16:06,960 --> 00:16:09,040
wieder in Lego Technik du hast 
halt immer mal wieder nen 

347
00:16:09,040 --> 00:16:12,080
Zahnrad und n Getriebe ja und 
den Bagger hast du viele davon 

348
00:16:12,080 --> 00:16:15,240
ja und die sehen immer wieder 
gleich aus so und das ist das 

349
00:16:15,240 --> 00:16:19,520
Problem das React gelöst hat, es
hat das extrahiert den kleinsten

350
00:16:19,520 --> 00:16:22,240
gemeinsamen Vielfachen. 
Wie schaffe ich es, 

351
00:16:22,400 --> 00:16:26,440
Wiederverwendbarkeit und 
Organisation reinzubringen in 

352
00:16:26,440 --> 00:16:29,600
sowas komplexes, was Building, 
Blogs und Logik hat? 

353
00:16:29,600 --> 00:16:33,080
Ja und und und und auf Events 
reagieren muss ich aus 

354
00:16:33,080 --> 00:16:34,960
verschiedenen Quellen kommen 
können. 

355
00:16:34,960 --> 00:16:37,200
Ja und ich glaube das ist gar 
nicht so einfach, das ist 

356
00:16:37,200 --> 00:16:39,040
nämlich n. 
Ja man muss sich überlegen, was,

357
00:16:39,040 --> 00:16:41,040
was wollen wir denn machen ne 
ich geh das mal durch, ja wir 

358
00:16:41,040 --> 00:16:44,800
müssen nämlich Events von Usern 
empfangen und drauf reagieren ja

359
00:16:45,120 --> 00:16:47,360
und und das drauf reagieren 
heißt wir müssen da muss dann n 

360
00:16:47,360 --> 00:16:51,600
bestimmtes Stück Logik laufen. 
In dem in der React Anwendung 

361
00:16:51,600 --> 00:16:53,920
wenn ich den Knopf drücke mal 
zum Beispiel was in einer 

362
00:16:53,920 --> 00:16:57,120
anderen Farbe an oder irgendwas 
das ist die Logik, ja dann hab 

363
00:16:57,120 --> 00:17:00,960
ich im schlimmsten Fall noch nen
Backend, das denkt React noch 

364
00:17:00,960 --> 00:17:03,920
mal gar nicht mit, das ist nen 
Backend ist nicht nötig ja ne 

365
00:17:03,920 --> 00:17:06,920
Backend Interaktion mit für für 
ne React Anwendung aber das ist 

366
00:17:06,920 --> 00:17:08,599
ja meistens so, dass ich 
irgendwie noch n Backend 

367
00:17:08,599 --> 00:17:12,560
synchronisiere, dann dann muss 
ich quasi vom Backend aber auch 

368
00:17:12,560 --> 00:17:15,160
Events entgegennehmen wenn ich 
bin synchronisiert oder jemand 

369
00:17:15,160 --> 00:17:17,800
anders hat was gemacht und du 
musst synchronisieren also da 

370
00:17:17,800 --> 00:17:19,760
hab ich quasi auch wieder 
eventeingang. 

371
00:17:20,319 --> 00:17:24,560
Ja, und mein Bagger, aber nicht 
vom User, sondern vom vom 

372
00:17:24,560 --> 00:17:26,720
Backend. 
Das muss auch wieder Logik haben

373
00:17:27,119 --> 00:17:28,800
und dann muss ich alles 
synchronisieren und dann muss es

374
00:17:28,800 --> 00:17:31,800
auch noch schön angemalt werden.
So und das das hat React klar 

375
00:17:31,800 --> 00:17:34,880
gezogen und zwar in der Kern in 
dem Kern Design, Konzept der 

376
00:17:34,880 --> 00:17:37,920
Komponente, da steigen wir jetzt
mal ein mit dem Deepdive OK das.

377
00:17:38,320 --> 00:17:41,040
Heißt, man könnte vielleicht 
sagen, dass man vorher schon 

378
00:17:41,040 --> 00:17:44,400
genau beschreiben musste, wie 
etwas passiert. 

379
00:17:44,400 --> 00:17:46,640
Also. 
Das heißt, ist das zu ändern? 

380
00:17:46,640 --> 00:17:49,920
Hier ist was zu ändern, dann 
muss da noch mal irgendwie die 

381
00:17:49,920 --> 00:17:52,040
Farbe geändert werden oder 
sowas, das hab ich mal ändern 

382
00:17:52,040 --> 00:17:54,360
gesagt, aber du weißt was ich 
meine, jetzt kann man nur noch 

383
00:17:54,360 --> 00:17:58,080
eher sowas sagen wie was möchte 
ich eigentlich und es passiert 

384
00:17:58,080 --> 00:18:03,560
wie ja also von wie zu was. 
Das also das wichtigste Konzept,

385
00:18:03,560 --> 00:18:07,360
und da gehen wir jetzt drauf 
ein, ist das React bietet mir in

386
00:18:07,360 --> 00:18:10,880
seiner Bibliothek das die 
sogenannte Komponente und ne 

387
00:18:10,880 --> 00:18:14,320
Komponente ist was sehr weites, 
aber wir gehen das mal durch, 

388
00:18:14,320 --> 00:18:18,400
ja. 
Ne Komponente kann bestehen aus 

389
00:18:19,120 --> 00:18:23,360
aus darstellenden Blöcken, ne, 
also jetzt im Web gesprochen 

390
00:18:23,360 --> 00:18:25,440
einfach Sachen die die man 
anschauen kann, Knöpfe und so 

391
00:18:25,440 --> 00:18:29,840
weiter darstellende Elemente 
einer Logik einer Business Logik

392
00:18:30,400 --> 00:18:34,720
ja und optional quasi an 
Anleitung wie das auszusehen 

393
00:18:34,720 --> 00:18:35,920
hat. 
Also anmalung ja ich hab ja 

394
00:18:35,920 --> 00:18:39,560
gesagt die Steine sind alle grau
am Anfang ja so und das ist 

395
00:18:39,560 --> 00:18:43,200
wichtig und die Komponente kann 
aber einen beliebigen die kann 

396
00:18:43,200 --> 00:18:45,000
jetzt beliebig groß oder klein 
sein und. 

397
00:18:45,200 --> 00:18:47,600
Das ist das erste. 
Ja, also erstmal hab ich ja nur 

398
00:18:47,600 --> 00:18:49,680
die Steine locker liegen. 
Wenn ich jetzt die ersten 23 

399
00:18:49,680 --> 00:18:52,520
Steine aufeinander baue und baue
quasi quasi nen Minimodul von 

400
00:18:52,520 --> 00:18:55,120
dem Bagger n ganz kleinen Teil 
und so wenn du die wenn du mal 

401
00:18:55,120 --> 00:18:57,800
so durchgehst so diese Anleitung
kennt jeder von Legotechnik die 

402
00:18:57,800 --> 00:19:01,600
sind so ja im Prinzip könntest 
du sagen und und manchmal ist 

403
00:19:01,600 --> 00:19:03,680
das auch, sogar das gibt so 
ganze Kapitel ja aber manchmal 

404
00:19:03,680 --> 00:19:06,040
machst du ein 2 Seiten baust du 
irgendwas zusammen und dann wird

405
00:19:06,040 --> 00:19:09,000
noch mal so n Bild gezeigt von 
einem kleinen Teil was jetzt 

406
00:19:09,000 --> 00:19:10,720
fertig ist. 
Das legst du meistens zur Seite 

407
00:19:10,720 --> 00:19:13,040
und dann baust du was anderes so
ja du baust so. 

408
00:19:13,440 --> 00:19:15,840
Aus aus den kleinen Steinen 
baust du so kleine Module. 

409
00:19:15,840 --> 00:19:18,200
Ja, und wenn du die Module hast,
dann fängst du auf einmal an, 

410
00:19:18,200 --> 00:19:20,680
die Module ineinander zu kleben.
Ja und dann und manchmal geht 

411
00:19:20,680 --> 00:19:22,560
das auch erst, wenn du beide 
Module fertig hast. 

412
00:19:22,880 --> 00:19:24,720
Dann verbindest du die mit dem 
Schlauch und vorher hätte das 

413
00:19:24,720 --> 00:19:26,400
nicht geklappt oder irgend so 
was, weil die dann nicht bauen 

414
00:19:26,400 --> 00:19:28,040
kannst, weil der Schlauch 
andauernd rumhübelt und so 

415
00:19:28,040 --> 00:19:32,320
weiter ja das sind die 
Komponenten ja alles was ne 

416
00:19:32,320 --> 00:19:35,560
alles was ne Mixtur ist von 
Steinen die du aufbaust und 

417
00:19:35,560 --> 00:19:38,440
deren Zahnräder, das ist mal die
Logik ja oder die Hydraulik, die

418
00:19:38,440 --> 00:19:41,000
Schläuche, das ist nämlich mal 
die Logik, das kannst du ja 

419
00:19:41,000 --> 00:19:44,920
schon mal bauen n Stück. 
Betriebe mit n Stück Stein mit 

420
00:19:44,920 --> 00:19:46,800
bestimmten Farben, die du 
ausgewählt hast. 

421
00:19:47,200 --> 00:19:51,560
Das ist ne Komponente in React. 
Ja und die und jetzt jetzt gehen

422
00:19:51,560 --> 00:19:54,160
wir noch mal kurz, wir wollen ja
nicht nur hier über Legotechnik 

423
00:19:54,160 --> 00:19:58,240
schwadronieren, sondern auch 
über React, die die Steine jetzt

424
00:19:58,240 --> 00:20:00,960
noch mal ganz ehrlich gesagt, 
das sind im Prinzip die HTML 

425
00:20:00,960 --> 00:20:03,920
Bausteine, ja die HTML Elemente,
ja das sind ja die die Dinger 

426
00:20:03,920 --> 00:20:08,000
die die wir sehen können in der 
in der UI ja im Web ja. 

427
00:20:08,720 --> 00:20:12,440
Und die Farbe, das ist das CSS, 
ja die, die das das anmalen. 

428
00:20:12,440 --> 00:20:14,880
Ich kann ja sagen irgendwie n 
diff Element hat zum Beispiel 

429
00:20:14,880 --> 00:20:17,320
Background Color red, dann wird 
das ganze Viech halt, dann ist 

430
00:20:17,320 --> 00:20:22,120
es halt mit einem Rechteck was 
rot ist ja zackboom ne und in 

431
00:20:22,120 --> 00:20:25,480
einem React Komponente das ist 
wichtig wenn wenn es das hat, 

432
00:20:25,480 --> 00:20:29,400
das ist optional, es muss es 
kann auch nur Logik haben ne es 

433
00:20:29,400 --> 00:20:33,400
kann auch nur Steine haben, das 
ist auch wichtig zu verstehen ne

434
00:20:33,400 --> 00:20:35,840
es kann ne Komponente geben die 
hat keine Zahnräder und keine 

435
00:20:35,840 --> 00:20:37,440
Schläuche, das ist einfach nur n
Stück. 

436
00:20:37,840 --> 00:20:40,360
Was weiß ich. 
Die Schaufel mit dem Gelenk oder

437
00:20:40,360 --> 00:20:44,160
Irgendsowas ja zusammen ja dann,
dann kann das erstmal nichts 

438
00:20:44,160 --> 00:20:46,160
machen, weil da nichts dran ist.
So ist Test. 

439
00:20:46,160 --> 00:20:48,320
Irgendwie ist n statisches Teil,
aber es macht vielleicht 

440
00:20:48,320 --> 00:20:50,880
trotzdem Sinn das zu haben. 
Ja weil ich es irgendwie noch 

441
00:20:50,880 --> 00:20:52,760
mal verbrauche oder irgendsowas 
ja, die Schaufel war jetzt n 

442
00:20:52,760 --> 00:20:54,960
blödes Beispiel, hatten Bagger 
nur eine von ja aber was weiß 

443
00:20:54,960 --> 00:20:57,400
ich irgendwie. 
Keine Ahnung so n Kettenglied 

444
00:20:57,400 --> 00:20:59,080
oder Irgendsowas. 
Ja da brauch ich dann halt ganz 

445
00:20:59,080 --> 00:21:01,360
viele und so weiter das ist dann
halt das Kettenglied, ist 

446
00:21:01,360 --> 00:21:03,640
vielleicht auch schon mal aus 
aus mehreren Sachen gemacht, so 

447
00:21:03,640 --> 00:21:05,360
und dann brauch ich halt ganz 
viel, kannst du dir das 

448
00:21:05,360 --> 00:21:06,360
vorstellen? 
Ne ganz. 

449
00:21:06,360 --> 00:21:08,240
Gruppe, das sind ja so so 
Baugruppen aus 

450
00:21:08,240 --> 00:21:10,480
Einzelkomponenten. 
Richtig, man muss halt einmal 

451
00:21:10,480 --> 00:21:12,800
raffen, aber man muss halt 
einmal verstehen, und das ist 

452
00:21:12,800 --> 00:21:14,880
das grundlegendste Konzept, 
deswegen wiederhol ich das noch 

453
00:21:14,880 --> 00:21:19,280
mal in, in, in, in, in React und
das ist das coole und das machen

454
00:21:19,280 --> 00:21:22,640
andere Frameworks anders. 
Ja, in React ist ne Komponente 

455
00:21:23,120 --> 00:21:27,920
die Mixtur aus. 
Bausteinen, also nur sichtbaren 

456
00:21:27,920 --> 00:21:31,440
statischen Elementen und 
optional aber schon der Logik 

457
00:21:31,440 --> 00:21:34,400
mit drin. 
Ich Kapsel also in ein Modul, 

458
00:21:34,560 --> 00:21:40,000
wenn ich will, Logik, Bausteine 
und deren Farbe und jetzt kommt 

459
00:21:40,000 --> 00:21:42,880
der springende Punkt und jetzt 
bietet REACT ne ganz krasse 

460
00:21:42,880 --> 00:21:48,960
Möglichkeit diese Bausteine 
ineinander zu nesten ne, also 

461
00:21:48,960 --> 00:21:51,920
ich kann jetzt und und das ist 
ja das ist völlig willkürlich, 

462
00:21:51,920 --> 00:21:53,920
das ist jetzt im Ermessen des 
Entwicklers. 

463
00:21:54,240 --> 00:21:56,960
Was sind meine Komponenten? 
Ne Komponente ist tatsächlich 

464
00:21:56,960 --> 00:21:58,920
abgeschlossen, das sehe ich, das
ist auch ganz klar, das ist 

465
00:21:58,920 --> 00:22:01,840
nämlich ne nen Pfeil 
typischerweise n React JS ne 

466
00:22:01,840 --> 00:22:05,360
Komponente hat immer nen 
Pfeilnamen und ne Komponente 

467
00:22:05,360 --> 00:22:07,120
jetzt auch mal richtig 
gesprochen ist eigentlich nur ne

468
00:22:07,120 --> 00:22:10,560
Funktion, das ist ne javascript 
Funktion, die hat Parameter die 

469
00:22:10,560 --> 00:22:13,040
da reinkommen und die nennt man 
Properties sozusagen gleich noch

470
00:22:13,040 --> 00:22:16,960
was ja und in wenn die wenn 
diese wenn diese Komponente 

471
00:22:17,520 --> 00:22:22,120
anzeige Bausteine hat, dann 
können diese Bausteine jetzt 

472
00:22:22,120 --> 00:22:24,000
aber wieder andere Komponenten 
schon sein. 

473
00:22:24,480 --> 00:22:28,320
Das ist der Knackpunkt. 
Ja, du kannst Komponenten 

474
00:22:28,320 --> 00:22:32,640
komponieren, andere Komponenten 
in Komponenten haben ja und wild

475
00:22:32,640 --> 00:22:35,600
ja und das Bild ist, wenn man 
jetzt quasi von der Anleitung 

476
00:22:35,600 --> 00:22:38,280
rückwärts blättern würde, in der
in der in der Legotechnik, dann 

477
00:22:38,280 --> 00:22:41,040
hast du ja zum Schluss immer 
größere Sachen. 

478
00:22:41,040 --> 00:22:43,520
Ja, du fängst an mit vielen 
kleinen Modulchen und später 

479
00:22:43,520 --> 00:22:46,720
siehst du OK das das ist der 
ganze Unterbau von dem Kahn zum 

480
00:22:46,720 --> 00:22:49,200
Beispiel, ja, und der besteht 
jetzt aus diesen 15 Dingern, die

481
00:22:49,200 --> 00:22:51,120
ich gemacht hab, ja. 
Und jetzt? 

482
00:22:51,120 --> 00:22:54,720
Jetzt ist die React denke, ist 
der gesamte Unterbau von dem 

483
00:22:54,720 --> 00:22:59,000
Kran, ja nennen wir ihn 
unterbaupunkt JS wird in einem 

484
00:22:59,000 --> 00:23:02,880
Pfeil stehen, der halt, das 
heißt halt Unterbau JS ja und 

485
00:23:02,880 --> 00:23:05,200
wenn du wenn du da in diese 
Komponente reinguckst in diese 

486
00:23:05,200 --> 00:23:08,840
Bausteine, die wird die die wird
dann Bausteine laden und 

487
00:23:08,840 --> 00:23:11,600
benutzen die du vorher gebaut 
hast. 

488
00:23:12,080 --> 00:23:15,520
Das heißt du kannst in den in 
der Komponente, die der kleinste

489
00:23:15,520 --> 00:23:20,480
Baustein ist NHTML Element Input
Div Button oder Irgendsowas ja. 

490
00:23:20,720 --> 00:23:23,360
Da kannst du nicht mehr kleiner,
aber du kannst abstraktere 

491
00:23:23,360 --> 00:23:27,480
Bausteine du vorher definiert 
hast, einladen in ne Komponente 

492
00:23:27,480 --> 00:23:31,680
die generischer ist und das ist 
total wichtig, weil die Logik 

493
00:23:31,680 --> 00:23:34,000
miteinander spielen musst. 
Du musst, du musst nämlich jetzt

494
00:23:34,000 --> 00:23:37,680
sagen, der Unterbau, der braucht
ja ne Schnittstelle, du wirst ja

495
00:23:37,680 --> 00:23:40,040
die Zahnräder müssen ja 
ineinandergreifen, ne, du baust 

496
00:23:40,040 --> 00:23:42,400
ja ne kleine Komponente und wenn
das aber funktionieren sollen 

497
00:23:42,400 --> 00:23:44,360
und die Schläuche und so weiter 
du musst ja verbinden, ne, du 

498
00:23:44,360 --> 00:23:47,320
musst ja von oben. 
Von dem Gesamtunterbau deine 

499
00:23:47,320 --> 00:23:49,360
Schläuche weiterhangeln nach 
unten bis zur kleinsten 

500
00:23:49,360 --> 00:23:51,640
Komponente, dass wenn der wenn 
der Nutzer später irgendwie den 

501
00:23:51,640 --> 00:23:54,720
Knopf aufdreht, mach mal 
Schaufel hoch, Pneumatik an, ja,

502
00:23:55,040 --> 00:23:57,920
dass das auch alles läuft, ja 
vergisst du da n Schlauch 

503
00:23:58,080 --> 00:24:02,320
berührt sich da n Zahnrad nicht 
funktioniert das nicht so und 

504
00:24:02,320 --> 00:24:05,440
das ist die Kern, das ist die 
Kernlösung wo React quasi dem 

505
00:24:05,440 --> 00:24:09,280
Programmierer das bietet, dass 
wir Logik auch weiterreichen 

506
00:24:09,280 --> 00:24:12,320
können in geschachtelte 
Komponenten und das nennt sich 

507
00:24:12,320 --> 00:24:14,800
Properties ja. 
Das ist ganz wichtig. 

508
00:24:14,800 --> 00:24:16,920
Ja, das ist der Erste, das also 
das erste Konzept ist 

509
00:24:16,920 --> 00:24:20,240
Komponenten, das zweite Konzept 
ist, sind dann die Properties, 

510
00:24:20,240 --> 00:24:21,720
da gehen wir gleich, aber du 
hast ja was auf der Zunge 

511
00:24:21,720 --> 00:24:23,680
gehört. 
Ja, ich glaub ihr habt das schon

512
00:24:23,680 --> 00:24:24,480
verstanden. 
Nicht. 

513
00:24:24,480 --> 00:24:26,080
Mir ist nur wichtig, dass wir 
das auch noch mal auf ne echte 

514
00:24:26,080 --> 00:24:28,400
Webanwendung übertragen und 
nicht nur von Bagger reden. 

515
00:24:28,640 --> 00:24:30,400
Und ich als du es. 
Gerade erzählt hast, musste ich 

516
00:24:30,400 --> 00:24:31,800
die ganze Zeit an ihren Ikea 
denken. 

517
00:24:31,800 --> 00:24:34,280
Ja, das ist sehr ähnlich, würde 
auch passen, also so ne 

518
00:24:34,280 --> 00:24:36,800
Komponente zusammen paar 
Schubladen schiebst die dann in 

519
00:24:36,800 --> 00:24:38,960
den Schrank und der Schrank wird
vielleicht n Teil deiner Küche 

520
00:24:38,960 --> 00:24:43,000
und Pipapo also so so so ne Art 
aber in in irgendeiner 

521
00:24:43,000 --> 00:24:45,440
Anwendung. 
Stell ich mir, jetzt weiß ich 

522
00:24:45,440 --> 00:24:47,720
nicht irgendwas vor, ich, ich, 
ich löse irgendwas aus, ich 

523
00:24:47,720 --> 00:24:50,400
drück irgendwas und dann 
verändern sich ganz viele Dinge 

524
00:24:50,400 --> 00:24:53,840
gleichzeitig auf dem auf auf 
meine Anzeige und meine UI 

525
00:24:53,840 --> 00:24:55,120
gerade. 
Ja. 

526
00:24:55,600 --> 00:24:59,280
Weil es eben diese Kommunikation
unter den Komponenten gibt. 

527
00:24:59,280 --> 00:25:01,120
Ja, weil die hintereinander 
genestet sind, vielleicht so 

528
00:25:01,120 --> 00:25:02,880
irgendwie. 
Ist genau richtig. 

529
00:25:02,880 --> 00:25:05,760
Gerrit ist genau richtig und das
das das und das nehmen wir noch 

530
00:25:05,760 --> 00:25:07,040
alles genau auseinander wie das 
ist. 

531
00:25:07,440 --> 00:25:09,120
Tatsächlich ist das nämlich 
wichtig. 

532
00:25:09,680 --> 00:25:11,760
Es hat ne Hierarchie, wie du 
schon gesagt hast. 

533
00:25:11,760 --> 00:25:14,240
Ob du jetzt Ikea nimmst oder 
oder mein Beispiel mit dem 

534
00:25:14,240 --> 00:25:16,600
Bagger. 
Und wenn du jetzt was drauf 

535
00:25:16,600 --> 00:25:20,360
drückst, dann verändern sich 
viele Sachen, aber nur die, die 

536
00:25:20,360 --> 00:25:23,840
in der Hierarchie durchfließen 
von abstrakter Komponente zu 

537
00:25:23,840 --> 00:25:26,680
weniger abstrakter bis zur bis 
zur letzten Komponente runter. 

538
00:25:26,680 --> 00:25:29,600
Man spricht auch von einem Baum 
und jetzt noch mal wirklich das 

539
00:25:29,600 --> 00:25:33,360
Beispiel, das ist der Dom ja ne 
Webseite wenn du HTML siehst ist

540
00:25:33,360 --> 00:25:36,440
genauso aufgebaut, du hast 
Elemente die du hier einander 

541
00:25:36,440 --> 00:25:39,040
nestest. 
Ja ganz außen ist das HTML Tag. 

542
00:25:39,360 --> 00:25:42,680
Und diese Texte gehen ja auf und
schließen sich ja und innerhalb 

543
00:25:42,680 --> 00:25:44,600
der Text machst du wieder Text 
und wieder Text. 

544
00:25:44,600 --> 00:25:48,960
Ja, und das realisiert quasi, 
das ist das Ergebnis davon, du 

545
00:25:48,960 --> 00:25:52,600
programmierst das in javascript 
diesen Komponenten und was e Act

546
00:25:52,600 --> 00:25:55,840
daraus produziert, ist dieser 
virtuelle Dom, wie man es auch 

547
00:25:55,840 --> 00:26:00,400
nennt, das ist im Prinzip ne 
HTML Seite, die genau das macht,

548
00:26:00,400 --> 00:26:03,840
ja und die schickt halt wenn du 
auf on Klick n Button klickst 

549
00:26:04,240 --> 00:26:07,480
und du musst quasi ganz viele 
Sachen verändern, dann musst du 

550
00:26:07,480 --> 00:26:09,240
deine. 
Wenn du es jetzt erst mal ganz 

551
00:26:09,240 --> 00:26:11,520
naiv machst, ich sag gleich, was
es noch für Möglichkeiten gibt, 

552
00:26:12,080 --> 00:26:14,320
aber dann musst du deine 
Komponenten, die alle jetzt sich

553
00:26:14,320 --> 00:26:17,600
jetzt verändern sollen, 
ineinander genestet haben und 

554
00:26:17,600 --> 00:26:20,200
diesen diesen State Change, was 
es ja ist. 

555
00:26:20,200 --> 00:26:22,960
Also die Zustandsveränderung ich
klicke jetzt, was ja 

556
00:26:23,200 --> 00:26:25,600
durchreichend zu allen 
Komponenten, dass die das auch 

557
00:26:25,600 --> 00:26:28,400
merken, ja weil du die 
ineinander komponiert hast. 

558
00:26:28,400 --> 00:26:30,880
Ja, und das machst du, indem du 
Properties weitergibst. 

559
00:26:30,880 --> 00:26:34,200
Ja, Properties sind einfach 
Eigenschaften, ne die die werden

560
00:26:34,200 --> 00:26:35,720
dann einfach weiter 
runtergegeben. 

561
00:26:36,160 --> 00:26:39,240
Kann jetzt jedes. 
Element auf der untersten Ebene,

562
00:26:39,240 --> 00:26:42,080
sagen wir mal also die kleinsten
Komponenten, die 

563
00:26:42,080 --> 00:26:45,480
Klassenbausteine können, die 
Teil von mehreren solcher 

564
00:26:45,480 --> 00:26:49,600
Hierarchien sein. 
Ja OK, müssen Sie also, also was

565
00:26:49,600 --> 00:26:51,120
heißt das, müssen Sie ja mal, 
macht ja Sinn o. 

566
00:26:51,120 --> 00:26:53,360
K genau das macht Sinn, das 
kannst du machen. 

567
00:26:53,840 --> 00:26:57,360
Das das ist genauso. 
Ja, also es ist so, dass die 

568
00:26:57,360 --> 00:27:00,240
Komponenten so n bisschen, also 
wenn du die als als als Pfeil 

569
00:27:00,240 --> 00:27:02,520
hinschreibst, dann sind die wie 
ne klasse, wir hatten ja auch 

570
00:27:02,520 --> 00:27:04,560
schon mal Klassen und Distanzen 
und so weiter du kannst 

571
00:27:04,560 --> 00:27:07,720
Komponenten. 
Mehrfach einsetzen und die 

572
00:27:07,720 --> 00:27:10,760
behalten aber ihren eigenen, die
haben ihre eigene Vorstellung 

573
00:27:10,760 --> 00:27:14,120
von ihrem State. 
Ja so und ich, ich mach das noch

574
00:27:14,120 --> 00:27:15,680
mal kurz an dem Bagger Beispiel 
noch mal. 

575
00:27:15,680 --> 00:27:19,600
Klar es ist so wenn du wenn du 
jetzt den Bagger lädst quasi 

576
00:27:19,600 --> 00:27:23,080
sagen wir mal der User klickt im
Browser auf unsere auf unsere 

577
00:27:23,080 --> 00:27:26,920
Bagger Web application ne so 
dann hängt der Bagger schlapp so

578
00:27:26,920 --> 00:27:29,680
der hat nen Default state ne 
hängt schlapp, Schaufel hängt 

579
00:27:29,680 --> 00:27:32,040
runter das Ding ist irgendwie 
gerade ausgerichtet irgendsowas 

580
00:27:32,040 --> 00:27:35,280
ja und wenn du jetzt das erste 
Mal was machst mit dem Bagger. 

581
00:27:35,720 --> 00:27:37,760
Zum Beispiel Schaufel hochfahren
oder irgend so was. 

582
00:27:37,920 --> 00:27:40,960
Dann hast du ja dann produzierst
du ja von außen erstmal ein 

583
00:27:40,960 --> 00:27:45,120
Event und dann ergibt sich eine 
Zustandsänderung und zwar in 

584
00:27:45,120 --> 00:27:47,280
sehr vielen Komponenten, 
möglicherweise ja, weil das 

585
00:27:47,280 --> 00:27:49,400
Hochfahren von der Schaufel ist 
ja schon mal ein komplexes Ding,

586
00:27:49,400 --> 00:27:51,200
ja weil was weiß ich, was da 
alles passieren muss. 

587
00:27:51,200 --> 00:27:54,000
Ja, bestimmte Zylinder müssen 
etwas rausfahren, aber es ist 

588
00:27:54,000 --> 00:27:56,000
nicht nur einer, sondern es sind
vielleicht 3, weil die Schaufel 

589
00:27:56,000 --> 00:27:59,920
dreigelenkig ist und so weiter 
und diese Zustandsänderungen, 

590
00:27:59,920 --> 00:28:02,800
die müssen quasi dann 
gespeichert werden. 

591
00:28:03,520 --> 00:28:06,880
Also der State muss erhalten 
bleiben in in in den 

592
00:28:06,880 --> 00:28:08,600
Komponenten. 
Ja, die müssen wissen was war 

593
00:28:08,600 --> 00:28:11,520
mein letzter Zustand. 
Ja, denn ich hab ja vorher 

594
00:28:11,520 --> 00:28:13,280
gesagt sind alles nur 
Funktionen, früher war das zum 

595
00:28:13,280 --> 00:28:16,280
Beispiel nicht so, das war 
früher war waren die waren die 

596
00:28:16,280 --> 00:28:18,560
Komponenten, das kann man auch 
noch mal auf der Tonspur sagen, 

597
00:28:18,560 --> 00:28:23,520
Klassen von javascript und die 
Klassen wurden dann instanziert 

598
00:28:23,520 --> 00:28:25,520
und die Instanzen haben immer 
die Eigenschaften, dass sie sich

599
00:28:25,520 --> 00:28:27,600
ihren Zustand merken können, ja 
die haben halt immer n 

600
00:28:27,600 --> 00:28:30,400
bestimmten State, ja den kann 
sich dann verändern ne also ich 

601
00:28:30,400 --> 00:28:32,560
sag dann die Schaufeln n 
bisschen hoch. 

602
00:28:32,840 --> 00:28:34,880
Dann ist es der Zustand, dann 
kann ich den wieder verändern, 

603
00:28:35,040 --> 00:28:37,760
dann kann ich quasi, und das ist
wichtig, ich muss ja relativ von

604
00:28:37,760 --> 00:28:40,000
dem wo ich bin, ne Änderung 
durchziehen. 

605
00:28:40,040 --> 00:28:44,000
Ja, im Code ist das immer 
realisiert, normalerweise über 

606
00:28:44,000 --> 00:28:46,400
Instanzen, das ist so, wenn man 
objektorientiert denkt, ist es 

607
00:28:46,400 --> 00:28:49,240
das, dann hab ich, dann hab ich 
den Zustand in Instanzen 

608
00:28:49,240 --> 00:28:52,560
gespeichert, so war es auch bei 
React, früher hat man 

609
00:28:52,560 --> 00:28:55,680
festgestellt, dass gar nicht so 
cool aus Performancegründen und 

610
00:28:55,680 --> 00:28:58,080
aus anderen Gründen und jetzt 
sind das halt Funktionen und ich

611
00:28:58,080 --> 00:29:01,200
muss diesen Zustand über 
sogenannte Hooks, da sag ich 

612
00:29:01,200 --> 00:29:04,000
gleich noch mal was zu. 
Quasi in diese Funktion mit 

613
00:29:04,000 --> 00:29:07,200
reinbringen, weil Funktionen an 
sich sind pur und zustandslos ja

614
00:29:07,200 --> 00:29:08,960
das ist ja dann so, dass sie 
jedes Mal wieder vergessen, 

615
00:29:08,960 --> 00:29:11,520
hängt der Kran wieder schlapper,
da war er wieder schlapper. 

616
00:29:12,480 --> 00:29:14,720
So, jetzt hab ich jetzt hab ich 
die die die die Properties 

617
00:29:14,720 --> 00:29:17,680
genannt, also sind die diese 
Properties sind quasi die 

618
00:29:17,680 --> 00:29:22,240
Zustandsbeschreibungen und 
Änderungen die ich weitergebe in

619
00:29:22,240 --> 00:29:25,200
die in die unterliegenden 
Komponenten, das ist Prinzip die

620
00:29:25,200 --> 00:29:28,920
Schnittstelle sowie wie ne Rest 
API eine Schnittstelle ist für 

621
00:29:28,920 --> 00:29:31,440
Webkomponenten sind die 
Properties. 

622
00:29:31,920 --> 00:29:33,760
Jetzt mal im ganz Kleinen in so 
einer Projektanwendung die 

623
00:29:33,760 --> 00:29:36,240
Schnittstelle zwischen meinen 
Komponenten, die ich gesagt hab,

624
00:29:36,480 --> 00:29:38,320
ja. 
Und die Properties sind 

625
00:29:39,120 --> 00:29:42,640
vermutlich jetzt individuell pro
Element oder pro Komponente. 

626
00:29:43,200 --> 00:29:47,520
Also was ich ich kann halt weiß 
ich nicht true of false sein als

627
00:29:47,520 --> 00:29:49,920
property oder ich kann. 
Nee, die Properties sind immer 

628
00:29:49,920 --> 00:29:53,120
Key Value Pairs, ne, die sind ja
nur true false, die sagen zum 

629
00:29:53,120 --> 00:29:56,080
Beispiel irgendwie was weiß ich 
selected oder irgendsowas ja 

630
00:29:56,080 --> 00:29:58,760
wenn du ne ich bin ausgewählt 
oder nicht, da könntest Du sagen

631
00:29:58,760 --> 00:30:02,640
selected und vom Typ bulien ne. 
Und die Properties werden 

632
00:30:02,640 --> 00:30:04,240
definiert von der Komponente 
selber. 

633
00:30:04,240 --> 00:30:07,920
Also wenn hier zum Beispiel die 
Komponente Checkbox hätte ja die

634
00:30:07,920 --> 00:30:10,480
macht nichts anderes als ne 
Checkbox Hinzumalen, dann könnte

635
00:30:10,480 --> 00:30:14,280
die als Schnittstelle haben 
selected und dann und wenn die 

636
00:30:14,280 --> 00:30:17,240
Oberliegende sagt Selected 
false, die gibt das tatsächlich 

637
00:30:17,240 --> 00:30:19,640
auch so rein, die sagt dann 
selected als Objekt selected 

638
00:30:19,640 --> 00:30:22,880
Doppelpunkt false ja die 
überliegende Komponente sagt, 

639
00:30:22,880 --> 00:30:25,280
die muss gefälligst jetzt 
deselektiert werden, da sagt die

640
00:30:25,280 --> 00:30:29,200
Selected false, dann macht die 
Komponente Checkbox. 

641
00:30:29,440 --> 00:30:31,400
Ah, krieg, ich krieg ich 
selected falls ich mach meinen 

642
00:30:31,400 --> 00:30:33,800
Haken da raus. 
Ja, sagt die obere Selected 

643
00:30:33,800 --> 00:30:36,480
True, da macht ihr den Haken da 
wieder rein und der bleibt da so

644
00:30:36,480 --> 00:30:39,680
lange drinne bis bis sie wieder 
ne neue Ansage kriegt. 

645
00:30:39,680 --> 00:30:43,320
Ja und das und jetzt ist es 
wichtig, dass wenn es gibt, 

646
00:30:43,320 --> 00:30:45,600
nämlich also die Komponenten hab
ich ja gesagt, ich hab 2 Dinger,

647
00:30:45,600 --> 00:30:48,400
die haben ja die Logik und und 
das Angemale ja also also die 

648
00:30:48,400 --> 00:30:51,840
Box quasi einfach nur von der 
Checkbox, die ist ja immer da, 

649
00:30:51,840 --> 00:30:54,800
ja. 
Und die muss aber re rendert 

650
00:30:54,800 --> 00:30:55,880
werden. 
Das ist jetzt auch noch mal so n

651
00:30:55,880 --> 00:30:57,920
Konzept, wenn wenn man so mit 
React Leuten spricht die die 

652
00:30:57,920 --> 00:31:00,080
sprechen immer von re rendering.
Ja wir müssen gucken dass es re 

653
00:31:00,080 --> 00:31:01,880
rendering hier ist. 
Das ist richtig re rendert und 

654
00:31:01,880 --> 00:31:04,960
so weiter und sofort ja, denn 
das ist jetzt aber auch noch n 

655
00:31:04,960 --> 00:31:08,000
wichtiger Punkt ja denn wenn du 
oben die Property änderst auf 

656
00:31:08,240 --> 00:31:12,240
True, dann wird zwar die Logik 
in dem Java Script sagen, ja ja 

657
00:31:12,240 --> 00:31:15,120
das soll jetzt mal gerendert, 
also das ist jetzt True, die 

658
00:31:15,120 --> 00:31:19,920
Checkbox ist eigentlich angehakt
wenn aber der React Prozess 

659
00:31:19,920 --> 00:31:23,760
jetzt nicht den virtuellen Dom. 
Wo ich vorhin vorhin gesprochen 

660
00:31:23,760 --> 00:31:26,200
hab, ne, also quasi die die 
Webseite die quasi simuliert 

661
00:31:26,200 --> 00:31:27,600
wird und dem Browser 
hingeklatscht wird, so 

662
00:31:27,600 --> 00:31:28,880
funktioniert das ja die ganze 
Zeit. 

663
00:31:28,880 --> 00:31:32,160
Ja das sag ich grad, dann mach 
ich grad noch mal kurz ne 

664
00:31:32,160 --> 00:31:33,640
Auszeit dazu. 
Ja, also wie sieht das aus 

665
00:31:33,640 --> 00:31:36,080
normal aber in einem ganz alten 
System, da hat der Server uns ne

666
00:31:36,080 --> 00:31:39,640
fertige HTML Seite hin gepupst 
und der Browser hat ja einmal 

667
00:31:39,640 --> 00:31:41,560
hin gerendert, dann war der 
Browser fertig, da kommt der 

668
00:31:41,560 --> 00:31:43,280
auch nicht in Schweiß, der 
kriegt einmal vom Server das 

669
00:31:43,280 --> 00:31:47,120
Ding und zeigt das an, bei React
ist es im Prinzip so, da läuft 

670
00:31:47,120 --> 00:31:51,360
ja das javascript im Browser im 
Client und der simuliert nen 

671
00:31:51,360 --> 00:31:54,800
Server selber. 
Und die ganze Zeit also mit mit 

672
00:31:54,880 --> 00:31:57,040
unglaublich viel hoher Frequenz,
zum Beispiel. 

673
00:31:57,040 --> 00:31:59,800
Ja, das kann, das kann 
irgendwie, das kann 60 Hertz 

674
00:31:59,800 --> 00:32:02,080
sein oder irgendwas so schnell 
wie dein, wie dein CPU, das halt

675
00:32:02,080 --> 00:32:05,120
so ab kann, wird halt ständig 
diese ganze Webseite unterm 

676
00:32:05,120 --> 00:32:08,920
Arsch vom Browser neu gebaut. 
Ja deswegen ist das reaktiv, 

677
00:32:08,920 --> 00:32:12,880
deswegen ist das so schnell ja 
es es tut so, es ist deswegen 

678
00:32:12,880 --> 00:32:16,560
auch virtueller Dom ja weil weil
es virtualisiert wird als hätte 

679
00:32:16,560 --> 00:32:20,400
ich den Server ja React React 
beamt den Server lokal auf dem 

680
00:32:20,800 --> 00:32:24,160
Browser ja. 
Und es muss aber, damit du was 

681
00:32:24,160 --> 00:32:27,360
siehst, tatsächlich auch das neu
rendern, den virtuellen Dom. 

682
00:32:27,360 --> 00:32:30,720
Ja, wenn jetzt die Select von 
der Logik auf True steht, dann 

683
00:32:30,720 --> 00:32:35,320
muss jetzt neu hingemalt werden 
vom Projekt, dass die dass 

684
00:32:35,320 --> 00:32:39,440
tatsächlich das HTML Element 
auch auf Selected steht, das tut

685
00:32:39,440 --> 00:32:41,680
es ja, das kannst du auch 
beobachten mit den ganzen Dev 

686
00:32:41,680 --> 00:32:45,200
Tools und so weiter ja es muss 
also einmal Zack diesen diesen 

687
00:32:45,200 --> 00:32:47,040
diesen virtuellen Dom 
austauschen, ja. 

688
00:32:47,400 --> 00:32:49,560
Es tauscht tatsächlich nicht den
ganzen Dom aus, und das sind die

689
00:32:49,560 --> 00:32:51,560
ganzen Optimierungen, die es da 
gibt, sondern, und deswegen ist 

690
00:32:51,560 --> 00:32:54,160
es auch schnell, es muss nicht 
die ganze Seite laden, sondern 

691
00:32:54,160 --> 00:32:57,280
es tauscht tatsächlich nur 
Klick, klick dieses Element aus 

692
00:32:57,280 --> 00:33:00,200
an der Stelle in der Hierarchie 
von diesen, von diesen 

693
00:33:00,200 --> 00:33:02,720
Komponenten, die da reingemacht 
sind, ja, zack, zack und der 

694
00:33:02,720 --> 00:33:05,760
Browser merkt, Oh guck mal 
selected, jetzt muss ich den 

695
00:33:05,760 --> 00:33:09,200
Haken dran malen und dann siehst
du es, so funktioniert das ja 

696
00:33:10,160 --> 00:33:12,520
OK. 
So, und wenn wir das verstanden 

697
00:33:12,520 --> 00:33:14,880
haben, dann sind die Properties,
also die Schnittstellen zwischen

698
00:33:14,880 --> 00:33:17,240
den Komponenten und die fließen,
und das ist n Problem, die 

699
00:33:17,240 --> 00:33:20,480
fließen halt nur in die Richtung
von oben nach unten durch, ja 

700
00:33:20,720 --> 00:33:22,640
oder auf der Seite, das ist 
quasi nen Baum. 

701
00:33:22,640 --> 00:33:25,760
Ja kannst du dich vorstellen wie
n Baum oben drückst du nen Hebel

702
00:33:26,280 --> 00:33:28,760
n globalen Hebel, der wertet in 
der Logik aus, das muss ich 

703
00:33:28,760 --> 00:33:31,000
alles machen ja ich muss zum 
Beispiel bei der Komponente muss

704
00:33:31,000 --> 00:33:33,200
ich n Haken dran machen weil die
Komponente will ne andere Farbe 

705
00:33:33,200 --> 00:33:35,360
haben und so weiter und dann 
fließt das alles so runter, alle

706
00:33:35,360 --> 00:33:38,000
Properties werden verändert. 
Von allen Komponenten, die 

707
00:33:38,000 --> 00:33:40,000
Properties verändert haben, wird
da virtuell Dom wieder neu 

708
00:33:40,000 --> 00:33:41,800
gebaut und dann klack, klack, 
klack, klack, Klack krieg ich 

709
00:33:41,800 --> 00:33:43,520
das alles angezeigt, ja, 
wunderbar. 

710
00:33:43,600 --> 00:33:47,120
Ja, was ist das Problem? 
Das Problem ist, manchmal hast 

711
00:33:47,120 --> 00:33:50,720
du so Änderungen. 
Also du hast im Code ne feste 

712
00:33:50,720 --> 00:33:52,880
Verdrahtung von deinen 
Komponenten wie die Hierarchie 

713
00:33:52,880 --> 00:33:55,920
ist. 
Und jetzt hast du sowas wie ich 

714
00:33:55,920 --> 00:33:57,520
will. 
Das Theming von Light auf Dark 

715
00:33:57,520 --> 00:34:01,760
schalten und das ist ne krasse 
Sache, weil jede verdammte 

716
00:34:01,760 --> 00:34:04,800
Komponente selbst deine 
Checkbox, ja die kann halt jetzt

717
00:34:04,800 --> 00:34:06,800
nicht mehr einen kleinen weißen 
Background zeichnen. 

718
00:34:07,000 --> 00:34:09,520
Sondern die muss jetzt irgendwie
auf einmal so n so n leicht 

719
00:34:09,520 --> 00:34:12,560
hellen Hintergrund zeichnen und 
der Haken da drin muss auf 

720
00:34:12,560 --> 00:34:14,159
einmal weiß werden, nicht mehr 
schwarz. 

721
00:34:14,639 --> 00:34:16,560
Muss das denn ne weitere 
Property sein, die dann jetzt 

722
00:34:16,560 --> 00:34:19,239
die Checkbox hat? 
Ja, das wenn man das jetzt, wenn

723
00:34:19,239 --> 00:34:21,280
man jetzt was nicht hätte, was 
ich jetzt gleich erkläre, was 

724
00:34:21,280 --> 00:34:25,040
für Act hat, dann müsste ich, 
wenn ich das Umschalte, dann 

725
00:34:25,040 --> 00:34:29,120
müssten alle Komponenten die 
Property seaming oder nee oder 

726
00:34:29,120 --> 00:34:32,480
light oder Mode, sagen wir mal 
Mode ja in Blintieren der 

727
00:34:32,480 --> 00:34:35,679
entweder light oder Dark ist ja.
So und jetzt jetzt jetzt kannst 

728
00:34:35,679 --> 00:34:37,600
du dir ja vorstellen, dann 
kriegst du ja als Entwickler ne 

729
00:34:37,600 --> 00:34:40,159
Plug. 
Ja, also da musst du ja was muss

730
00:34:40,159 --> 00:34:43,520
die Checkbox Light oder Dark 
noch verstehen müssen da unten 

731
00:34:43,520 --> 00:34:46,639
drinne, ja und dann muss ich das
alles weiterreichen, ja dann 

732
00:34:46,639 --> 00:34:49,600
kriegt dann Krieg, dann krieg 
ich ja immer mehr Properties, 

733
00:34:49,600 --> 00:34:52,159
dann sind die Properties pro 
Komponente werden immer dicker 

734
00:34:52,159 --> 00:34:54,280
und ich muss immer weiter 
runterleiten das ist wieso n 

735
00:34:54,280 --> 00:34:57,120
Gewitter quer durch die 
Komponenten ja und ich muss es 

736
00:34:57,120 --> 00:35:01,040
ganz oben anfangen, dass es auch
überall verstanden wird ja und 

737
00:35:01,040 --> 00:35:02,720
dann gibt es aber vielleicht 
Komponenten. 

738
00:35:02,840 --> 00:35:05,200
Denen ist da scheißegal ob Light
oder Dark ist, weil die machen. 

739
00:35:05,200 --> 00:35:07,480
Zum Beispiel hab ich ganz am 
Anfang gesagt, nur ne Logik, die

740
00:35:07,480 --> 00:35:10,320
malen nichts an. 
Ja so und die müssen dann aber 

741
00:35:10,320 --> 00:35:12,280
die hängen aber trotzdem 
irgendwo mit in dieser in diesem

742
00:35:12,280 --> 00:35:14,640
diesem Baum und dazwischen ne 
und die müssen dann den Krams 

743
00:35:14,640 --> 00:35:16,720
aber weiterreichen obwohl sie es
selber gar nicht brauchen, nur 

744
00:35:16,720 --> 00:35:18,840
weil die Schnittstelle darunter 
das irgendwie wieder braucht und

745
00:35:18,840 --> 00:35:22,880
so ja merkt man das ist Kacke ja
gibt es hat hat er vielleicht 

746
00:35:22,880 --> 00:35:25,360
auch gemerkt, ist Kacke ja so 
gibt es da halt n zweites 

747
00:35:25,360 --> 00:35:28,480
Konzept wie ich quasi Zustände 
verteilen kann nennt sich 

748
00:35:28,480 --> 00:35:33,200
Kontext Kontext. 
Kontext ist quasi ne Abkürzung. 

749
00:35:33,200 --> 00:35:37,440
Ja Kontext schnall ich quasi 
drumherum um ne ganze 

750
00:35:37,440 --> 00:35:41,360
Hierarchieebene, im Notfall um 
die ganze Anwendung bei bei 

751
00:35:41,360 --> 00:35:43,640
sowas wie Light Dark mach ich 
das meistens ganz außen 

752
00:35:43,640 --> 00:35:45,880
drumherum. 
Ja, also ist quasi die 

753
00:35:45,880 --> 00:35:47,720
abstrakteste Komponente sag ich 
mal. 

754
00:35:47,720 --> 00:35:52,400
Ist keine Komponente, ist halt 
Kontext und und den Kontext ich 

755
00:35:52,400 --> 00:35:54,800
kann mich quasi in den 
Komponenten wo ich es brauche, 

756
00:35:54,800 --> 00:35:57,760
die können sich an den Kontext 
subscriben ja der Kontext ist 

757
00:35:57,760 --> 00:35:59,840
jetzt hat jetzt auch diese 
Parameter Mode. 

758
00:36:00,480 --> 00:36:01,760
Wer kann jetzt sagen Light und 
Dark? 

759
00:36:02,000 --> 00:36:06,240
Wenn jetzt meine Checkbox das 
braucht, dann sagt sie, ich 

760
00:36:06,400 --> 00:36:09,120
subscribe mich und das mache ich
in der Komponente gegen den 

761
00:36:09,120 --> 00:36:12,520
Kontext theming oder wie auch 
immer wir nennen ja oder Light 

762
00:36:12,520 --> 00:36:14,920
Dark Switch oder Irgendsowas ja 
das wäre auch ne Klasse, ja die 

763
00:36:14,920 --> 00:36:18,400
wird irgendwo beschrieben ne und
wenn der Kontext sich jetzt 

764
00:36:18,400 --> 00:36:21,720
ändert und das ist n Knopf ja 
den drückst du ja einmal zentral

765
00:36:21,720 --> 00:36:25,320
in der UI irgendwo, ja dann. 
Dann kannst du bei jeder 

766
00:36:25,320 --> 00:36:27,600
Komponente sagen, ja, ich bin 
dran interessiert an diesen 

767
00:36:27,600 --> 00:36:29,680
Änderungen und jetzt, weil ich 
muss dann tatsächlich mich 

768
00:36:29,680 --> 00:36:32,480
irgendwie in irgendwie rendern, 
ja, und dann dann ist einfach 

769
00:36:32,480 --> 00:36:34,480
mal diese ganze Hierarchie 
aufgelöst, die du sonst hast. 

770
00:36:34,480 --> 00:36:36,560
Mit mit Schachtelung von 
Komponenten, sondern du kannst 

771
00:36:36,560 --> 00:36:39,240
quer durchs Beet sagen, ich bin 
interessiert, ich bin 

772
00:36:39,240 --> 00:36:41,760
interessiert dich auch, ja, und 
wenn du es dann änderst, dann 

773
00:36:41,760 --> 00:36:44,440
machen die Flubble und alle 
haben sich neu hingezeichnet und

774
00:36:44,440 --> 00:36:46,560
so funktioniert es auch in 
Wirklichkeit, so funktioniert 

775
00:36:46,560 --> 00:36:47,920
Seeming zum Beispiel weil das 
ist ne. 

776
00:36:48,600 --> 00:36:50,720
Das ist halt so ne Änderung 
jetzt beim Bagger. 

777
00:36:50,720 --> 00:36:52,840
Ja da könnt man sagen, OK, da 
gibt es oben den Knopf, sagen 

778
00:36:52,840 --> 00:36:54,840
wir mal unser Bagger hat ganz 
viel LED Beleuchtung, die Steine

779
00:36:54,840 --> 00:36:57,200
sind nicht nur hier so wie wie 
wie wie normalerweise lego 

780
00:36:57,200 --> 00:37:00,160
Technik, aber die haben quasi 
LEDS da drin ja und der Bagger 

781
00:37:00,160 --> 00:37:03,280
leuchtet halt rot ja und dann 
drückst du oben auf den Knopf 

782
00:37:03,280 --> 00:37:06,320
und dann wird da halt der ganze 
Bagger erstmal grün ja das sind 

783
00:37:06,320 --> 00:37:08,400
ja auch nicht alle Steine die 
leuchten können so ja aber 

784
00:37:08,400 --> 00:37:10,440
irgendwo sind irgendwelche 
Steine die sind halt grün, die 

785
00:37:10,440 --> 00:37:12,800
haben miteinander nichts zu tun,
ja weil irgendwie unten die in 

786
00:37:12,800 --> 00:37:15,280
der Kette ist irgendwie was grün
ist oben im im Träger und so 

787
00:37:15,280 --> 00:37:17,880
weiter so ja. 
Und aber damit das funktioniert,

788
00:37:17,880 --> 00:37:20,760
gibt es quasi Kabelverteilung in
diese einzelnen Dinger und die 

789
00:37:20,760 --> 00:37:22,560
müssen nichts miteinander zu tun
haben, die müssen nicht das 

790
00:37:22,560 --> 00:37:24,680
normale Interface der 
Komponenten haben, das nennt 

791
00:37:24,680 --> 00:37:30,000
sich Kontext, damit muss man 
sparsam umgehen, weil hatten wir

792
00:37:30,000 --> 00:37:35,560
gerade geredet, weil weil dann 
ganz viel rendern muss, da das, 

793
00:37:35,560 --> 00:37:37,160
manchmal hat man das nicht mehr 
so auf dem Schirm als 

794
00:37:37,160 --> 00:37:39,720
Entwicklung, man hatte n großes 
Ding, also wenn sich der Kontext

795
00:37:39,720 --> 00:37:43,040
ändert, dann muss das ist teuer 
für React, weil aber auf einmal 

796
00:37:43,040 --> 00:37:46,800
auf ganz vielen Ebenen. 
Komponenten neu gerendert werden

797
00:37:47,040 --> 00:37:50,080
und wenn Komponenten neu 
gerendert werden, dann müssen 

798
00:37:50,080 --> 00:37:53,760
alle Unterkomponenten neu 
gerendert werden, weil das geht 

799
00:37:53,760 --> 00:37:56,720
nach Regeln in React. 
Aber es muss ja quasi wenn du ne

800
00:37:56,720 --> 00:37:59,440
abhängige Komponente hast von 
einer überliegenden Komponente, 

801
00:37:59,440 --> 00:38:01,600
dann musst du die im Notfall 
auch sich wieder anpassen und so

802
00:38:01,600 --> 00:38:05,320
weiter das heißt man muss damit 
n bisschen aufpassen ja aber der

803
00:38:05,320 --> 00:38:07,840
ist. 
So nutzt man dieses, dieses 

804
00:38:07,840 --> 00:38:10,400
dieses context Feature, um 
tatsächlich jetzt auch. 

805
00:38:11,120 --> 00:38:14,920
Styling zu vergeben oder oder zu
implementieren oder ist das 

806
00:38:14,920 --> 00:38:17,560
wiederum Nein, das das sortieren
wir jetzt auch aus, wenn du 

807
00:38:17,560 --> 00:38:20,400
Styling sagst. 
Styling ist auch Teil einer 

808
00:38:20,400 --> 00:38:23,280
Komponente, jede Komponente 
kümmert sich um ihr Styling 

809
00:38:23,280 --> 00:38:28,400
allein erstmal ja und dazu gibt 
es auch, also beim Styling wirst

810
00:38:28,400 --> 00:38:31,280
du irre bei React, das ist auch 
einfach historisch so krass 

811
00:38:31,280 --> 00:38:34,320
gewachsen, kommt immer wieder 
vor und zurück, aber was man mal

812
00:38:34,320 --> 00:38:37,160
sagen kann ist, dass die Idee 
einer Komponente ist auch ihr 

813
00:38:37,160 --> 00:38:40,080
Styling zu beschreiben, ja und 
ihr Styling zu ändern, aber das 

814
00:38:40,080 --> 00:38:42,800
ist quasi. 
Komponentenlogik Gekapselte 

815
00:38:42,800 --> 00:38:45,720
Komponentenlogik und du kannst 
es natürlich über Properties 

816
00:38:45,720 --> 00:38:46,960
wieder ändern. 
Du kannst halt sagen, mach 

817
00:38:46,960 --> 00:38:50,040
irgendein Styling und so weiter 
der Kontext ist ich hab nur n 

818
00:38:50,040 --> 00:38:52,080
Beispiel genommen von dem 
Styling, der Kontext ist immer 

819
00:38:52,080 --> 00:38:56,680
dann wichtig wenn du ja wenn du 
irgendwie ne ne state 

820
00:38:56,680 --> 00:38:59,600
Veränderung haben willst die mit
dem sonstigen normalen Flow von 

821
00:38:59,600 --> 00:39:02,240
deiner Dings nichts zu tun hast.
Da wo du halt wild irgendwie 

822
00:39:02,240 --> 00:39:04,960
Sachen anderes Beispiel ist zum 
Beispiel Drag and Drop, das wird

823
00:39:04,960 --> 00:39:06,400
typischerweise auch beim Kontext
gelöst. 

824
00:39:06,400 --> 00:39:08,960
Ja du kannst. 
Kannst dir ja vorstellen und 

825
00:39:08,960 --> 00:39:10,880
unser Baggerbeispiel passt da 
jetzt nicht mehr, aber ist egal.

826
00:39:10,880 --> 00:39:14,320
Ja du hast halt quasi oft ist 
das so, dass die Komponenten 

827
00:39:14,320 --> 00:39:16,440
natürlich auch miteinander was 
zu tun haben. 

828
00:39:16,440 --> 00:39:18,240
Also wenn du ne große App hast 
zum Beispiel, dann hast du 

829
00:39:18,240 --> 00:39:20,800
irgendwie nen Panel links und n 
Panel rechts ja so wie bei uns 

830
00:39:20,800 --> 00:39:23,520
zum Beispiel Wir haben n Panel 
links wo wir die die die Backend

831
00:39:23,520 --> 00:39:26,160
Logik aufbauen und Panel rechts 
wo irgendwie dieses Frontend 

832
00:39:26,560 --> 00:39:29,960
Preview gerendert wird ja dann 
gibt es quasi wenn du dir das n 

833
00:39:29,960 --> 00:39:33,040
Code angucken würdest, dann gibt
es 2 große Komponenten, das 

834
00:39:33,040 --> 00:39:35,120
heißt halt irgendwie flow 
Bilder. 

835
00:39:35,720 --> 00:39:38,680
Und das, das ist quasi die 
abstrakteste Komponente für die 

836
00:39:38,680 --> 00:39:40,640
ganz was da alles drunter kommt 
im Flow Builder. 

837
00:39:40,640 --> 00:39:42,520
Und dann kommen die ganzen Dinge
und die ganzen Funktionen, die 

838
00:39:42,520 --> 00:39:44,240
du ziehen kannst. 
Und dann gibt es ne andere 

839
00:39:44,240 --> 00:39:46,600
Komponente und die haben beide 
nichts zu tun miteinander, die 

840
00:39:46,600 --> 00:39:48,080
hängen quasi nicht direkt 
zusammen. 

841
00:39:48,280 --> 00:39:52,160
App Preview ja jetzt willst du 
aber zum Beispiel vom Flow 

842
00:39:52,160 --> 00:39:54,800
Builder irgendwas rüber Dragon 
in den App Preview, du 

843
00:39:54,800 --> 00:39:58,600
Kombinierst auf einmal Sachen 
die architektonisch im Baum 

844
00:39:58,600 --> 00:40:01,400
nicht zusammen zusammenhängen. 
Ja und da kannst du wieder so n 

845
00:40:01,400 --> 00:40:04,120
Kontext nehmen. 
Und sagen OK, wenn wenn aber 

846
00:40:04,120 --> 00:40:07,200
jetzt hier dieses Drag Event 
passiert, dann sagen wir beiden 

847
00:40:07,200 --> 00:40:09,280
Bescheid ja, in diesen 
verschiedenen Welten, ja, weil 

848
00:40:09,280 --> 00:40:12,160
die müssen der, der, der, der, 
der der Drop, der der das, das 

849
00:40:12,160 --> 00:40:14,120
das das UI vidget muss auf 
einmal sagen, oh ich muss 

850
00:40:14,120 --> 00:40:16,720
zuhören, da kommt jetzt gleich 
einer angeflogen und dann muss 

851
00:40:16,720 --> 00:40:18,560
ich mit dem was machen in meiner
Logik ja. 

852
00:40:19,000 --> 00:40:22,240
Und dann macht er da gelbe Raben
oder grünen Hintergrund, solche 

853
00:40:22,240 --> 00:40:23,920
Sachen. 
Meinst du genau dann, du fängst 

854
00:40:23,920 --> 00:40:25,960
schon an zu decken und dann dann
leuchtet irgendwo auf einer ganz

855
00:40:25,960 --> 00:40:28,080
anderen Seite was auf. 
Ja und das das ist auch n 

856
00:40:28,080 --> 00:40:31,040
typischer Fall für Kontext, weil
du das das das speist du nicht 

857
00:40:31,040 --> 00:40:33,560
über die Properties ab da bist 
du irre ja sonst muss dir. 

858
00:40:33,560 --> 00:40:35,640
Das der Groschen gefallen, wenn 
sich das jemand angucken will 

859
00:40:35,640 --> 00:40:37,800
muss man mal n Video von der 
Heisenberg anschauen, sieht man 

860
00:40:37,800 --> 00:40:40,160
das auch. 
Ja, das war n cooles Beispiel, 

861
00:40:40,160 --> 00:40:42,160
Druck and Drop, ja. 
Also es gibt es gibt so n paar 

862
00:40:42,160 --> 00:40:44,560
Klassiker wo da wo das wieder 
genommen wird ja Druck and Drop 

863
00:40:44,640 --> 00:40:47,440
seaming halt ne so globale 
seaming Einstellungen ja mach 

864
00:40:47,440 --> 00:40:49,680
mach alle Ecken n bisschen 
runder oder irgendsowas ja das 

865
00:40:49,680 --> 00:40:51,800
gibt es ja auch ganz oft. 
Ja das sind so die Type. 

866
00:40:52,720 --> 00:40:56,400
OK, Guthaben wir Kontext, dann 
wolltest du Styling machen oder 

867
00:40:56,400 --> 00:40:58,080
die Hooks. 
Nee, zum Styling hatte ich was 

868
00:40:58,080 --> 00:41:00,160
gesagt, das lass ich erst mal 
kurz so stehen. 

869
00:41:00,160 --> 00:41:04,320
Also das Styling passiert quasi 
in der Komponente selber, ich 

870
00:41:04,320 --> 00:41:06,840
will, ich will noch mal was 
wichtigeres anderes sagen, die 

871
00:41:06,840 --> 00:41:08,640
Hooks, ja die Hooks auch noch 
nicht. 

872
00:41:08,920 --> 00:41:10,400
Ich würd jetzt noch mal sagen, 
was passiert. 

873
00:41:10,400 --> 00:41:13,000
Wie kommt normalerweise 
eigentlich auch Krams in ne 

874
00:41:13,000 --> 00:41:14,160
Komponente rein? 
Ne? 

875
00:41:14,640 --> 00:41:17,360
Also jetzt mal am Bagger ich ich
drücke halt n Knopf am Bagger 

876
00:41:17,360 --> 00:41:21,520
oder ich ich leg n Hebel um ja 
was ist denn das jetzt in der 

877
00:41:21,520 --> 00:41:24,400
React Welt? 
Ja das ist das kommt eigentlich 

878
00:41:24,400 --> 00:41:26,960
aus den Building Blocks ja wenn 
wir zum Beispiel es gibt ja 

879
00:41:26,960 --> 00:41:30,560
Building Blocks, Input Element 
oder Button ja also es gibt 

880
00:41:30,560 --> 00:41:34,960
bestimmte es gibt es gibt 
bestimmte Bauteile sag ich mal 

881
00:41:35,040 --> 00:41:38,480
die sind halt dafür gemacht dass
sie nen Input aufnehmen können 

882
00:41:38,480 --> 00:41:41,200
ne. 
So im HTML gibt es die halt so 

883
00:41:41,200 --> 00:41:43,840
wie im Lego Technik. 
Ja und jetzt passiert was 

884
00:41:43,840 --> 00:41:46,560
Wichtiges jetzt ist jetzt gibt 
es quasi in der Wir sind jetzt 

885
00:41:46,560 --> 00:41:49,520
in der Komponente noch ja und 
dann haben wir zum Beispiel 

886
00:41:49,520 --> 00:41:53,240
unten in den in der in dem JSX 
wie man das nennt, das JSX ist 

887
00:41:53,240 --> 00:41:55,680
quasi rendert quasi so ne das 
sieht so aus wie ein bisschen 

888
00:41:55,680 --> 00:41:59,840
HTM mit Javascript on Board ja 
das ist immer ein Teil der so 

889
00:41:59,840 --> 00:42:03,600
ein JSX Teil das ist das steht 
immer Return kleiner Klammer auf

890
00:42:03,600 --> 00:42:06,080
und so weiter und dann kommt das
JSX, das ist quasi die. 

891
00:42:06,520 --> 00:42:09,120
Wenn ne Komponente das hat, die 
muss das nicht wie gesagt, aber 

892
00:42:09,120 --> 00:42:10,880
dann rendert die. 
Das ist der Teil den du dann 

893
00:42:10,880 --> 00:42:14,240
auch sehen wirst. 
Dann rendert die was ja so und 

894
00:42:14,240 --> 00:42:17,520
dann steht beim Button zum 
Beispiel Button und da steht da 

895
00:42:17,520 --> 00:42:20,440
on Click und das ist das on 
click Event. 

896
00:42:20,440 --> 00:42:25,040
Ja und dann steht da drinne 
typischerweise handle Click also

897
00:42:25,040 --> 00:42:28,240
on Click, das kommt dann quasi 
von das ist das ist Browser HTML

898
00:42:28,240 --> 00:42:31,520
Technologie ja wenn ich dann da 
drauf drücke ja auf den Button 

899
00:42:31,840 --> 00:42:34,560
dann wird ne Funktion die ich da
einhänge. 

900
00:42:34,800 --> 00:42:36,960
Von meiner Komponente, das ist 
wichtig. 

901
00:42:37,360 --> 00:42:40,800
Die Logik ist in der Komponente 
mit drin, ne unten in der 

902
00:42:40,800 --> 00:42:44,880
Funktion ist Return dieses ganze
JSX, da gibt es dann den Button 

903
00:42:44,880 --> 00:42:47,920
und da steht on Klick und dann 
kommt das handle Klick und das 

904
00:42:47,920 --> 00:42:51,680
handle Klick ist ne ist ne 
Funktion in meiner Funktion von 

905
00:42:51,680 --> 00:42:55,240
dem von dem in der Komponente 
die auch ne Funktion ist und das

906
00:42:55,240 --> 00:42:59,440
handle Klick muss ich jetzt 
implementieren, das ist dafür, 

907
00:42:59,680 --> 00:43:02,560
dass die Komponente in sich 
selbst reaktiv wird. 

908
00:43:03,200 --> 00:43:04,800
Ne, sonst ich. 
Ich muss ja irgendwie diese user

909
00:43:04,800 --> 00:43:07,920
Events reinschneiden. 
So ja so und dann dann muss die 

910
00:43:07,920 --> 00:43:10,200
erstmal selber damit klarkommen 
bevor die überhaupt anderen 

911
00:43:10,200 --> 00:43:11,640
Bescheid sagen kann. 
Wir haben jetzt gerade sehr viel

912
00:43:11,640 --> 00:43:15,040
gesprochen, wie wird Information
weitergereicht ja wenn aber 

913
00:43:15,040 --> 00:43:17,360
jetzt ich muss ja auch erstmal 
die Information initial 

914
00:43:17,360 --> 00:43:22,120
verarbeiten, ja darüber rede ich
jetzt ja wie wie funktioniert 

915
00:43:22,120 --> 00:43:24,320
das als wenn ich auf den Knopf 
drücke bei React, dass überhaupt

916
00:43:24,320 --> 00:43:26,560
irgendwas passiert, ja das ist 
genau das was ich jetzt 

917
00:43:26,560 --> 00:43:29,960
beschreibe on klick handle Klick
ist ne Funktion und jetzt gibt 

918
00:43:29,960 --> 00:43:34,520
es n zweites wichtiges Konzept. 
Wenn ich ne, wenn ich quasi die 

919
00:43:34,560 --> 00:43:38,880
den den Zustand der Komponente 
in sich selbst verändern will, 

920
00:43:39,040 --> 00:43:41,880
weil ich nicht von einer anderen
Komponente das bekomme, sondern 

921
00:43:41,880 --> 00:43:44,320
von außen durch n on click Event
durch den User. 

922
00:43:44,320 --> 00:43:46,600
Ja du bist ja keine Komponente 
Gerrit, wenn du da auf den Knopf

923
00:43:46,600 --> 00:43:48,240
drückst, sondern du bist ja n 
User, das ist ne andere 

924
00:43:48,240 --> 00:43:51,200
Geschichte, ja dann brauche ich,
muss ich aber auch diesen 

925
00:43:51,200 --> 00:43:53,760
Zustand persistierend speichern,
das muss ich ja, damit muss ich 

926
00:43:53,760 --> 00:43:57,040
ja umgehen können. 
Ja und das nennt sich State. 

927
00:43:57,480 --> 00:43:58,880
Blöderweise, da muss man 
aufpassen. 

928
00:43:58,880 --> 00:44:01,200
State hat eigentlich das Wort, 
ist eigentlich viel generischer,

929
00:44:01,200 --> 00:44:03,360
weil das zu tun hat mit 
Objektorientierter Krams, aber 

930
00:44:03,360 --> 00:44:07,240
in in React muss man ganz klar 
sagen, gibt es die Props, die 

931
00:44:07,240 --> 00:44:09,160
heißen auch Props, eigentlich 
heißen die Properties nein, 

932
00:44:09,200 --> 00:44:12,160
niemand sagt Properties so wie 
weiß ich auch nicht, das ist wie

933
00:44:12,160 --> 00:44:16,480
n Spitzname, Props sind die 
Props so das sind, wenn die sich

934
00:44:16,480 --> 00:44:19,520
ändern, die kommen aber nur rein
von Komponenten die über mir 

935
00:44:19,520 --> 00:44:22,960
liegen, ja dann triggert das ne 
Zustandsänderung, dann wird 

936
00:44:22,960 --> 00:44:25,280
React quasi neu rendern wie ich 
gesagt hab. 

937
00:44:25,760 --> 00:44:27,720
Oder aber, und das zweite 
Konzept, das haben wir jetzt, 

938
00:44:27,720 --> 00:44:32,560
ist der State, und den setzt du,
weil Henry Click wird sagen Set 

939
00:44:32,560 --> 00:44:36,480
State zu irgendwas. 
Ja zum Beispiel checkt oder 

940
00:44:36,480 --> 00:44:38,160
sowas oder nicht. 
Wenn ich die Checkbox war oder 

941
00:44:38,160 --> 00:44:40,640
nee wenn ich der Button war, 
dann würde ich irgendwie keine 

942
00:44:40,640 --> 00:44:43,600
Ahnung was weiß ich ist egal. 
Ja aber also das ist der zweite 

943
00:44:43,600 --> 00:44:46,400
Weg wie ich quasi dann sage 
jetzt hab ich n neuen Zustand 

944
00:44:46,400 --> 00:44:50,080
erreicht, Logik wird 
Angeschmissen so ja und wenn ich

945
00:44:50,080 --> 00:44:53,280
den State gesetzt hab dann 
render ich selber neu und. 

946
00:44:53,600 --> 00:44:56,640
Die meine State Variable, da 
kann ich jetzt irgendwas von 

947
00:44:56,640 --> 00:44:58,800
speichern on click. 
Ja da setz ich zum Beispiel 

948
00:44:58,800 --> 00:45:01,600
Activated oder Irgendsowas. 
Ja das ist dann was abstrakteres

949
00:45:01,600 --> 00:45:04,600
Logik von dem von React und 
dieses Activated was ich jetzt 

950
00:45:04,600 --> 00:45:08,800
selber habe was n Zustand ist 
über den State gesetzt in mir 

951
00:45:08,800 --> 00:45:11,480
ist das der State kann ich 
weitergehen als Property zu 

952
00:45:11,480 --> 00:45:15,920
meinen untergebenen Komponenten,
da wandelt sich dann nochmal zu 

953
00:45:15,920 --> 00:45:19,680
sagen kommt n User Event rein 
wird on click aufgerufen mach 

954
00:45:19,680 --> 00:45:23,280
ich handle click setze mir nen 
State i am activated. 

955
00:45:23,520 --> 00:45:26,440
Gleich true. 
Ja und und ich mach jetzt aber 

956
00:45:26,440 --> 00:45:28,880
nur n kleinen Teil von dem 
ganzen Business, dass ich 

957
00:45:28,880 --> 00:45:31,840
aktiviert bin, muss aber jetzt 
in meiner Anwendung heißen, dass

958
00:45:31,840 --> 00:45:35,040
ich noch tieferliegende 
Komponenten neu rendere, weil 

959
00:45:35,040 --> 00:45:38,000
die irgendwie was andere Farbe 
anmalen müssen oder irgendsowas 

960
00:45:38,320 --> 00:45:42,440
und dann wird mein Activated ne 
property die ich nach unten 

961
00:45:42,440 --> 00:45:45,560
weiterreiche für die anderen 
Dinger ja und die heißt 

962
00:45:45,560 --> 00:45:48,120
vielleicht noch nicht mal so, 
das ist jetzt auch wichtig, weil

963
00:45:48,120 --> 00:45:50,000
ich hab ja gesagt, die 
unterliegenden Komponenten 

964
00:45:50,000 --> 00:45:52,880
definieren alle selber was sie 
für n Interface haben. 

965
00:45:53,360 --> 00:45:55,600
Ich kann jetzt einfach mein 
activated true sagen. 

966
00:45:55,600 --> 00:45:58,080
OK weiß ich ich für mich hab ich
das jetzt Activated genannt, 

967
00:45:58,080 --> 00:46:00,800
aber jetzt die unterliegen 
Komponente muss es halt checkt 

968
00:46:00,800 --> 00:46:04,400
heißen ja dann dann setz ich 
halt checkt gleich activated 

969
00:46:04,640 --> 00:46:05,840
fertig. 
Ja weil das ist ja alles 

970
00:46:05,840 --> 00:46:07,600
javascript ich kann ja 
programmieren, ich kann die 

971
00:46:07,600 --> 00:46:09,920
Variablen ja mappen die ich Bock
hab und das wird den ganzen Tag 

972
00:46:09,920 --> 00:46:12,760
getan ne und dann jetzt merkst 
du vielleicht auch wie die 

973
00:46:12,760 --> 00:46:15,280
Wiederverwendbarkeit reinkommt 
das heißt ich hab gekapselte 

974
00:46:15,280 --> 00:46:18,520
Komponenten die haben die sind 
in sich schlüssig die haben 

975
00:46:18,520 --> 00:46:20,720
Logik die können wiederverwendet
werden und jetzt kann ich die 

976
00:46:20,720 --> 00:46:22,960
quasi. 
Überall, wenn ich das geschickt 

977
00:46:22,960 --> 00:46:25,880
mache, wieder reinsetzen in 
verschiedene Sachen, ja, und 

978
00:46:25,880 --> 00:46:27,920
dann dann dann wird meine 
Anwendung schlank. 

979
00:46:27,920 --> 00:46:31,120
Ja und dann hab ich keinen 
Spaghetti mehr am Ende, ach so, 

980
00:46:31,120 --> 00:46:35,040
das sind die, das ist Props und 
State und jetzt hab ich noch 

981
00:46:35,040 --> 00:46:36,560
was, das muss ich auch noch, 
dass ich auch noch mal sagen auf

982
00:46:36,560 --> 00:46:38,240
der Tonspur, weil das auch ganz 
wichtig ist. 

983
00:46:38,240 --> 00:46:40,840
Es gibt natürlich noch viel, 
viel mehr, also werkcamp muss, 

984
00:46:40,840 --> 00:46:43,440
gibt es ja Bücher, ja man muss 
das jahrelang lernen, so, aber 

985
00:46:43,440 --> 00:46:45,640
wenn wir es im Podcast machen, 
dann musst du wenigstens die 

986
00:46:45,640 --> 00:46:50,080
wichtigsten Dinger rauspicken, 
und das ist der Effekt, ja was 

987
00:46:50,080 --> 00:46:54,800
ist jetzt n Effekt? 
Ein Effekt ist quasi ein Händler

988
00:46:54,800 --> 00:46:57,120
der inner Komponente beschrieben
wird. 

989
00:46:57,600 --> 00:47:01,360
Das ist quasi so eine Art 
ständiger Sensor für innere 

990
00:47:01,360 --> 00:47:06,200
Änderungen, der Effekt wird 
getriggert durch genau diese 2 

991
00:47:06,200 --> 00:47:09,200
Dinger, entweder durch eine Prop
Change oder durch eine Stage 

992
00:47:09,200 --> 00:47:11,360
Change. 
Ich kann eine Prop Change haben 

993
00:47:11,360 --> 00:47:13,040
weil eine überliegende 
Komponente von mir mir was 

994
00:47:13,040 --> 00:47:15,240
geändert hat oder ich kann einen
Stage Change haben weil ich 

995
00:47:15,240 --> 00:47:17,120
direkt zum Beispiel auf 
irgendein User Input Geräuscht 

996
00:47:17,120 --> 00:47:19,920
habe oder irgend so was das sind
ja sind beides Dinge. 

997
00:47:20,400 --> 00:47:21,960
Die dazu führen, dass ich 
irgendwie rendern muss, dass 

998
00:47:21,960 --> 00:47:24,920
irgendwie was neu ausgewertet 
wird und der Effekt ist jetzt 

999
00:47:24,920 --> 00:47:28,400
quasi, das ist total cool, das 
das, das ist ziemlich, das gab 

1000
00:47:28,400 --> 00:47:31,120
es nicht immer in in, das ist 
auch das ist n sogenannter Hook 

1001
00:47:31,360 --> 00:47:34,200
Use Effekt Hook ja wir lassen 
das mal weg, was diese Hooks 

1002
00:47:34,200 --> 00:47:37,400
genau sind, das ist ist einfach 
Technik, ja, aber im Prinzip 

1003
00:47:37,400 --> 00:47:39,960
kann man sich vorstellen wieso n
Lauscher und dem Lauscher kann 

1004
00:47:39,960 --> 00:47:43,120
ich sagen du du lauschst nicht 
einfach auf alles, der hat so n 

1005
00:47:43,120 --> 00:47:46,000
Filter unten drin, das nennt man
Dependency Aree der sagt du 

1006
00:47:46,000 --> 00:47:50,360
Lauschst wenn sich die, die oder
die State Property oder die 

1007
00:47:50,360 --> 00:47:55,920
zusammen alle 3 einer alles 
kannst du alles angeben, ja wenn

1008
00:47:55,920 --> 00:48:00,640
da irgendwas passiert, dann 
werte mich aus und das ist ganz 

1009
00:48:00,640 --> 00:48:04,720
oft ganz wichtig, weil du hast 
ganz oft Logik, die nicht nur 

1010
00:48:05,040 --> 00:48:08,240
nicht nur nen Dummen einen Klick
hat, sondern wo du kombinierte 

1011
00:48:08,240 --> 00:48:11,200
Sachen machen musst. 
Wenn der User geklickt hat und 

1012
00:48:11,200 --> 00:48:13,080
wenn vorher die Property auf 
irgendwas ist. 

1013
00:48:13,080 --> 00:48:14,720
Das ist ja ganz oft so 
kompliziert, ja. 

1014
00:48:14,920 --> 00:48:17,040
Meine Property ist auf, ich bin 
in Test Mode. 

1015
00:48:17,040 --> 00:48:20,400
Ja und jetzt klickt jemand was 
was heißt denn das jetzt für 

1016
00:48:20,400 --> 00:48:22,320
meine Logik? 
Ja, das heißt Ignorier das weil 

1017
00:48:22,320 --> 00:48:26,480
ich bin in Testing Mode ich bin 
nicht in Baumode ja so oder ich 

1018
00:48:26,480 --> 00:48:28,480
oder dann halt anders die 
Property oben ist zum Beispiel 

1019
00:48:28,480 --> 00:48:30,440
jetzt in Baumode und jetzt 
klickt jemand was jetzt muss ich

1020
00:48:30,440 --> 00:48:33,160
was ganz anderes machen ja und 
jetzt brauche ich auf einmal die

1021
00:48:33,160 --> 00:48:38,800
Beziehung von 2 
zustandsbeschreibungsparametern 

1022
00:48:38,800 --> 00:48:41,520
ja die jetzt ausgewertet werden 
müssen und jetzt kommt der Use 

1023
00:48:41,600 --> 00:48:44,400
Factor weil das kann ja. 
Zu unterschiedlichen Zeiten 

1024
00:48:44,400 --> 00:48:46,320
passieren. 
Vor 5 Sekunden hab ich auf 

1025
00:48:46,320 --> 00:48:48,640
Testing gedrückt und jetzt 
drückt mir jemand den Button ne 

1026
00:48:49,200 --> 00:48:51,840
dann dann dann läuft ja nicht 
gleichzeitig was in meinem Code.

1027
00:48:51,840 --> 00:48:54,880
So jetzt kommt aber dann den 
Effekt Hook und dann sagt er 

1028
00:48:54,880 --> 00:48:57,120
jetzt kannst du kleine kleine 
Logik schreiben, jetzt kannst du

1029
00:48:57,120 --> 00:49:00,640
der würde dann laufen weil der 
hör ich jetzt quasi auf bin ich 

1030
00:49:00,640 --> 00:49:04,080
Test Mode und hab ich geklickt 
ja und jetzt machst du da drin 

1031
00:49:04,080 --> 00:49:06,560
einfach wieder javascript Logik 
und kannst wieder Zustände 

1032
00:49:06,560 --> 00:49:10,160
ändern im im Effekt Hook setzt 
du wieder den State um ja und 

1033
00:49:10,640 --> 00:49:12,720
dann kriegst du komplexe Logik 
hin ne? 

1034
00:49:13,200 --> 00:49:16,960
Und mit diesen konzepten 
Komponente Property 

1035
00:49:16,960 --> 00:49:18,640
weiterreichen zum Zustand 
ändern. 

1036
00:49:18,960 --> 00:49:22,600
States selber setzen durchs 
Zuhören von Events, die von 

1037
00:49:22,600 --> 00:49:27,040
außen kommen und Effects, die 
quasi beliebig kombinieren 

1038
00:49:27,040 --> 00:49:29,640
können, Logik und dann auch 
wieder statesänderung setzen 

1039
00:49:29,640 --> 00:49:33,440
können, das sind die 
Kernelemente von so einer React 

1040
00:49:33,440 --> 00:49:35,400
Anwendung. 
Ja und dann schachtelst du den 

1041
00:49:35,400 --> 00:49:37,040
ganzen Kram und baust es wie ein
Haus auf. 

1042
00:49:37,840 --> 00:49:39,960
Und die große Kunst. 
Jemand, der gut React 

1043
00:49:39,960 --> 00:49:42,560
programmieren kann, der hat n 
gutes Gefühl dafür, wie die 

1044
00:49:42,560 --> 00:49:44,160
Komponenten geschnitten werden 
müssen. 

1045
00:49:44,160 --> 00:49:46,680
Ja, weil das ist ja total 
habiträr, nicht zu groß, nicht 

1046
00:49:46,680 --> 00:49:49,200
zu klein, wiederverwendbar, ja 
nein und so weiter und sofort, 

1047
00:49:49,200 --> 00:49:52,520
ja und die dann kriegst du so, 
so langsam kriegst du dann so ne

1048
00:49:52,520 --> 00:49:56,240
Webanwendung hin, ne, ja wie wie
wie kommt man dann zu so n also 

1049
00:49:56,800 --> 00:50:00,720
Plan ich das irgendwie schreib 
ich einfach mal drauf los was 

1050
00:50:00,720 --> 00:50:03,600
ist so n Best practice um da 
tatsächlich die Komponenten so 

1051
00:50:03,600 --> 00:50:06,400
zu schneiden wie Sie Übungen, 
Übungen, ja Erfahrung, Übungen, 

1052
00:50:06,560 --> 00:50:09,600
Fehler machen. 
Neu machen, keine Ahnung. 

1053
00:50:10,000 --> 00:50:12,760
Da gibt es also es gibt, das ist
einfach so unterschiedlich, das 

1054
00:50:12,760 --> 00:50:16,200
ist kein, es gibt erstens kein 
Grundrezept, es ist, das ist wie

1055
00:50:16,200 --> 00:50:19,040
Architektur von Software, das 
musst du einfach, ich glaube es,

1056
00:50:19,040 --> 00:50:21,880
es erschlägt nur Erfahrung, 
Erfahrung, was kann was ist 

1057
00:50:21,880 --> 00:50:23,800
schnell, was ist langsam. 
Du musst dich genau auskennen, 

1058
00:50:23,800 --> 00:50:27,280
was ist denn React, was braucht 
lange zum Rendern, was zieht 

1059
00:50:27,280 --> 00:50:30,240
große Renderingbäume hinter 
sich, was nicht und so. 

1060
00:50:30,880 --> 00:50:32,680
Das kann aber auch Wurst sein, 
je nachdem was du für ne 

1061
00:50:32,680 --> 00:50:34,080
Anwendung hast. 
Wir zum Beispiel Wir sind total 

1062
00:50:34,080 --> 00:50:36,120
drauf achten, dass sich dass 
sich nur das Rerendert, was auch

1063
00:50:36,120 --> 00:50:38,240
wirklich rerendert werden muss, 
weil wir ganz viele Elemente 

1064
00:50:38,240 --> 00:50:41,240
haben, ne und dass es uns ganz 
langsam wird und dann Anwendung 

1065
00:50:41,240 --> 00:50:43,280
hast du irgendwie ne Tabelle auf
einer Webseite ist auch 

1066
00:50:43,280 --> 00:50:47,200
scheißegal, ne? 
Also da gibt es keinen, da gibt 

1067
00:50:47,200 --> 00:50:50,440
es keinen, kein Grundrezept, 
aber man muss was wichtig ist 

1068
00:50:50,640 --> 00:50:54,240
würde ich sagen bei React nicht 
einfach ausprobieren, sondern 

1069
00:50:54,240 --> 00:50:55,600
deswegen habe ich auch diese 
Folge gemacht. 

1070
00:50:55,600 --> 00:50:59,200
Lesen vorher verstehen ja. 
Projekt genau verstehen was gibt

1071
00:50:59,200 --> 00:51:01,360
es, wie funktioniert das alles, 
was passiert bei props, 

1072
00:51:01,360 --> 00:51:03,000
Änderungen bei State, 
Änderungen, was sind die 

1073
00:51:03,000 --> 00:51:06,120
Effekte, was löst da was aus? 
Diese wichtigsten Komponenten, 

1074
00:51:06,120 --> 00:51:08,360
Konzepte, das sind sehr viele, 
noch viel mehr als ich jetzt 

1075
00:51:08,360 --> 00:51:11,080
hier heute sage, aber die 
allerwichtigsten davon muss man 

1076
00:51:11,080 --> 00:51:13,440
sauber verstanden haben und im 
ganz Kleinen ausprobieren und 

1077
00:51:13,440 --> 00:51:16,600
mal debuggen, dass man ne 
Grundidee kriegt davon, was man 

1078
00:51:16,600 --> 00:51:19,200
da macht und dann muss man noch 
mit viel Erfahrung einfach 

1079
00:51:19,200 --> 00:51:22,040
rangehen, ausprobieren was 
passiert, gibt ja aber auch ganz

1080
00:51:22,040 --> 00:51:24,080
viele Beispiele, Tutorials, dann
kann man mit KE sich auch 

1081
00:51:24,480 --> 00:51:26,560
Tutorials ziehen und so macht 
mal ne to do Anwendung oder 

1082
00:51:26,560 --> 00:51:28,440
irgend sowas ja. 
Kriegt man schon hin. 

1083
00:51:28,440 --> 00:51:31,400
Ne, ich will noch eine Sache 
sagen, ich fällt mir gerade ein,

1084
00:51:31,400 --> 00:51:34,000
sonst vergesse ich die nachher 
mit dem Verschachteln von 

1085
00:51:34,000 --> 00:51:35,600
Komponenten. 
Ja ich hab jetzt immer so getan 

1086
00:51:35,600 --> 00:51:38,760
als könnte ich immer nur 1 zu 1 
quasi verbaumen ja es gibt noch 

1087
00:51:38,760 --> 00:51:41,360
was ganz Wichtiges, das hat auch
wie Act toll gelöst. 

1088
00:51:41,840 --> 00:51:44,320
Das nennt sich das ist so ne Map
Funktion, die gibt es auch in 

1089
00:51:44,320 --> 00:51:47,200
Javascipt ist die javascript Map
Funktion wenn ich zum Beispiel 

1090
00:51:47,200 --> 00:51:50,160
ne Tabelle anzeigen will ich 
mach mal n krasses Beispiel die 

1091
00:51:50,160 --> 00:51:53,040
Tabelle selber, der Rahmen ist 
quasi ne Komponente jetzt könnte

1092
00:51:53,040 --> 00:51:55,560
ich sagen jeder einzelne das 
wird auch oft so gemacht jede 

1093
00:51:55,560 --> 00:51:58,720
einzelne Row. 
Ist ne andere Komponente ist ne 

1094
00:51:58,720 --> 00:52:00,800
unterliegende Komponente von der
Tabelle. 

1095
00:52:00,800 --> 00:52:03,400
Ja ich das ist nicht die ganze 
Tabelle, ist nicht in einer 

1096
00:52:03,400 --> 00:52:05,280
Komponente ganz im Leben nicht, 
sondern es gibt die 

1097
00:52:05,280 --> 00:52:08,560
Außenkomponente mit dem ganzen 
Filtergedöns, sortierungs, Logit

1098
00:52:08,560 --> 00:52:11,120
und so weiter und dann 
typischerweise hab ich für jede 

1099
00:52:11,120 --> 00:52:15,720
Zeile ne Komponente und ja, aber
jede Zeile ist ja gleich, es 

1100
00:52:15,720 --> 00:52:18,880
sind nur andere Daten drin ja 
aber vom vom vom vom vom 

1101
00:52:18,880 --> 00:52:22,000
Webkrams ist das gleiche. 
Ja jetzt gibt es ne Möglichkeit 

1102
00:52:22,000 --> 00:52:25,360
zu sagen OK map mir quasi für 
die Daten die ich hier habe. 

1103
00:52:25,920 --> 00:52:29,040
In in einem Blockbau und beim 
JSX kann ich sagen, OK, mach 

1104
00:52:29,040 --> 00:52:32,000
davon ein Array von Komponenten.
Ja, das nennt sich Mapping. 

1105
00:52:32,000 --> 00:52:34,200
Ja, das optimiert React sehr 
krass. 

1106
00:52:34,200 --> 00:52:37,680
Ja, das ist ganz wichtig, also 
das sind diese strukturgebenden 

1107
00:52:37,680 --> 00:52:39,600
Elemente sag ich mal der 
Komponenten, du kannst also 

1108
00:52:39,600 --> 00:52:43,040
entweder in der Komponente 
direkt eine andere Aufrufen oder

1109
00:52:43,280 --> 00:52:46,320
ein Array von anderen rendern, 
ja die dann wieder rendern 

1110
00:52:46,320 --> 00:52:48,320
können und so weiter das soll 
ich nur noch mal sagen, weil das

1111
00:52:48,320 --> 00:52:50,760
ist wichtig, das muss man 
kapieren, wenn man denn das ist 

1112
00:52:50,760 --> 00:52:53,480
ganz oft das Pattern, dass man 
so so tabellarische Sachen hat 

1113
00:52:53,480 --> 00:52:55,880
und so weiter da immer da. 
Machst du sowas sofort mit dem 

1114
00:52:55,880 --> 00:52:58,960
RER alright? 
Ist denn jetzt der Punkt 

1115
00:52:58,960 --> 00:53:00,560
gekommen um noch mal Styling 
anzusprechen? 

1116
00:53:00,560 --> 00:53:02,200
Weil das stimmt so als würdest 
du da noch was zu sagen. 

1117
00:53:02,880 --> 00:53:07,040
Ja das stimmt ja, pass auf also 
das das Styling ist ja immer ja 

1118
00:53:07,200 --> 00:53:09,120
ja und vielleicht noch ich hatte
auch noch diese grauen 

1119
00:53:09,120 --> 00:53:11,920
Baggersteine irgendwie im Bagger
Bestandteile irgendwie so im 

1120
00:53:11,920 --> 00:53:14,160
Hinterkopf so ja genau die 
grauen Steine ja noch ist unser 

1121
00:53:14,160 --> 00:53:16,160
Bagger grau ja also wir haben 
jetzt nur, also der ist 

1122
00:53:16,160 --> 00:53:19,680
funktional ja und fertig wenn 
wir ihn jetzt so gebaut haben 

1123
00:53:19,680 --> 00:53:23,360
mit Kontext Effekt und alles ja 
aber er ist leider grau. 

1124
00:53:25,280 --> 00:53:28,040
Genau hier kommt die Farbe rein.
Na ja, die Farbe, die Farbe 

1125
00:53:28,040 --> 00:53:30,360
machst du halt, da haben wir 
auch ne eigene Folge gemacht, 

1126
00:53:30,360 --> 00:53:32,240
deswegen will ich das jetzt 
nicht nicht großartig sagen, 

1127
00:53:32,240 --> 00:53:35,280
React hat keine vordefinierte, 
ist nicht opinionated man so 

1128
00:53:35,280 --> 00:53:38,480
schön sagt, dem ist das Vorschuh
des Anmals, das ist das machst 

1129
00:53:38,480 --> 00:53:42,000
du selbst dann noch in der aber 
pro Komponente und jetzt gibt es

1130
00:53:42,000 --> 00:53:45,240
halt und jetzt stechen wir so 
ganz bisschen an, also React, 

1131
00:53:45,240 --> 00:53:47,200
wie gesagt wird ja nie alleine 
genutzt, ich hab ganz am Anfang 

1132
00:53:47,200 --> 00:53:49,440
schon gesagt ich muss immer hast
erst mal n bundler und so weiter

1133
00:53:49,440 --> 00:53:51,680
und dann das nächste was du 
normalerweise aussuchst ist 

1134
00:53:51,680 --> 00:53:53,880
irgendwie n Großes. 
Tatsächlich Framework würd ich 

1135
00:53:53,880 --> 00:53:59,600
dann sagen, was quasi ja vor 
noch mal vordefinierte Module 

1136
00:53:59,600 --> 00:54:02,800
und Ideen zum anmalen und so 
weiter standardisiert und auf 

1137
00:54:02,800 --> 00:54:05,640
React aufsetzt. 
Jetzt noch mal unserem Lego 

1138
00:54:05,640 --> 00:54:07,560
Technik Beispiel, das ist dann 
quasi so, als würdest du jetzt 

1139
00:54:07,560 --> 00:54:09,840
irgendwie nicht n Bagger kaufen,
den du wo du Blöcke hast, 

1140
00:54:09,840 --> 00:54:12,240
sondern du kaufst jetzt 
irgendwie was weiß ich willst 

1141
00:54:12,240 --> 00:54:14,120
jetzt irgendwie die 
Berglandschaft machen, ja und da

1142
00:54:14,120 --> 00:54:15,880
da gibt es dann halt schon ganz 
viele Bagger und ganz viele 

1143
00:54:15,880 --> 00:54:18,560
andere Dinger sind also 
vorkonfigurierte Komponenten mit

1144
00:54:18,560 --> 00:54:21,560
vorkonfigurierter Logik, ja. 
Das ist nun n Framework, zum 

1145
00:54:21,560 --> 00:54:25,760
Beispiel Material UI von Google.
Ja, das kennen wir alle, das da 

1146
00:54:25,760 --> 00:54:27,920
ganz viele Anwendungen sehen 
sehr ähnlich aus und haben 

1147
00:54:27,920 --> 00:54:29,600
diesen Material Style von 
Google. 

1148
00:54:29,600 --> 00:54:35,200
Ja und das ist trotzdem React ja
aber React REACT an sich hat 

1149
00:54:35,200 --> 00:54:37,600
keinen Material Style ja das 
heißt jetzt aber einfach ich hab

1150
00:54:37,600 --> 00:54:40,120
ne Bibliothek und benutze 
Komponenten die schon jemand für

1151
00:54:40,120 --> 00:54:41,360
mich geschrieben hat, nämlich 
Google. 

1152
00:54:42,000 --> 00:54:44,240
Und weil ich, weil ich alles, 
was ich vorher gesagt hab, passt

1153
00:54:44,240 --> 00:54:47,240
jetzt ja, die Komponenten haben 
halt ne API Beschreibung quasi 

1154
00:54:47,240 --> 00:54:49,680
ja das sind also die Properties 
müssen da beschrieben werden, 

1155
00:54:49,760 --> 00:54:52,240
was macht die Komponente, was 
kann ich da konfigurieren ne 

1156
00:54:52,720 --> 00:54:55,160
aber ansonsten benutze ich diese
Komponente als Blackbox, die 

1157
00:54:55,160 --> 00:54:58,480
heißt zum Beispiel Button Ne 
oder oder Akkordeon oder 

1158
00:54:58,480 --> 00:55:01,600
irgendsowas ja da geb ich halt 
über die Properties rein was ich

1159
00:55:01,600 --> 00:55:04,440
haben will was das dann anzeigen
soll die Daten quasi und die 

1160
00:55:04,440 --> 00:55:07,120
Zustände und der ganze Rest ist 
fertig und wird von Google 

1161
00:55:07,120 --> 00:55:09,680
gemacht und da ist das ganze 
Angemale auch drinne ja. 

1162
00:55:10,200 --> 00:55:12,520
Das funktioniert dann so ja, da 
die die, da kannst du dann 

1163
00:55:12,520 --> 00:55:15,440
quasi, da gibt es dann extra 
Sektionen, das ist aber alles 

1164
00:55:15,440 --> 00:55:19,040
von Material UI gedacht, ja wie 
du dann ausdrücken kannst, dass 

1165
00:55:19,040 --> 00:55:21,480
du bestimmt Elemente anmaßt und 
so weiter da will ich jetzt 

1166
00:55:21,480 --> 00:55:24,560
nicht im Detail drauf gehen, ja,
aber ja, im Prinzip geht das so 

1167
00:55:24,800 --> 00:55:26,320
und da gibt. 
Es ich glaub der Punkt, der ist 

1168
00:55:26,320 --> 00:55:27,880
total wichtig. 
Das war mir so nicht klar. 

1169
00:55:27,880 --> 00:55:32,880
Also das MUI ist letzten Endes 
ein ein auf Projekt Aufsetzendes

1170
00:55:32,880 --> 00:55:35,040
Design Framework oder so was 
könnte. 

1171
00:55:35,040 --> 00:55:36,800
Ich sagen ist ne 
komponentenbibliothek. 

1172
00:55:37,360 --> 00:55:38,840
Ne Komponente benötigt. 
OK, das ist es auch. 

1173
00:55:38,840 --> 00:55:40,200
Ich glaub, sie nennen sich 
vielleicht auch so. 

1174
00:55:40,200 --> 00:55:43,320
Ja genau, die haben halt einfach
ganz viele React Komponenten 

1175
00:55:43,320 --> 00:55:46,280
geschrieben, die super 
funktionieren, ja die 

1176
00:55:46,280 --> 00:55:48,480
funktionieren dann auf dem 
Telefon auch, ändern die dann 

1177
00:55:48,480 --> 00:55:50,760
schön und die funktionieren dann
auf dem Laptop und so da da 

1178
00:55:50,760 --> 00:55:53,560
steckt ganz viel Arbeit drin ne 
aber die Komponenten sind so 

1179
00:55:53,560 --> 00:55:56,240
schön geschnitten, dass du die 
einfach wiederverwendbar in 

1180
00:55:56,240 --> 00:55:58,680
deinen Code einsetzen kannst. 
Ja und die haben sind von der 

1181
00:55:58,680 --> 00:56:00,800
Abstraktionsherbe noch n 
bisschen höher als React so, 

1182
00:56:00,800 --> 00:56:02,400
aber dann hast du halt quasi 
nen. 

1183
00:56:02,560 --> 00:56:07,680
MUI Button, NMUI Akkordeon, MUI 
Navigation many MUI ist hat ne 

1184
00:56:07,680 --> 00:56:09,280
auch ne freie Open Source 
Lizenz. 

1185
00:56:09,280 --> 00:56:12,080
Ja sie ist ganz ganz einfach 
nehmen ja das Problem mit MUI 

1186
00:56:12,080 --> 00:56:14,320
ist und ich kann ja auch n 
bisschen was also mein 

1187
00:56:14,320 --> 00:56:17,280
Kopfschmerz ist das riesig weil 
die der Scheiß also das ist wie 

1188
00:56:17,280 --> 00:56:19,600
das Projekt Framework ändert 
sich halt auch, das geht relativ

1189
00:56:19,600 --> 00:56:21,600
rasant durch die Version und 
auch durch die Ideen. 

1190
00:56:21,600 --> 00:56:23,640
Ja ich hab ja gesagt da gab es 
mal Klassen da gab es Funktionen

1191
00:56:23,640 --> 00:56:26,200
so und jedes Mal baust du 
komplett deine Webanwendung um 

1192
00:56:26,200 --> 00:56:28,240
ja. 
Und bei MUI genauso. 

1193
00:56:28,240 --> 00:56:29,960
Ja, die gehen heute durch die 
Version und jedes Mal ist das 

1194
00:56:29,960 --> 00:56:31,480
wieder anders. 
Wie du das Styling da dran setzt

1195
00:56:31,480 --> 00:56:34,000
und wie du die, also die brechen
quasi mit ihrer eigenen Art wie 

1196
00:56:34,000 --> 00:56:36,440
von den Komponenten die ganze 
Zeit ja ist irre, sieht zwar 

1197
00:56:37,040 --> 00:56:39,280
irgendwie schick aus, aber du 
hast echt schon Schmerz, ist 

1198
00:56:39,280 --> 00:56:40,920
halt moderne Webtechnologie, 
aber das willst du auch 

1199
00:56:40,920 --> 00:56:42,560
erwarten, der Scheiß soll ja 
auch nicht aussehen wie immer 

1200
00:56:42,560 --> 00:56:46,080
vor 10 Jahren ne die machen halt
weiter gut und und von diesen 

1201
00:56:46,080 --> 00:56:48,600
Komponentenbibliotheken gibt es 
halt verschiedene oder auf 

1202
00:56:48,600 --> 00:56:51,680
verschiedenen Ideen Levels auch 
von abstraktionslevels ich sag 

1203
00:56:51,680 --> 00:56:54,080
noch mal eine zum Beispiel dev 
extreme ja. 

1204
00:56:54,520 --> 00:56:57,040
Ist auch im Prinzip ne 
Komponentenbibliothek für React,

1205
00:56:57,760 --> 00:57:00,640
da sind die Komponenten aber 
noch viel größer geschnitten. 

1206
00:57:00,640 --> 00:57:03,120
Ja, während du bei MUI zum 
Beispiel typischerweise n Button

1207
00:57:03,120 --> 00:57:06,160
findest und so unsere Elemente 
wie n, dropdown und was weiß ich

1208
00:57:06,160 --> 00:57:09,520
Input, Elemente, Text, Fields 
und so weiter hast du bei DEV x 

1209
00:57:09,520 --> 00:57:13,040
scheme riesig große Module. 
Ja, das heißt dann auf einmal da

1210
00:57:13,040 --> 00:57:17,440
Data Grid Chart und so und das 
hast du so, da musst du 

1211
00:57:17,440 --> 00:57:18,960
überhaupt nicht mehr dran, dann 
bist du auf. 

1212
00:57:19,400 --> 00:57:21,760
Also du hast einfach nen viel 
dicker vorgebautes Ding. 

1213
00:57:21,760 --> 00:57:23,960
Ja so als quasi den Unterbau von
Bagger kriegst du da schon 

1214
00:57:23,960 --> 00:57:26,600
hingelegt. 
Ja so und dann kannst du das 

1215
00:57:26,600 --> 00:57:28,920
auch konfigurieren und es wird 
auch angemalt und so weiter und 

1216
00:57:28,920 --> 00:57:31,840
sofort ja, also das ist zu 
diesen Komponentenbibliotheken 

1217
00:57:32,320 --> 00:57:34,520
und dann die Möglichkeit deinen 
Kram anzumalen gibt es 

1218
00:57:34,520 --> 00:57:37,280
verschiedene irgendwie Act du 
kannst halt immer das ist was 

1219
00:57:37,280 --> 00:57:40,200
was wenn du du kannst es auch 
machen ohne dass du irgendwas da

1220
00:57:40,200 --> 00:57:41,760
rein lädst. 
Das ist eigentlich im Moment 

1221
00:57:41,760 --> 00:57:44,560
geht es fast wieder dahin ja ich
nutze gar nichts, ich mach 

1222
00:57:44,560 --> 00:57:47,200
wieder plain CSS. 
Und das ist schön. 

1223
00:57:47,200 --> 00:57:49,800
Da hat jetzt React, das ist aber
auch relativ neu, ne Möglichkeit

1224
00:57:49,800 --> 00:57:53,600
gefunden, das nennt sich CSS 
Modules, es könnte auch CSS 

1225
00:57:53,600 --> 00:57:56,880
Components heißen, ist ja nicht 
schicker da, da sagst du quasi 

1226
00:57:56,880 --> 00:57:59,760
ganz normal, du schreibst NCSS 
Style Sheet hin, aber nur n ganz

1227
00:57:59,760 --> 00:58:02,880
kleines und das ist Gescoped auf
deine Komponente. 

1228
00:58:03,360 --> 00:58:06,040
Das ist wichtig, weil CSS 
funktioniert eigentlich, CSS hat

1229
00:58:06,040 --> 00:58:08,920
ja mit diesen Komponenten Ideen 
von REACT nichts zu tun, CSS ist

1230
00:58:08,920 --> 00:58:12,240
immer global, das malt alles an 
was du hinterm Virtual Dom hast.

1231
00:58:12,240 --> 00:58:13,560
Ja. 
Das willst du aber nicht. 

1232
00:58:13,560 --> 00:58:16,440
Du willst sagen, die Komponente 
die ist so angemalt und zwar 

1233
00:58:16,440 --> 00:58:18,520
immer so und das interessiert 
die auch nicht, wie andere 

1234
00:58:18,520 --> 00:58:21,360
Komponenten angemalt haben. 
Du willst das Kapseln ne und 

1235
00:58:21,360 --> 00:58:23,640
jetzt gibt es das modular CSS 
und da schreibst du quasi n 

1236
00:58:23,640 --> 00:58:26,360
kleines CSS hin, das aber 
gekapselt nur gültig ist für 

1237
00:58:26,360 --> 00:58:27,760
diese Komponente, das ist halt 
cool. 

1238
00:58:27,760 --> 00:58:30,560
Ja so kannst du es zum Beispiel 
geil anmalen ne oder nimmst du 

1239
00:58:30,560 --> 00:58:32,880
halt inline Styles mit 
javascript kannst du immer 

1240
00:58:32,880 --> 00:58:35,520
inline Styles setzen, das ist 
The Way geht der geht immer ja 

1241
00:58:35,520 --> 00:58:38,200
da da kannst du immer typisch 
anmalen ne aber was du erreichen

1242
00:58:38,200 --> 00:58:41,240
willst ist quasi. 
Komponentenspezifisch anzumalen 

1243
00:58:41,240 --> 00:58:42,960
ne, und da gibt es halt viele 
Lösungen. 

1244
00:58:43,120 --> 00:58:47,960
Ja so ne so ne Lösung und so 
also das geht vor und zurück und

1245
00:58:47,960 --> 00:58:49,520
es ist grauselig und kriegst 
Kopfschmerzen. 

1246
00:58:49,520 --> 00:58:51,520
Ja im Prinzip muss man sich 
eigentlich einmal für was 

1247
00:58:51,520 --> 00:58:53,760
entscheiden und das dann 
durchziehen ne aber weil die 

1248
00:58:53,760 --> 00:58:55,480
Historie sowieso ist. 
Wir haben auch 3 verschiedene 

1249
00:58:55,480 --> 00:58:57,680
Systeme zum anmalen, ne ist ne 
Katastrophe. 

1250
00:58:57,720 --> 00:59:00,000
OK, also schon ne Glaubensfrage 
irgendwie. 

1251
00:59:00,040 --> 00:59:03,360
Glaubensfrage, so n leidiges 
Thema ich, ich kann es ich also 

1252
00:59:03,360 --> 00:59:05,760
ich ja. 
Es wär schön, wenn es nur 1 

1253
00:59:05,760 --> 00:59:07,720
gäbe, aber dass es, wie das so 
ist, manchmal haben sich 

1254
00:59:07,720 --> 00:59:09,200
Standards durchgesetzt und 
manchmal nicht. 

1255
00:59:09,200 --> 00:59:11,680
Und da wo es nicht durchsetzt, 
dann dann schmerzt du halt den 

1256
00:59:11,680 --> 00:59:13,360
Schmerz ab. 
Ja von nicht standardisiertem 

1257
00:59:13,360 --> 00:59:16,520
Scheiß o. 
K du dann hab ich letzte Frage. 

1258
00:59:16,520 --> 00:59:20,080
Also von meiner Seite, was ist 
denn jetzt so wenn man in die 

1259
00:59:20,080 --> 00:59:22,120
Zukunft schaut? 
Glaubst du Rack wird uns noch ne

1260
00:59:22,120 --> 00:59:26,160
lange Zeit begleiten oder kommen
auch neue andere Dinge die das 

1261
00:59:26,160 --> 00:59:28,720
wieder noch weiter verbessern 
und ersetzen könnten? 

1262
00:59:28,720 --> 00:59:32,160
Also ich hab zum Beispiel von 
Swelte gelesen oder Solid Jazz 

1263
00:59:32,160 --> 00:59:34,800
oder solche Sachen. 
Ach ja, es ist natürlich, da 

1264
00:59:34,840 --> 00:59:36,880
werden immer noch Welt neue 
kommen und so weiter aber ich 

1265
00:59:36,880 --> 00:59:39,800
glaube ganz fest daran, dass 
React was ganz langlebiges ist. 

1266
00:59:39,800 --> 00:59:41,360
Das wird uns noch für immer 
begleiten. 

1267
00:59:41,400 --> 00:59:45,520
Ne, so was heißt für immer, aber
es ist dann es hat ne riesige 

1268
00:59:45,520 --> 00:59:48,200
Community, es gibt einfach 
riesige Anwendungen die dann 

1269
00:59:48,200 --> 00:59:51,880
geschrieben sind, es ist einfach
to big to fail im Moment das das

1270
00:59:51,880 --> 00:59:53,800
würde das halbe Internet 
runterreißen, also den 

1271
00:59:53,800 --> 00:59:56,320
Webauftrag des halben Internets 
wenn jetzt React zum Beispiel 

1272
00:59:56,320 --> 00:59:58,920
tot wär, da hätten ganz viele 
Leute ganz viel Schmerzen und da

1273
00:59:58,920 --> 01:00:00,640
würden. 
Ganz viele große Firmen, auch 

1274
01:00:00,640 --> 01:00:02,640
ganz viel Geld reinblasen wenn 
ihr jetzt zum Beispiel Meter 

1275
01:00:02,640 --> 01:00:04,480
kein Bock mehr hätte, das zu 
entertainen oder irgend so was 

1276
01:00:04,480 --> 01:00:07,520
aus Eigeninteresse. 
Also das ist, das ist einfach 

1277
01:00:07,600 --> 01:00:12,000
die die Bibliothek, ja, und es 
ist auch immer, das sag ich 

1278
01:00:12,000 --> 01:00:14,240
jetzt auch noch mal durch diese 
Art und Weise, wie es gebaut 

1279
01:00:14,240 --> 01:00:16,160
ist, hat man ganz am Anfang 
gesagt, hat sie ja gefragt, was 

1280
01:00:16,160 --> 01:00:18,920
sind die Unterschiede zwischen 
Felte und View und und, Angular 

1281
01:00:18,920 --> 01:00:21,600
und so weiter und sofort. 
Ich würde sagen, React ist so 

1282
01:00:21,600 --> 01:00:24,080
die Flexibelste von denen und 
diese, die und die wildesten 

1283
01:00:24,080 --> 01:00:26,200
Anwendungen, was halt die 
krassesten Web Apps wo irgendwie

1284
01:00:26,200 --> 01:00:28,360
Sachen passieren, die man sonst 
nicht so sieht, die sind dann 

1285
01:00:28,360 --> 01:00:30,480
mit hoher Wahrscheinlichkeit 
wahrscheinlich im React gebaut, 

1286
01:00:30,960 --> 01:00:33,320
weil das halt die meisten 
Freiheitsgrade gibt durch dieses

1287
01:00:33,320 --> 01:00:36,520
Komponentenbasierte Krams und 
nicht so vorgebaut ist. 

1288
01:00:36,600 --> 01:00:38,480
Und jetzt sag ich das noch mal 
kurz, das kann man jetzt 

1289
01:00:38,480 --> 01:00:41,600
einordnen, ne während wir in 
React Komponenten machen können 

1290
01:00:41,600 --> 01:00:45,360
die Kombination aus Logik 
anmalen und Steinen sind. 

1291
01:00:46,240 --> 01:00:48,880
Oder auch nur Steine sind oder 
auch nur Logik sind oder auch 

1292
01:00:48,880 --> 01:00:50,840
nur anmalen. 
Das gibt es auch, kannst dann 

1293
01:00:50,840 --> 01:00:53,520
auch schön kombinieren, ist es 
zum Beispiel bei einem eng oder 

1294
01:00:53,520 --> 01:00:56,720
so, da wirst du da wirst du, 
musst du erstmal lesen, hier in 

1295
01:00:56,720 --> 01:00:59,920
dieses Fall schreibst du anmalen
in dieses schreibst du die Logik

1296
01:00:59,920 --> 01:01:03,720
und in diesem Fall kommt nur das
html, du kannst nicht das Bild 

1297
01:01:03,720 --> 01:01:07,040
kombinieren, du bist vom 
Framework gezwungen es so zu 

1298
01:01:07,040 --> 01:01:09,000
machen. 
Ja und damit bist du ein 

1299
01:01:09,000 --> 01:01:11,560
bisschen limitiert, ja. 
Im Prinzip ist immer alles das 

1300
01:01:11,560 --> 01:01:13,360
Gleiche im Leben. 
Ja man, du kannst sagen es ist 

1301
01:01:13,360 --> 01:01:15,680
ne Low Coat Plattform für 
javascript oder Irgendsowas. 

1302
01:01:15,680 --> 01:01:18,160
Ja und wie hackt es quasi auf 
einem Abstraktionslevel sehr 

1303
01:01:18,160 --> 01:01:20,040
gering, sodass du damit alles 
Mögliche machen kannst. 

1304
01:01:20,040 --> 01:01:22,880
Dafür ist die Learning Curve n 
bisschen stabiler und du kannst 

1305
01:01:22,880 --> 01:01:24,160
auch Sachen ganz schön falsch 
machen. 

1306
01:01:24,480 --> 01:01:26,640
Du kannst auch Scheiße bauen, 
die halt langsam ist und so. 

1307
01:01:26,880 --> 01:01:29,760
Du kannst damit aber auch 
krassen innovativen Kram machen,

1308
01:01:29,760 --> 01:01:31,560
der ganz anders aussieht als bei
anderen. 

1309
01:01:31,560 --> 01:01:34,560
Ja und bei Angular, da bist du 
halt mit einer kleineren 

1310
01:01:34,560 --> 01:01:37,200
Learning Curve schneller am 
Ziel, es läuft stabil und 

1311
01:01:37,200 --> 01:01:40,080
performant, ja. 
Bist aber eventuell n bisschen 

1312
01:01:40,080 --> 01:01:42,560
eingeengt an dem was du da so 
ganz krass machen kannst. 

1313
01:01:42,560 --> 01:01:44,160
Ja, die ist halt so. 
Immer dann. 

1314
01:01:44,800 --> 01:01:46,440
Gibt es halt hinter Use Case 
ist. 

1315
01:01:46,440 --> 01:01:47,680
Genau. 
Und deswegen wird es auch so 

1316
01:01:47,680 --> 01:01:50,080
sein, dass immer wieder solche 
neuen Frameworks aufkommen und 

1317
01:01:50,080 --> 01:01:52,480
jedes bedient sein Use Case und 
ich will auch nicht sagen, dass 

1318
01:01:52,480 --> 01:01:54,800
React das Beste ist für für jede
Anwendung. 

1319
01:01:54,800 --> 01:01:57,600
So, ich würde aber schon sagen, 
ist n ganz schönes Silverbullet 

1320
01:01:57,600 --> 01:01:59,880
kannst du also ganz einfache 
Sachen auch schnell machen, auch

1321
01:01:59,880 --> 01:02:01,440
vor allen Dingen KI 
Unterstützung und so weiter 

1322
01:02:01,440 --> 01:02:05,120
sowie sehr komplexe, also ist 
schon meine lieblings sag ich 

1323
01:02:05,120 --> 01:02:08,400
mal Frontend bibliothek aber 
alle anderen sind. 

1324
01:02:08,480 --> 01:02:10,560
Natürlich gerechtfertigt da und 
haben vielleicht n ganz ganz 

1325
01:02:10,560 --> 01:02:13,160
anderen kleinen Fokus und so 
weiter und es wie es immer ist, 

1326
01:02:13,160 --> 01:02:15,480
ja passt vielleicht für n 
anderen anderen Fall 

1327
01:02:15,480 --> 01:02:19,120
Anwendungsfall besser. 
Cool, ja, super Deep Dive. 

1328
01:02:19,120 --> 01:02:21,720
Ich hoffe das hat den 
Hörerwunsch erfüllt, der uns 

1329
01:02:21,720 --> 01:02:24,320
dann noch erreicht hat über über
den Kommentar in der 1. 

1330
01:02:24,320 --> 01:02:28,240
Folge zum Thema. 
Ja, ich hoffe auch das war ne 

1331
01:02:28,240 --> 01:02:30,800
Herausforderung irgendwie auf 
der Tonspur React zu erklären. 

1332
01:02:30,800 --> 01:02:33,080
Das ist ja schon auch 
schriftlich und bildlich 

1333
01:02:33,080 --> 01:02:36,000
irgendwie schwierig aus. 
Hat mich auch einfach n bisschen

1334
01:02:36,000 --> 01:02:37,360
bisschen. 
Mich hat es ziemlich lang 

1335
01:02:37,360 --> 01:02:39,520
gekostet bis ich React 
durchdrungen hab, also allein 

1336
01:02:39,520 --> 01:02:41,560
die Konzepte ja kannst ich weiß 
noch, ich erinnere mich noch wie

1337
01:02:41,560 --> 01:02:43,480
ich angefangen hab und war 
völlig verwirrt, dachte was ist 

1338
01:02:43,480 --> 01:02:46,000
das für mich mir total geholfen.
Und ich hab auch ganz viele 

1339
01:02:46,000 --> 01:02:49,040
Sachen wiedererkannt, die 
Konzepte, unser Produkt sind und

1340
01:02:49,040 --> 01:02:52,400
die mir jetzt klar sind, warum 
die so sind oder was dich da so 

1341
01:02:52,400 --> 01:02:54,160
getrieben hat. 
Ja, siehst du. 

1342
01:02:54,560 --> 01:02:58,920
Ich, also ich glaube. 
Also es gibt ja, es gibt ja n 

1343
01:02:58,920 --> 01:03:01,840
paar sehr erfolgreiche Sachen 
wie zum Beispiel React, einfach 

1344
01:03:01,840 --> 01:03:03,920
in der Welt und warum ist es 
erfolgreich, weil die 

1345
01:03:03,920 --> 01:03:09,600
Designentscheidungen gesund 
sind, flexibel und skalierbar, 

1346
01:03:09,600 --> 01:03:12,560
und wenn man dann was Größeres 
baut, dann darf man ruhig mal 

1347
01:03:12,560 --> 01:03:14,720
schielen, wie das die Experten 
gemacht haben. 

1348
01:03:14,720 --> 01:03:17,240
Ja und dann kann man, dann ist 
man nicht ganz, dann ist man 

1349
01:03:17,240 --> 01:03:19,400
wahrscheinlich nicht ganz falsch
unterwegs mit seinen eigenen 

1350
01:03:19,400 --> 01:03:22,480
Designentscheidungen, die man 
einfach n ne Level höher gepusht

1351
01:03:22,480 --> 01:03:23,960
hat, aber trotzdem ähnliche 
Sachen macht. 

1352
01:03:24,560 --> 01:03:27,360
Das sollte man tun. 
Ja, da gucken, wo es, wo es gut 

1353
01:03:27,360 --> 01:03:29,480
gemeint. 
Wird meine Device als Architekt,

1354
01:03:29,480 --> 01:03:31,280
weil es die Strukturen sind, 
immer die gleichen? 

1355
01:03:31,280 --> 01:03:36,360
Ja, es ist nur das quasi das 
Tauchlevel ja so und aber 

1356
01:03:36,560 --> 01:03:39,440
Konzepte kann man übernehmen auf
auf verschiedene Abstraktions 

1357
01:03:39,520 --> 01:03:42,240
Label und und und. 
React hat es glaub ich hat n 

1358
01:03:42,240 --> 01:03:45,160
sehr ausgewogenes Konzept, da 
fehlt nicht so viel, das ist 

1359
01:03:45,160 --> 01:03:49,200
schon ziemlich cool ja mhm. 
OK, dann würd ich sagen machen 

1360
01:03:49,200 --> 01:03:53,280
wir Deckel drauf auf React JS 
machen wir und. 

1361
01:03:53,840 --> 01:03:55,760
Wir freuen uns auf euer Feedback
dazu. 

1362
01:03:55,760 --> 01:03:59,440
Lasst uns n Like da n Abo, was 
auch immer, das hilft unserem 

1363
01:03:59,440 --> 01:04:02,800
Podcast immer weiter und gibt 
Burka Motivation sich zu tief in

1364
01:04:02,800 --> 01:04:05,760
Themen einzuarbeiten. 
Behaupte ich mal. 

1365
01:04:05,920 --> 01:04:09,200
Ja, da hast du recht. 
Ja, macht Spaß, OK, cool. 

1366
01:04:09,200 --> 01:04:12,040
Also dann wünsche ich euch was, 
ich sag mal zuerst Tschüss aus 

1367
01:04:12,040 --> 01:04:15,680
Hamburg und gebt dem Gerd noch 
mal das letzte Wort heute schöne

1368
01:04:15,680 --> 01:04:18,000
Sommerzeit, wir hören uns in 2 
Wochen bis dann ciao. 

1369
01:04:19,360 --> 01:04:22,080
Einfach komplex wird präsentiert
und produziert von Heiseware. 

1370
01:04:22,240 --> 01:04:23,520
Wir freuen uns auf deine Fragen 
und 

1371
01:04:23,520 --> 01:04:27,120
deinfeedbackanpodcast@heiseware.com
vielen Dank fürs Hören dieser 

1372
01:04:27,120 --> 01:04:29,840
Folge bis Dienstag in 2 Wochen 
und Tschüss aus Hamburg.