React JS Deep Dive #89

Moin zufolge 89 von einfach komplex heute, der seit Ende 2023 versprochene Deepdive in React Jazz eine Bibliothek, um ja Elemente anzuzeigen im Web und Burkhard hat uns da was

vorbereitet. Es geht richtig tief rein, aber wir gucken auch, dass wir jetzt nicht jeden und jede abholen, aber zumindest die Leute, die jetzt vielleicht noch nicht so tief drin sind, auch für die was dabei haben, wenn Burkhard für der Plan. Ja, Moin für alle die die Legotechnik kennen, die nehmen wir heute noch mal mit. Den würde ich das später merken. Also nicht nur React muss, man wird gelernt, es gibt auch Deepdive und lego Technik heute. Ja, cool. OK, ich bin gespannt, alles

klar. Also vielleicht noch mal ganz kurz als kleiner recup, ich hab mir dummerweise unsere alte Folge gar nicht mal angehört, ich hab aber natürlich jetzt die Mittel der Zeit genutzt, a la Germany JGBT und Co. Mal noch mal Durchgeguckt, React kommt aus dem Hause Meta ne, dort hat man irgendwie Performance Probleme gehabt mit.

Mit dem Newsfeed ja, und hat das dann dort in innerhalb von Meta, also unter Facebook hat man das vielleicht eher entwickelt und dann die erste Anwendung, die es dann verwendet hat, war tatsächlich Chat ist. Die Kernidee ist irgendwie, dass Benutzeroberflächen automatisch auf Veränderungen, also von Datenzuständen reagieren, ne und deswegen auch der Name React. Ich reagiere auf irgendeine Veränderung und das ist ziemlich flott, ja und ich glaube auch, es wird dann häufig in einem.

Ab war schon einem Zuge genannt mit mit View, JS und und Angular, aber letzten Endes ist der feine und kleine Unterschied und da müssen wir jetzt aufpassen, zumindest hab ich das gelesen, dass es sich bei den anderen beiden eher um Frameworks handelt, während Racked ne Bibliothek ist, tatsächlich die sich dann doch wieder auf ne kleinere auf nen kleineren Teil des Ganzen fokussiert.

Ja gegenüber diesen anderen Frameworks ja so, das war meine kleine Einleitung Booker zum Thema, das darfst du mich korrigieren. Ja ne, du bist ne super Einleitung, ja. Das sind so feine Details.

Ne, Wo sind die Unterschiede zwischen den Frameworks haben wir glaube ich in der Folge davor n bisschen rausgehoben aber du hast recht Gerrit, also man spricht ja gerne mal so von opin United ja also wieviel Meinung bringt so nen Framework Produkt im Reinen wie man es zu benutzen hat und wie Sachen aufzubauen zu sind und da würde ich tatsächlich auch so sagen React lässt einem am meisten Freiheit ja also es hat zwar grundkonzepte und die wollen wir heute genau angucken.

Es ist aber nicht so n man wird nicht so eingegleist wie bei anderen Frameworks, so relativ klar ist, wie ich wo was hinschreiben muss und so weiter das werden wir noch.

Kennen. Anscheinend gibt es aber tatsächlich, da auch beim bei der Benamung sag ich mal wirklich der Unterschied, dass es viele sagen, es ist nicht ein Framework, es ist tatsächlich eine Bibliothek, die sich ausschließlich um die Darstellungsebene kümmert, während Themen wie Routing oder sowas nicht von Racked mitgelöst werden, was bei diesen echten Frameworks irgendwie eher der Fall ist. So ne.

Ja, das kann man so sagen ich. Ich würd das so stehen lassen, ich find das OK, wenn es ne Bibliothek ist, also man also die in der echten Welt ist es ja so, dass du ne Bibliothek n Produkt oder wie auch immer sofort aufbaust und Aufgeleist mit dem ganzen Ecosystem, was darum gibt ja, also React gibt es natürlich schon lange und es gibt ein riesiges gigantisches Ecosystem und du kannst Routing, es gibt den React Dom Router und so weiter da wollen wir halt nicht so im Detail sprechen,

aber das kannst du alles dran linken dran kleben sag ich mal ganz grob gesprochen und dann dann bekommst du halt auch ja Framework. Charakteristika mit rein.

Aber noch mal, du kannst also das React selber, da hast du schon recht, Gerrit, das bringt das nicht gleich alles so aus dem Hause mit und du hast halt noch mehr Freiheiten dir den Router oder den Router oder den nächsten Router noch mit Reinzuhängen und baust dir quasi deine deine Gesamtlösung noch n bisschen modularer auf als es jetzt vielleicht in einem in einem Angular oder Irgendsowas stattfindet. Ja, das ist so. Ja OK, das erklär es doch ganz

gut. Müssen wir noch irgendeine Grundlage kennen, bevor wir uns um Legotechnik und Rack kümmern?

Na ja, ich glaube also, die Zuhörer, die die, die uns ab und zu schon mal hören, die, die haben, glaub ich, ja diese Grundlagen von kleinen Server, Internet und so weiter das muss man jetzt schon mal verstanden haben, das fangen wir, das fangen wir jetzt nicht mehr an hier, also wir wollen, ja, wir wollen ja direkt mal tief einsteigen, vielleicht nur so viel gesagt, dass das React ist ne sogenannte Single Page Application, also nur einmal ganz grob abgestochen, was wir

hier haben es es gibt, also wir sind in der Webtechnologie, es gibt irgendwo nen Server der. Da da wird quasi ein Programm, das erzähl ich gleich mal n bisschen genauer zur Verfügung gestellt. Das wird im Klienten geladen, im Browser und dann läuft quasi ne Webapplikation.

Ja, das kann alles Mögliche sein, ja es kann Facebook sein, es kann unsere Applikation, alles mögliche kannste Leute machen ja mit React, ja genau muss man erstmal nicht wissen, so und dann können wir einsteigen und versuchen zu verstehen was ist genau React ja was hab ich davon ja warum warum nutze ich das so und und wie funktioniert das so ungefähr ja Mhm alles klar. Ja, ready. When you are Gerit nickt, dann können wir loslegen. Ja, ich fang mal an mit dem Lego Technik Krams du das mal

eingleisen was da los ist. Also ich hab mir also manchmal macht das halt Sinn mit Bildern zu sprechen, manchmal macht das nicht so viel Sinn, dass das verwirrend und ich würde in dieser Folge mal probieren so n Bild zu wählen und mal gucken wie weit wir kommen. Ja und ich beschreibe mal das Bild was wir haben ne also ich ich weiß nicht wer alles lego Technik kennt, ich kennt sehr gut ich hab mein meine ganze Jugend verbracht mit Lego Technik hatte davon sehr viel

ich fand das sehr cool. Also LEGO kennt jeder. Das sind halt diese diese Blöckchen. Ja weiß ich nicht, hier gibt es Stangen und Platten und so weiter und das kannst du halt übereinander kleben und sofort, ja die haben halt n Interface, was miteinander passt, sodass du verschiedene kleine Blöcke aufeinander bauen kannst.

Das ist jetzt auch schon bei javascript wichtig, komm ich aber gleich zu und das Macht und das Lego Technik das Wort Technik, das braucht man nämlich für dieses Bild, das Technik ist ja quasi, dass ich noch so Sachen hab wie Zahnräder, Getriebe, ja schrauben differenziale. Hydrauliksysteme, Elektromotoren und so weiter das ist quasi das, was das Technik an dem Lego erweitert. Sag ich mal. Ja, also grob gesprochen und jetzt komm fang ich schon mal an mit dem Bild malen.

Ja grob gesprochen ist lego da kannst du was bauen ist sehr statisch. Ja da kannst du da draußen mit dem Finger dran tippen, passiert aber nichts ja weil es gibt keine Logik, kein Getriebe, es macht nichts innen drin, ja es ist halt schön, es ist da kannst du irgendwas? Irgendwie ne Mickey Mouse bauen oder irgend so was. 3. D ja kannst dir angucken, ist cool.

Ja das ist die coole HTML Seite, die statische ja passiert aber nichts kannst du dich nicht mit lackieren kannst du lesen, kannst du angucken, kannst dich freuen super ja Deko Technik kannst du halt n ganzen Bagger bauen ne so n so n richtig schönen Bagger mit einer Schaufel da kannst mit Pleumatik drinne, da läuft da irgendwie n Motor der macht pumpt irgendwie in so n Kompressor rein dass du Luft hast.

Dann hast du Ventil ja also da hast du, da hast du erst was Schönes zum Angucken und dann kannst du Knöpfchen drücken kannst du am Hebeln drehen und so weiter und das Ding macht sogar was, ja. So, und das ist was wir ne moderne Webanwendung nennen, weil wir wollen nämlich ganz viel interagieren und ganz viel machen. Ja, und so weiter und und und. Der Bagger der Lego Technic

Bagger ist das was React ist. Ja, und da sag ich jetzt voraus, weil React ermöglicht uns mal ganz grob mit den Steinchen was die HTML Bauteile sind, die statisch sind die zu kombinieren mit einer Business Logik. In einer also ne.

Also ich mit mit Knöpfen und so weiter mit mit einer Methodik wo ich auf Events reagieren kann auf auf und zwar auf 2 Sorten von Events die die vom User kommen weil ich im Browser irgendwas klicke und mache oder die die von einem Backend kommen weil sich da irgendwas verändert hat, weil vielleicht ein anderer User irgendwas geklickt hat und ich synchronisiert werden soll, da brauche ich dann auf einmal Logik für ja und das ist die Technik in Sambagger und. Diese Kombination, die ist ja

komplex. Ja, wenn ich so n Bagger baue auch mit lego Technik, da braucht man fette Anleitung und so, da hat sich jemand n bisschen was überlegt, dass das alles so klappt, da muss ich nämlich jetzt auf einmal statische Blöcke mit funktionierender Technik bei uns jetzt hier mehr Logik verknüpfen und dafür ist React nen Framework, dass ich das gut machen kann und ne Übersicht behalte bei so einem komplexen Wesen wie n Bagger ja oder bei

so einem komplexen Wesen wie einer fetten Webanwendung bei möglichen Sachen passieren müssen. Das mal so vorausgeschickt, das wird unser Bild ja. Ja, und und und vor vor React war das gar nicht möglich. Ja, es klingt jetzt fast so, als konntest du nicht interagieren mit Webseiten, bevor es React gab. Doch doch, kannst du schon alles? Ja, also es ist ja also am Ende. Was machen wir denn hier am Ende, die die Tools jetzt ganz technisch unten drunter sind?

Javascript ja javascript ist ne Programmiersprache die die fügt dem die fügt statischen Webseiten dynamische Möglichkeiten hinzu, ja. Und das kann ich jetzt auch mal sagen. React funktioniert immer noch

mit javascript. Ja es ist ne ist ne Bibliothek, im Prinzip ne javascript Bibliothek, aber wenn ich nur das blanke Javascript hab, dann ist es dann muss ich ja trotzdem noch sehr viel selber machen also es ist diese ganzen Getriebe und also bei auch bei bei bei Legotechnik muss ich ja jetzt nicht auch noch die wie soll ich sagen die Schläuche mir ausdenken und die selber bauen und diese ganzen Ventile und so weiter und die und die wie sagt man die Diplomatik wie heißt

denn das wenn das Zylinder ja danke den Zylinder und so weiter das ist halt vorgefertigt ja und? Dass der dass wenn du da dann oben Luft reinpumps, dass der dann rausfährt. Und wenn du unten Luft reinpumps, dass er, wie sie sich wieder reinfährt und so weiter also so Minimalsachen sind da quasi schon fertig. Ja, und diese Minimalsachen, das sind so Sachen, die kriegst du

dann von React mit. Ja und hier noch mal die Einsortierung, die sind halt schon ziemlich minimal und das ist das coole, es geht ja immer ums Abstraktionslevel ja, React ist noch, ja es bringt dir was mit, aber es ist auch noch nicht riesig, ja es sind es sind ganz kleine Komponenten. Die aber schon nen mehr riesigen Mehrwert bieten um dir den Bagger zu bauen. Aber du musst jetzt nicht noch ne Cut Zeichnung machen von deiner von deinem Zylinder oder Irgendsowas, der ist halt schon dabei.

Ja genau und wenn man wenn man sich jetzt ansucht ansieht, dann kann man also wenn man sich jetzt so n so n Bagger kauft im Geschäft ja und pack den aus und schmeiß den mal so auf den Tisch aus den ganzen Plastiktüten raus dann dann hab ich halt meine

ganzen Teilchen ja also Zahnräder seh ich Schläuche seh ich und sofort ja und die und jetzt in unserem Beispiel sind die immer erstmal alle grau ja haben keine Farbe ja das. Dazu kommt man nämlich auch noch.

Die muss ich nämlich die, die ich, die Anmale, das ist nämlich auch noch ne Sache, da hat React auch sehr viel Möglichkeiten, wie ich das machen kann und das bringt mich auch noch zu einem anderen Punkt, selbst wenn ich jetzt, ich springe mal voraus und sage, OK, wir bauen jetzt quasi mit React ne Anwendung, also wir haben es jetzt geschafft n Bagger zu bauen, ja dann habe ich den zusammengesteckt und der funktioniert kann ich ausprobieren, dann sieht es so

aus für den Entwickler, ja dann ist der dann ist der Bagger da. Und bei Lego Technik bin ich jetzt fertig.

Ja, den kann ich dann benutzen, das ist ein React Analogie nicht, da habe ich dann aber nur auch ne funktionierende Webseite, bin aber auf dem Development Server, hab das noch nicht fertig deployed, so würde ich nicht in Produktion gehen ne das will ich jetzt noch mal sagen bei React alleine damit macht man heute keine fertige Webanwendung, man braucht noch einen sogenannten Bundler ein Tool. Was was, wenn ich den React Code fertig habe, also den Bagger

gebaut hab, fertig? Was dann noch mal drüber geht und was bestimmtes Macht in dem Bild vom Lego Technik könnte man sagen so ich bau noch mal alles auseinander alle Teile hab mir gemerkt wie das sein muss und jetzt mach ich überall Sekundenkleber zwischen diese plastikblöcke ja dass das nie

wieder jetzt ist. Mein Ziel ist, das Ding darf nie wieder auseinanderfallen ne und dann mach ich noch irgendwie nen nen Lack drauf also nicht farblichen Lack sondern einfach nen Lack drauf und so weiter und sofort ja so dass das Ding.

Production Ready ist ja, dass ich den halt auch in die Sandkiste mitnehmen kann oder unter das Wasser tauchen oder was weiß ich so. Ja und vielleicht werden noch mal bestimmte Teile optimiert, wo ich irgendwie n zu schweres Teil gemacht hab, nämlich n leichteres oder Irgendsowas das ist der Wandler. Ja und das sind im im echten Leben sind das sind das, da gibt es eigentlich 2 Tools 2 also die ich so kenne 2 wichtige Tools, das ist der sogenannte CRA, das

liest man immer, heißt aber CRA steht für Create React App, das ist das ältere Tool. Das funktioniert im Hintergrund mit Webpack. Darüber haben wir auch schon mal gesprochen und im Prinzip ist das so, was ich sage, dass dann dem gibst du quasi deine fertige React Anwendung, die du halt kodiert hast und der nimmt es quasi noch mal auseinander, guckt was kann er damit optimieren, so dass es trotzdem Bagger bleibt und gleiche Funktionalität, aber dass es

quasi noch geschmeidiger funktioniert, das ganze Ding leichter ist. Ja dann wird er halt quasi zusammengeklebt und fertig gemacht, ja und dann kriegst du quasi nur hochoptimiertes javascript.

Was das Gleiche ist, aber noch schneller, ist ja vielleicht 30% und noch viel kleiner ist von der vom also im Code ist es dann halt kleiner von den Kilobytes ne, dann ist es wichtig den Bagger, den muss ich ja jedem Nutzer ne Kopie von dem Bagger hinladen wenn der in seinen Browser geht, dann ist der Bagger lebt quasi wenn er fertig gebandelt ist auf dem Server und jeder Nutzer der dann in den Browser kommt bekommt ne Kopie vom Bagger zum Spielen ne und der Bundler macht halt den

Bagger leichter beziehungsweise den Code. Klein ja, weil ich will nicht lange fette Megabytes runterladen, das ist wichtig, ja, heutzutage. Und der Bandler kommt aber immer einmal zum Einsatz, ganz ähnlich wie weiß ich nicht. N Compiler oder sowas. In dem Moment wo dir die Software zur Verfügung stellst oder released quasi ganz genau. Ja, und tatsächlich ist das, je größer deine React Anwendung wird auch n krasses Ding.

Ja also das der kann dann schon mal 20 bis 30 Minuten oder länger bundeln, damit der halt deinen Bagger durchoptimiert und zusammenklebt sag ich mal, dass der gut passt. Ja. OK, das passiert also jedes Mal mit unserer. Eigenen Software wenn du. Wenn ich dann hier so lese, genau, ja, so ist es und der

Bunlas hat hat dann ganz andere. Also man optimiert 2 Dinge ja und die sind sehr sehr unterschiedlich für den Entwickler, während der baut willst du ist dir das völlig wurscht, also da wird noch nicht mal alles immer neu gebaut, da ist wichtig, dass du sofort ausprobieren kannst.

Ja, als Entwickler veränderst du was am Bagger und dann willst du sofort gucken, geht das jetzt ja hab ich das hab ich das Zahnrad richtig da dran gemacht, ja. Das sind, das ist auch wichtig, und das sind, das Macht auch, das Macht auch normalerweise React nicht, das sind auch Tools, die Drumherum sind. Meistens ist das im Bundler mit enthalten, der Bundler macht es fertig für Produktion, der hilft dir aber auch, dass du damit

cool entwickeln kannst. Ja, dass du sofort wieder den funktionierenden Bagger hast, den du ausprobieren kannst. Ja, mal grob gesprochen, das ist der Development Server, der sogenannte und der, der führt, der, der führt dazu, dass nicht immer der ganze Bagger noch mal neu gebaut werden müssen, sondern nur die Teile, die du gerade brauchst. Die werden dann noch mal schnell ausgetauscht und so weiter ja. Aber das das soll mal genug da sein.

Ich will nur noch mal erwähnen, was heute der moderne Wandler ist wird es wird vit ausgesprochen glaube ich. VITE funktioniert innen drinne auch ganz anders als als Create React App und ist glaube ich in vielen Belangen create react App voraus. Ja also es ist moderner, es ist schneller, ist das was da rauskommt führt schneller aus

und so weiter ist also. Wenn jemand jetzt heute n React Projekt anfangen würde, würde ich sagen, guckt euch mal Beat an. Ne, das ist das modernere wird tatsächlich basieren noch auf dem CRA, weil das damals als wir angefangen haben The Shit war sag ich mal, ist jetzt auch schon wieder n bisschen outdated, aber es ist auch nicht einfach, das kann ich jetzt auch schon mal sagen, den Wandler einfach auszutauschen das das kann mehr Schmerzen geben als

man denkt. Ja das vor allen Dingen bei einer großen Software, OK. Hat das gepasst?

Mit dem Bildgerät hast du ne Vorstellung was was jetzt so REACT ist und also React noch mal zu wiederholen, dass wir das abgeschlossen haben, ist quasi der der der Baukasten, die Steine, die Tarnräder und der Bundler ist quasi so n Finisher zum Schluss so. Das das hab ich schon alles nachvollziehen können und was mir noch nicht ganz klar ist und ich weiß nicht, das ist vielleicht eher Grundlagen als Deepdive. Was ist eigentlich dieses

grundlegende Problem was irgendwie React gelöst hat sag ich mal als es damals eingeführt wurde, weil deine Aussage war ja

ja klar, waren Webseiten schon davor. Interaktiv oder oder oder Web Produkte wie auch immer, aber irgendwas muss ja dazu geführt haben, dass das, dass man gesagt hat, so, jetzt brauchen wir was neues, ja, und das muss ja irgendwas grundlegend verändert haben, weil jetzt ist es ja extrem verbreitet und überall im Einsatz, also wo hat das angesetzt, kannst du da noch was zu sagen?

Ja, also ich meine es. Du hast halt das Problem, dass du, dass du, wenn du wenn du Webanwendungen machst, die nicht nur statisch sind, dann hab ich ja schon gesagt, dann brauchst du halt irgendwie Logik, ja. Wenn du das irgendwie anfängst, Bild alleine, ohne ohne irgendwelche Struktur aufzuschreiben und das groß wird, dann endest du normalerweise im Chaos da und dem Spaghetti ja, weil weil es ist nämlich auch so, dass dass Logik und also dass Komponenten,

die du anzeigst und aber auch Logik sich ganz viel wiederholen, ne. Also wieviel 1000 knöpfe hast du zum Beispiel auf einer Webanwendung? Ja und wieviel 1000 mal machen die halt einfach wieder on click ja und wieviel 1000 mal willst du irgendwie wenn bei on click

irgendwas ausführen? Ne innere Logik ja irgendwas machen und sofort ja und so ist es auch, da passt das Bild auch wieder in Lego Technik du hast halt immer mal wieder nen Zahnrad und n Getriebe ja und den Bagger hast du viele davon ja und die sehen immer wieder gleich aus so und das ist das Problem das React gelöst hat, es hat das extrahiert den kleinsten gemeinsamen Vielfachen. Wie schaffe ich es, Wiederverwendbarkeit und Organisation reinzubringen in

sowas komplexes, was Building, Blogs und Logik hat? Ja und und und und auf Events reagieren muss ich aus verschiedenen Quellen kommen können. Ja und ich glaube das ist gar nicht so einfach, das ist nämlich n. Ja man muss sich überlegen, was, was wollen wir denn machen ne ich geh das mal durch, ja wir müssen nämlich Events von Usern empfangen und drauf reagieren ja und und das drauf reagieren heißt wir müssen da muss dann n

bestimmtes Stück Logik laufen. In dem in der React Anwendung wenn ich den Knopf drücke mal zum Beispiel was in einer anderen Farbe an oder irgendwas das ist die Logik, ja dann hab ich im schlimmsten Fall noch nen Backend, das denkt React noch mal gar nicht mit, das ist nen Backend ist nicht nötig ja ne Backend Interaktion mit für für ne React Anwendung aber das ist ja meistens so, dass ich irgendwie noch n Backend synchronisiere, dann dann muss ich quasi vom Backend aber auch

Events entgegennehmen wenn ich bin synchronisiert oder jemand anders hat was gemacht und du musst synchronisieren also da hab ich quasi auch wieder eventeingang. Ja, und mein Bagger, aber nicht vom User, sondern vom vom Backend. Das muss auch wieder Logik haben und dann muss ich alles synchronisieren und dann muss es

auch noch schön angemalt werden. So und das das hat React klar gezogen und zwar in der Kern in dem Kern Design, Konzept der Komponente, da steigen wir jetzt mal ein mit dem Deepdive OK das. Heißt, man könnte vielleicht sagen, dass man vorher schon genau beschreiben musste, wie etwas passiert. Also. Das heißt, ist das zu ändern?

Hier ist was zu ändern, dann muss da noch mal irgendwie die Farbe geändert werden oder sowas, das hab ich mal ändern gesagt, aber du weißt was ich meine, jetzt kann man nur noch eher sowas sagen wie was möchte ich eigentlich und es passiert wie ja also von wie zu was. Das also das wichtigste Konzept,

und da gehen wir jetzt drauf ein, ist das React bietet mir in seiner Bibliothek das die sogenannte Komponente und ne Komponente ist was sehr weites, aber wir gehen das mal durch, ja. Ne Komponente kann bestehen aus aus darstellenden Blöcken, ne, also jetzt im Web gesprochen einfach Sachen die die man anschauen kann, Knöpfe und so weiter darstellende Elemente einer Logik einer Business Logik ja und optional quasi an Anleitung wie das auszusehen

hat. Also anmalung ja ich hab ja gesagt die Steine sind alle grau am Anfang ja so und das ist wichtig und die Komponente kann aber einen beliebigen die kann jetzt beliebig groß oder klein sein und. Das ist das erste. Ja, also erstmal hab ich ja nur

die Steine locker liegen. Wenn ich jetzt die ersten 23 Steine aufeinander baue und baue quasi quasi nen Minimodul von dem Bagger n ganz kleinen Teil und so wenn du die wenn du mal so durchgehst so diese Anleitung kennt jeder von Legotechnik die sind so ja im Prinzip könntest du sagen und und manchmal ist das auch, sogar das gibt so ganze Kapitel ja aber manchmal machst du ein 2 Seiten baust du irgendwas zusammen und dann wird noch mal so n Bild gezeigt von einem kleinen Teil was jetzt

fertig ist. Das legst du meistens zur Seite und dann baust du was anderes so ja du baust so. Aus aus den kleinen Steinen baust du so kleine Module. Ja, und wenn du die Module hast, dann fängst du auf einmal an, die Module ineinander zu kleben. Ja und dann und manchmal geht das auch erst, wenn du beide Module fertig hast.

Dann verbindest du die mit dem Schlauch und vorher hätte das nicht geklappt oder irgend so was, weil die dann nicht bauen kannst, weil der Schlauch andauernd rumhübelt und so weiter ja das sind die Komponenten ja alles was ne alles was ne Mixtur ist von Steinen die du aufbaust und deren Zahnräder, das ist mal die Logik ja oder die Hydraulik, die Schläuche, das ist nämlich mal die Logik, das kannst du ja schon mal bauen n Stück. Betriebe mit n Stück Stein mit

bestimmten Farben, die du ausgewählt hast. Das ist ne Komponente in React. Ja und die und jetzt jetzt gehen wir noch mal kurz, wir wollen ja nicht nur hier über Legotechnik schwadronieren, sondern auch über React, die die Steine jetzt noch mal ganz ehrlich gesagt, das sind im Prinzip die HTML Bausteine, ja die HTML Elemente, ja das sind ja die die Dinger die die wir sehen können in der in der UI ja im Web ja. Und die Farbe, das ist das CSS, ja die, die das das anmalen.

Ich kann ja sagen irgendwie n diff Element hat zum Beispiel Background Color red, dann wird das ganze Viech halt, dann ist es halt mit einem Rechteck was rot ist ja zackboom ne und in einem React Komponente das ist wichtig wenn wenn es das hat, das ist optional, es muss es kann auch nur Logik haben ne es kann auch nur Steine haben, das ist auch wichtig zu verstehen ne es kann ne Komponente geben die hat keine Zahnräder und keine Schläuche, das ist einfach nur n Stück.

Was weiß ich. Die Schaufel mit dem Gelenk oder Irgendsowas ja zusammen ja dann, dann kann das erstmal nichts machen, weil da nichts dran ist. So ist Test. Irgendwie ist n statisches Teil, aber es macht vielleicht trotzdem Sinn das zu haben. Ja weil ich es irgendwie noch mal verbrauche oder irgendsowas ja, die Schaufel war jetzt n blödes Beispiel, hatten Bagger nur eine von ja aber was weiß

ich irgendwie. Keine Ahnung so n Kettenglied oder Irgendsowas. Ja da brauch ich dann halt ganz viele und so weiter das ist dann halt das Kettenglied, ist vielleicht auch schon mal aus aus mehreren Sachen gemacht, so und dann brauch ich halt ganz viel, kannst du dir das vorstellen? Ne ganz.

Gruppe, das sind ja so so Baugruppen aus Einzelkomponenten. Richtig, man muss halt einmal raffen, aber man muss halt einmal verstehen, und das ist das grundlegendste Konzept, deswegen wiederhol ich das noch mal in, in, in, in, in React und das ist das coole und das machen andere Frameworks anders. Ja, in React ist ne Komponente die Mixtur aus. Bausteinen, also nur sichtbaren statischen Elementen und optional aber schon der Logik

mit drin. Ich Kapsel also in ein Modul, wenn ich will, Logik, Bausteine und deren Farbe und jetzt kommt der springende Punkt und jetzt bietet REACT ne ganz krasse Möglichkeit diese Bausteine ineinander zu nesten ne, also ich kann jetzt und und das ist ja das ist völlig willkürlich, das ist jetzt im Ermessen des Entwicklers.

Was sind meine Komponenten? Ne Komponente ist tatsächlich abgeschlossen, das sehe ich, das ist auch ganz klar, das ist nämlich ne nen Pfeil typischerweise n React JS ne Komponente hat immer nen Pfeilnamen und ne Komponente jetzt auch mal richtig gesprochen ist eigentlich nur ne Funktion, das ist ne javascript Funktion, die hat Parameter die da reinkommen und die nennt man Properties sozusagen gleich noch was ja und in wenn die wenn diese wenn diese Komponente

anzeige Bausteine hat, dann können diese Bausteine jetzt aber wieder andere Komponenten schon sein. Das ist der Knackpunkt. Ja, du kannst Komponenten komponieren, andere Komponenten in Komponenten haben ja und wild ja und das Bild ist, wenn man jetzt quasi von der Anleitung rückwärts blättern würde, in der in der in der Legotechnik, dann hast du ja zum Schluss immer größere Sachen.

Ja, du fängst an mit vielen kleinen Modulchen und später siehst du OK das das ist der ganze Unterbau von dem Kahn zum Beispiel, ja, und der besteht jetzt aus diesen 15 Dingern, die ich gemacht hab, ja. Und jetzt?

Jetzt ist die React denke, ist der gesamte Unterbau von dem Kran, ja nennen wir ihn unterbaupunkt JS wird in einem Pfeil stehen, der halt, das heißt halt Unterbau JS ja und wenn du wenn du da in diese Komponente reinguckst in diese Bausteine, die wird die die wird dann Bausteine laden und benutzen die du vorher gebaut hast. Das heißt du kannst in den in der Komponente, die der kleinste Baustein ist NHTML Element Input Div Button oder Irgendsowas ja.

Da kannst du nicht mehr kleiner, aber du kannst abstraktere Bausteine du vorher definiert hast, einladen in ne Komponente die generischer ist und das ist total wichtig, weil die Logik miteinander spielen musst. Du musst, du musst nämlich jetzt sagen, der Unterbau, der braucht ja ne Schnittstelle, du wirst ja die Zahnräder müssen ja ineinandergreifen, ne, du baust ja ne kleine Komponente und wenn das aber funktionieren sollen und die Schläuche und so weiter du musst ja verbinden, ne, du

musst ja von oben. Von dem Gesamtunterbau deine Schläuche weiterhangeln nach unten bis zur kleinsten Komponente, dass wenn der wenn der Nutzer später irgendwie den Knopf aufdreht, mach mal Schaufel hoch, Pneumatik an, ja, dass das auch alles läuft, ja vergisst du da n Schlauch berührt sich da n Zahnrad nicht funktioniert das nicht so und das ist die Kern, das ist die Kernlösung wo React quasi dem Programmierer das bietet, dass wir Logik auch weiterreichen

können in geschachtelte Komponenten und das nennt sich Properties ja. Das ist ganz wichtig. Ja, das ist der Erste, das also das erste Konzept ist Komponenten, das zweite Konzept ist, sind dann die Properties, da gehen wir gleich, aber du hast ja was auf der Zunge gehört. Ja, ich glaub ihr habt das schon verstanden. Nicht. Mir ist nur wichtig, dass wir das auch noch mal auf ne echte Webanwendung übertragen und nicht nur von Bagger reden.

Und ich als du es. Gerade erzählt hast, musste ich die ganze Zeit an ihren Ikea denken.

Ja, das ist sehr ähnlich, würde auch passen, also so ne Komponente zusammen paar Schubladen schiebst die dann in den Schrank und der Schrank wird vielleicht n Teil deiner Küche und Pipapo also so so so ne Art aber in in irgendeiner Anwendung. Stell ich mir, jetzt weiß ich nicht irgendwas vor, ich, ich, ich löse irgendwas aus, ich drück irgendwas und dann verändern sich ganz viele Dinge gleichzeitig auf dem auf auf meine Anzeige und meine UI

gerade. Ja. Weil es eben diese Kommunikation unter den Komponenten gibt. Ja, weil die hintereinander genestet sind, vielleicht so

irgendwie. Ist genau richtig. Gerrit ist genau richtig und das das das und das nehmen wir noch alles genau auseinander wie das ist. Tatsächlich ist das nämlich wichtig. Es hat ne Hierarchie, wie du schon gesagt hast. Ob du jetzt Ikea nimmst oder oder mein Beispiel mit dem Bagger. Und wenn du jetzt was drauf drückst, dann verändern sich viele Sachen, aber nur die, die in der Hierarchie durchfließen von abstrakter Komponente zu weniger abstrakter bis zur bis zur letzten Komponente runter.

Man spricht auch von einem Baum und jetzt noch mal wirklich das Beispiel, das ist der Dom ja ne Webseite wenn du HTML siehst ist genauso aufgebaut, du hast Elemente die du hier einander nestest. Ja ganz außen ist das HTML Tag. Und diese Texte gehen ja auf und schließen sich ja und innerhalb der Text machst du wieder Text und wieder Text.

Ja, und das realisiert quasi, das ist das Ergebnis davon, du programmierst das in javascript diesen Komponenten und was e Act daraus produziert, ist dieser virtuelle Dom, wie man es auch nennt, das ist im Prinzip ne HTML Seite, die genau das macht, ja und die schickt halt wenn du auf on Klick n Button klickst und du musst quasi ganz viele Sachen verändern, dann musst du

deine. Wenn du es jetzt erst mal ganz naiv machst, ich sag gleich, was es noch für Möglichkeiten gibt, aber dann musst du deine Komponenten, die alle jetzt sich jetzt verändern sollen, ineinander genestet haben und diesen diesen State Change, was es ja ist. Also die Zustandsveränderung ich klicke jetzt, was ja durchreichend zu allen Komponenten, dass die das auch merken, ja weil du die ineinander komponiert hast. Ja, und das machst du, indem du Properties weitergibst.

Ja, Properties sind einfach Eigenschaften, ne die die werden dann einfach weiter runtergegeben. Kann jetzt jedes. Element auf der untersten Ebene, sagen wir mal also die kleinsten Komponenten, die Klassenbausteine können, die Teil von mehreren solcher Hierarchien sein. Ja OK, müssen Sie also, also was heißt das, müssen Sie ja mal, macht ja Sinn o. K genau das macht Sinn, das kannst du machen.

Das das ist genauso. Ja, also es ist so, dass die Komponenten so n bisschen, also wenn du die als als als Pfeil hinschreibst, dann sind die wie ne klasse, wir hatten ja auch schon mal Klassen und Distanzen und so weiter du kannst Komponenten. Mehrfach einsetzen und die behalten aber ihren eigenen, die haben ihre eigene Vorstellung von ihrem State. Ja so und ich, ich mach das noch mal kurz an dem Bagger Beispiel noch mal.

Klar es ist so wenn du wenn du jetzt den Bagger lädst quasi sagen wir mal der User klickt im Browser auf unsere auf unsere Bagger Web application ne so dann hängt der Bagger schlapp so der hat nen Default state ne hängt schlapp, Schaufel hängt runter das Ding ist irgendwie gerade ausgerichtet irgendsowas ja und wenn du jetzt das erste Mal was machst mit dem Bagger. Zum Beispiel Schaufel hochfahren oder irgend so was.

Dann hast du ja dann produzierst du ja von außen erstmal ein Event und dann ergibt sich eine Zustandsänderung und zwar in sehr vielen Komponenten, möglicherweise ja, weil das Hochfahren von der Schaufel ist ja schon mal ein komplexes Ding, ja weil was weiß ich, was da alles passieren muss.

Ja, bestimmte Zylinder müssen etwas rausfahren, aber es ist nicht nur einer, sondern es sind vielleicht 3, weil die Schaufel dreigelenkig ist und so weiter und diese Zustandsänderungen, die müssen quasi dann gespeichert werden.

Also der State muss erhalten bleiben in in in den Komponenten. Ja, die müssen wissen was war mein letzter Zustand. Ja, denn ich hab ja vorher gesagt sind alles nur Funktionen, früher war das zum Beispiel nicht so, das war früher war waren die waren die Komponenten, das kann man auch noch mal auf der Tonspur sagen, Klassen von javascript und die Klassen wurden dann instanziert und die Instanzen haben immer die Eigenschaften, dass sie sich

ihren Zustand merken können, ja die haben halt immer n bestimmten State, ja den kann sich dann verändern ne also ich sag dann die Schaufeln n bisschen hoch. Dann ist es der Zustand, dann kann ich den wieder verändern, dann kann ich quasi, und das ist wichtig, ich muss ja relativ von dem wo ich bin, ne Änderung durchziehen.

Ja, im Code ist das immer realisiert, normalerweise über Instanzen, das ist so, wenn man objektorientiert denkt, ist es das, dann hab ich, dann hab ich den Zustand in Instanzen gespeichert, so war es auch bei React, früher hat man festgestellt, dass gar nicht so cool aus Performancegründen und aus anderen Gründen und jetzt sind das halt Funktionen und ich muss diesen Zustand über sogenannte Hooks, da sag ich gleich noch mal was zu. Quasi in diese Funktion mit

reinbringen, weil Funktionen an sich sind pur und zustandslos ja das ist ja dann so, dass sie jedes Mal wieder vergessen, hängt der Kran wieder schlapper, da war er wieder schlapper.

So, jetzt hab ich jetzt hab ich die die die die Properties genannt, also sind die diese Properties sind quasi die Zustandsbeschreibungen und Änderungen die ich weitergebe in die in die unterliegenden Komponenten, das ist Prinzip die Schnittstelle sowie wie ne Rest API eine Schnittstelle ist für Webkomponenten sind die Properties.

Jetzt mal im ganz Kleinen in so einer Projektanwendung die Schnittstelle zwischen meinen Komponenten, die ich gesagt hab, ja. Und die Properties sind vermutlich jetzt individuell pro Element oder pro Komponente. Also was ich ich kann halt weiß ich nicht true of false sein als

property oder ich kann. Nee, die Properties sind immer Key Value Pairs, ne, die sind ja nur true false, die sagen zum Beispiel irgendwie was weiß ich selected oder irgendsowas ja wenn du ne ich bin ausgewählt oder nicht, da könntest Du sagen selected und vom Typ bulien ne. Und die Properties werden definiert von der Komponente selber.

Also wenn hier zum Beispiel die Komponente Checkbox hätte ja die macht nichts anderes als ne Checkbox Hinzumalen, dann könnte die als Schnittstelle haben selected und dann und wenn die Oberliegende sagt Selected false, die gibt das tatsächlich auch so rein, die sagt dann selected als Objekt selected Doppelpunkt false ja die überliegende Komponente sagt, die muss gefälligst jetzt deselektiert werden, da sagt die Selected false, dann macht die Komponente Checkbox.

Ah, krieg, ich krieg ich selected falls ich mach meinen Haken da raus. Ja, sagt die obere Selected True, da macht ihr den Haken da wieder rein und der bleibt da so lange drinne bis bis sie wieder ne neue Ansage kriegt.

Ja und das und jetzt ist es wichtig, dass wenn es gibt, nämlich also die Komponenten hab ich ja gesagt, ich hab 2 Dinger, die haben ja die Logik und und das Angemale ja also also die Box quasi einfach nur von der Checkbox, die ist ja immer da, ja. Und die muss aber re rendert werden. Das ist jetzt auch noch mal so n Konzept, wenn wenn man so mit React Leuten spricht die die sprechen immer von re rendering. Ja wir müssen gucken dass es re

rendering hier ist. Das ist richtig re rendert und so weiter und sofort ja, denn das ist jetzt aber auch noch n wichtiger Punkt ja denn wenn du oben die Property änderst auf True, dann wird zwar die Logik in dem Java Script sagen, ja ja das soll jetzt mal gerendert, also das ist jetzt True, die Checkbox ist eigentlich angehakt wenn aber der React Prozess jetzt nicht den virtuellen Dom. Wo ich vorhin vorhin gesprochen hab, ne, also quasi die die Webseite die quasi simuliert

wird und dem Browser hingeklatscht wird, so funktioniert das ja die ganze Zeit. Ja das sag ich grad, dann mach ich grad noch mal kurz ne

Auszeit dazu. Ja, also wie sieht das aus normal aber in einem ganz alten System, da hat der Server uns ne fertige HTML Seite hin gepupst und der Browser hat ja einmal hin gerendert, dann war der Browser fertig, da kommt der auch nicht in Schweiß, der kriegt einmal vom Server das Ding und zeigt das an, bei React ist es im Prinzip so, da läuft ja das javascript im Browser im Client und der simuliert nen

Server selber. Und die ganze Zeit also mit mit unglaublich viel hoher Frequenz, zum Beispiel. Ja, das kann, das kann irgendwie, das kann 60 Hertz sein oder irgendwas so schnell wie dein, wie dein CPU, das halt so ab kann, wird halt ständig diese ganze Webseite unterm

Arsch vom Browser neu gebaut. Ja deswegen ist das reaktiv, deswegen ist das so schnell ja es es tut so, es ist deswegen auch virtueller Dom ja weil weil es virtualisiert wird als hätte ich den Server ja React React beamt den Server lokal auf dem Browser ja. Und es muss aber, damit du was siehst, tatsächlich auch das neu rendern, den virtuellen Dom.

Ja, wenn jetzt die Select von der Logik auf True steht, dann muss jetzt neu hingemalt werden vom Projekt, dass die dass tatsächlich das HTML Element auch auf Selected steht, das tut es ja, das kannst du auch beobachten mit den ganzen Dev Tools und so weiter ja es muss also einmal Zack diesen diesen diesen virtuellen Dom austauschen, ja.

Es tauscht tatsächlich nicht den ganzen Dom aus, und das sind die ganzen Optimierungen, die es da gibt, sondern, und deswegen ist es auch schnell, es muss nicht die ganze Seite laden, sondern es tauscht tatsächlich nur Klick, klick dieses Element aus an der Stelle in der Hierarchie von diesen, von diesen Komponenten, die da reingemacht sind, ja, zack, zack und der Browser merkt, Oh guck mal selected, jetzt muss ich den Haken dran malen und dann siehst du es, so funktioniert das ja

OK. So, und wenn wir das verstanden haben, dann sind die Properties, also die Schnittstellen zwischen den Komponenten und die fließen, und das ist n Problem, die fließen halt nur in die Richtung von oben nach unten durch, ja oder auf der Seite, das ist quasi nen Baum.

Ja kannst du dich vorstellen wie n Baum oben drückst du nen Hebel n globalen Hebel, der wertet in der Logik aus, das muss ich alles machen ja ich muss zum Beispiel bei der Komponente muss ich n Haken dran machen weil die Komponente will ne andere Farbe haben und so weiter und dann fließt das alles so runter, alle

Properties werden verändert. Von allen Komponenten, die Properties verändert haben, wird da virtuell Dom wieder neu gebaut und dann klack, klack, klack, klack, Klack krieg ich das alles angezeigt, ja, wunderbar. Ja, was ist das Problem? Das Problem ist, manchmal hast du so Änderungen. Also du hast im Code ne feste Verdrahtung von deinen Komponenten wie die Hierarchie ist. Und jetzt hast du sowas wie ich

will. Das Theming von Light auf Dark schalten und das ist ne krasse Sache, weil jede verdammte Komponente selbst deine Checkbox, ja die kann halt jetzt nicht mehr einen kleinen weißen Background zeichnen. Sondern die muss jetzt irgendwie auf einmal so n so n leicht hellen Hintergrund zeichnen und der Haken da drin muss auf einmal weiß werden, nicht mehr schwarz. Muss das denn ne weitere Property sein, die dann jetzt

die Checkbox hat? Ja, das wenn man das jetzt, wenn man jetzt was nicht hätte, was ich jetzt gleich erkläre, was für Act hat, dann müsste ich, wenn ich das Umschalte, dann müssten alle Komponenten die Property seaming oder nee oder light oder Mode, sagen wir mal Mode ja in Blintieren der entweder light oder Dark ist ja. So und jetzt jetzt jetzt kannst du dir ja vorstellen, dann kriegst du ja als Entwickler ne Plug. Ja, also da musst du ja was muss

die Checkbox Light oder Dark noch verstehen müssen da unten drinne, ja und dann muss ich das alles weiterreichen, ja dann kriegt dann Krieg, dann krieg ich ja immer mehr Properties, dann sind die Properties pro Komponente werden immer dicker und ich muss immer weiter runterleiten das ist wieso n Gewitter quer durch die Komponenten ja und ich muss es ganz oben anfangen, dass es auch überall verstanden wird ja und

dann gibt es aber vielleicht Komponenten. Denen ist da scheißegal ob Light oder Dark ist, weil die machen.

Zum Beispiel hab ich ganz am Anfang gesagt, nur ne Logik, die malen nichts an. Ja so und die müssen dann aber die hängen aber trotzdem irgendwo mit in dieser in diesem diesem Baum und dazwischen ne und die müssen dann den Krams aber weiterreichen obwohl sie es selber gar nicht brauchen, nur weil die Schnittstelle darunter das irgendwie wieder braucht und so ja merkt man das ist Kacke ja gibt es hat hat er vielleicht auch gemerkt, ist Kacke ja so gibt es da halt n zweites

Konzept wie ich quasi Zustände verteilen kann nennt sich Kontext Kontext. Kontext ist quasi ne Abkürzung. Ja Kontext schnall ich quasi drumherum um ne ganze Hierarchieebene, im Notfall um die ganze Anwendung bei bei sowas wie Light Dark mach ich das meistens ganz außen drumherum. Ja, also ist quasi die abstrakteste Komponente sag ich mal.

Ist keine Komponente, ist halt Kontext und und den Kontext ich kann mich quasi in den Komponenten wo ich es brauche, die können sich an den Kontext subscriben ja der Kontext ist jetzt hat jetzt auch diese Parameter Mode. Wer kann jetzt sagen Light und Dark?

Wenn jetzt meine Checkbox das braucht, dann sagt sie, ich subscribe mich und das mache ich in der Komponente gegen den Kontext theming oder wie auch immer wir nennen ja oder Light Dark Switch oder Irgendsowas ja das wäre auch ne Klasse, ja die wird irgendwo beschrieben ne und wenn der Kontext sich jetzt ändert und das ist n Knopf ja den drückst du ja einmal zentral

in der UI irgendwo, ja dann. Dann kannst du bei jeder Komponente sagen, ja, ich bin dran interessiert an diesen Änderungen und jetzt, weil ich muss dann tatsächlich mich irgendwie in irgendwie rendern, ja, und dann dann ist einfach mal diese ganze Hierarchie aufgelöst, die du sonst hast.

Mit mit Schachtelung von Komponenten, sondern du kannst quer durchs Beet sagen, ich bin interessiert, ich bin interessiert dich auch, ja, und wenn du es dann änderst, dann machen die Flubble und alle haben sich neu hingezeichnet und so funktioniert es auch in Wirklichkeit, so funktioniert Seeming zum Beispiel weil das ist ne. Das ist halt so ne Änderung jetzt beim Bagger.

Ja da könnt man sagen, OK, da gibt es oben den Knopf, sagen wir mal unser Bagger hat ganz viel LED Beleuchtung, die Steine sind nicht nur hier so wie wie wie wie normalerweise lego Technik, aber die haben quasi LEDS da drin ja und der Bagger leuchtet halt rot ja und dann drückst du oben auf den Knopf und dann wird da halt der ganze Bagger erstmal grün ja das sind ja auch nicht alle Steine die leuchten können so ja aber irgendwo sind irgendwelche Steine die sind halt grün, die

haben miteinander nichts zu tun, ja weil irgendwie unten die in der Kette ist irgendwie was grün ist oben im im Träger und so weiter so ja. Und aber damit das funktioniert, gibt es quasi Kabelverteilung in diese einzelnen Dinger und die müssen nichts miteinander zu tun haben, die müssen nicht das normale Interface der Komponenten haben, das nennt sich Kontext, damit muss man sparsam umgehen, weil hatten wir gerade geredet, weil weil dann ganz viel rendern muss, da das,

manchmal hat man das nicht mehr so auf dem Schirm als Entwicklung, man hatte n großes Ding, also wenn sich der Kontext ändert, dann muss das ist teuer für React, weil aber auf einmal auf ganz vielen Ebenen. Komponenten neu gerendert werden und wenn Komponenten neu gerendert werden, dann müssen alle Unterkomponenten neu gerendert werden, weil das geht nach Regeln in React. Aber es muss ja quasi wenn du ne abhängige Komponente hast von einer überliegenden Komponente,

dann musst du die im Notfall auch sich wieder anpassen und so weiter das heißt man muss damit n bisschen aufpassen ja aber der ist. So nutzt man dieses, dieses dieses context Feature, um tatsächlich jetzt auch. Styling zu vergeben oder oder zu implementieren oder ist das wiederum Nein, das das sortieren wir jetzt auch aus, wenn du

Styling sagst. Styling ist auch Teil einer Komponente, jede Komponente kümmert sich um ihr Styling allein erstmal ja und dazu gibt es auch, also beim Styling wirst du irre bei React, das ist auch einfach historisch so krass gewachsen, kommt immer wieder vor und zurück, aber was man mal sagen kann ist, dass die Idee einer Komponente ist auch ihr Styling zu beschreiben, ja und ihr Styling zu ändern, aber das

ist quasi. Komponentenlogik Gekapselte Komponentenlogik und du kannst es natürlich über Properties wieder ändern. Du kannst halt sagen, mach irgendein Styling und so weiter der Kontext ist ich hab nur n Beispiel genommen von dem Styling, der Kontext ist immer dann wichtig wenn du ja wenn du irgendwie ne ne state Veränderung haben willst die mit dem sonstigen normalen Flow von

deiner Dings nichts zu tun hast. Da wo du halt wild irgendwie Sachen anderes Beispiel ist zum Beispiel Drag and Drop, das wird typischerweise auch beim Kontext gelöst. Ja du kannst. Kannst dir ja vorstellen und unser Baggerbeispiel passt da jetzt nicht mehr, aber ist egal. Ja du hast halt quasi oft ist das so, dass die Komponenten natürlich auch miteinander was zu tun haben.

Also wenn du ne große App hast zum Beispiel, dann hast du irgendwie nen Panel links und n Panel rechts ja so wie bei uns zum Beispiel Wir haben n Panel links wo wir die die die Backend Logik aufbauen und Panel rechts wo irgendwie dieses Frontend Preview gerendert wird ja dann gibt es quasi wenn du dir das n Code angucken würdest, dann gibt es 2 große Komponenten, das heißt halt irgendwie flow Bilder.

Und das, das ist quasi die abstrakteste Komponente für die ganz was da alles drunter kommt im Flow Builder. Und dann kommen die ganzen Dinge und die ganzen Funktionen, die du ziehen kannst. Und dann gibt es ne andere Komponente und die haben beide nichts zu tun miteinander, die hängen quasi nicht direkt zusammen. App Preview ja jetzt willst du aber zum Beispiel vom Flow Builder irgendwas rüber Dragon in den App Preview, du Kombinierst auf einmal Sachen die architektonisch im Baum

nicht zusammen zusammenhängen. Ja und da kannst du wieder so n Kontext nehmen. Und sagen OK, wenn wenn aber jetzt hier dieses Drag Event passiert, dann sagen wir beiden Bescheid ja, in diesen verschiedenen Welten, ja, weil die müssen der, der, der, der, der der Drop, der der das, das das das UI vidget muss auf einmal sagen, oh ich muss zuhören, da kommt jetzt gleich einer angeflogen und dann muss ich mit dem was machen in meiner Logik ja.

Und dann macht er da gelbe Raben oder grünen Hintergrund, solche Sachen. Meinst du genau dann, du fängst schon an zu decken und dann dann leuchtet irgendwo auf einer ganz anderen Seite was auf. Ja und das das ist auch n typischer Fall für Kontext, weil du das das das speist du nicht über die Properties ab da bist du irre ja sonst muss dir. Das der Groschen gefallen, wenn sich das jemand angucken will muss man mal n Video von der Heisenberg anschauen, sieht man

das auch. Ja, das war n cooles Beispiel, Druck and Drop, ja. Also es gibt es gibt so n paar Klassiker wo da wo das wieder genommen wird ja Druck and Drop seaming halt ne so globale seaming Einstellungen ja mach mach alle Ecken n bisschen runder oder irgendsowas ja das gibt es ja auch ganz oft. Ja das sind so die Type. OK, Guthaben wir Kontext, dann wolltest du Styling machen oder die Hooks. Nee, zum Styling hatte ich was gesagt, das lass ich erst mal kurz so stehen.

Also das Styling passiert quasi in der Komponente selber, ich will, ich will noch mal was wichtigeres anderes sagen, die Hooks, ja die Hooks auch noch nicht. Ich würd jetzt noch mal sagen, was passiert. Wie kommt normalerweise eigentlich auch Krams in ne Komponente rein? Ne? Also jetzt mal am Bagger ich ich drücke halt n Knopf am Bagger oder ich ich leg n Hebel um ja was ist denn das jetzt in der

React Welt? Ja das ist das kommt eigentlich aus den Building Blocks ja wenn wir zum Beispiel es gibt ja Building Blocks, Input Element oder Button ja also es gibt bestimmte es gibt es gibt bestimmte Bauteile sag ich mal die sind halt dafür gemacht dass sie nen Input aufnehmen können ne. So im HTML gibt es die halt so wie im Lego Technik. Ja und jetzt passiert was Wichtiges jetzt ist jetzt gibt es quasi in der Wir sind jetzt in der Komponente noch ja und dann haben wir zum Beispiel

unten in den in der in dem JSX wie man das nennt, das JSX ist quasi rendert quasi so ne das sieht so aus wie ein bisschen HTM mit Javascript on Board ja das ist immer ein Teil der so ein JSX Teil das ist das steht immer Return kleiner Klammer auf und so weiter und dann kommt das JSX, das ist quasi die. Wenn ne Komponente das hat, die muss das nicht wie gesagt, aber dann rendert die. Das ist der Teil den du dann

auch sehen wirst. Dann rendert die was ja so und dann steht beim Button zum Beispiel Button und da steht da on Click und das ist das on click Event. Ja und dann steht da drinne typischerweise handle Click also on Click, das kommt dann quasi von das ist das ist Browser HTML Technologie ja wenn ich dann da drauf drücke ja auf den Button dann wird ne Funktion die ich da einhänge. Von meiner Komponente, das ist wichtig.

Die Logik ist in der Komponente mit drin, ne unten in der Funktion ist Return dieses ganze JSX, da gibt es dann den Button und da steht on Klick und dann kommt das handle Klick und das handle Klick ist ne ist ne Funktion in meiner Funktion von dem von dem in der Komponente die auch ne Funktion ist und das handle Klick muss ich jetzt implementieren, das ist dafür, dass die Komponente in sich selbst reaktiv wird. Ne, sonst ich. Ich muss ja irgendwie diese user

Events reinschneiden. So ja so und dann dann muss die erstmal selber damit klarkommen bevor die überhaupt anderen

Bescheid sagen kann. Wir haben jetzt gerade sehr viel gesprochen, wie wird Information weitergereicht ja wenn aber jetzt ich muss ja auch erstmal die Information initial verarbeiten, ja darüber rede ich jetzt ja wie wie funktioniert das als wenn ich auf den Knopf drücke bei React, dass überhaupt irgendwas passiert, ja das ist genau das was ich jetzt beschreibe on klick handle Klick ist ne Funktion und jetzt gibt es n zweites wichtiges Konzept. Wenn ich ne, wenn ich quasi die

den den Zustand der Komponente in sich selbst verändern will, weil ich nicht von einer anderen Komponente das bekomme, sondern von außen durch n on click Event durch den User. Ja du bist ja keine Komponente Gerrit, wenn du da auf den Knopf drückst, sondern du bist ja n User, das ist ne andere Geschichte, ja dann brauche ich, muss ich aber auch diesen Zustand persistierend speichern, das muss ich ja, damit muss ich ja umgehen können. Ja und das nennt sich State.

Blöderweise, da muss man aufpassen.

State hat eigentlich das Wort, ist eigentlich viel generischer, weil das zu tun hat mit Objektorientierter Krams, aber in in React muss man ganz klar sagen, gibt es die Props, die heißen auch Props, eigentlich heißen die Properties nein, niemand sagt Properties so wie weiß ich auch nicht, das ist wie n Spitzname, Props sind die Props so das sind, wenn die sich ändern, die kommen aber nur rein von Komponenten die über mir liegen, ja dann triggert das ne Zustandsänderung, dann wird

React quasi neu rendern wie ich gesagt hab. Oder aber, und das zweite Konzept, das haben wir jetzt, ist der State, und den setzt du, weil Henry Click wird sagen Set State zu irgendwas. Ja zum Beispiel checkt oder sowas oder nicht. Wenn ich die Checkbox war oder nee wenn ich der Button war, dann würde ich irgendwie keine

Ahnung was weiß ich ist egal. Ja aber also das ist der zweite Weg wie ich quasi dann sage jetzt hab ich n neuen Zustand erreicht, Logik wird Angeschmissen so ja und wenn ich den State gesetzt hab dann render ich selber neu und. Die meine State Variable, da kann ich jetzt irgendwas von

speichern on click. Ja da setz ich zum Beispiel Activated oder Irgendsowas. Ja das ist dann was abstrakteres Logik von dem von React und dieses Activated was ich jetzt selber habe was n Zustand ist über den State gesetzt in mir ist das der State kann ich weitergehen als Property zu meinen untergebenen Komponenten, da wandelt sich dann nochmal zu sagen kommt n User Event rein wird on click aufgerufen mach ich handle click setze mir nen State i am activated.

Gleich true. Ja und und ich mach jetzt aber nur n kleinen Teil von dem ganzen Business, dass ich aktiviert bin, muss aber jetzt in meiner Anwendung heißen, dass ich noch tieferliegende Komponenten neu rendere, weil die irgendwie was andere Farbe anmalen müssen oder irgendsowas und dann wird mein Activated ne property die ich nach unten weiterreiche für die anderen Dinger ja und die heißt vielleicht noch nicht mal so, das ist jetzt auch wichtig, weil

ich hab ja gesagt, die unterliegenden Komponenten definieren alle selber was sie für n Interface haben. Ich kann jetzt einfach mein activated true sagen. OK weiß ich ich für mich hab ich das jetzt Activated genannt, aber jetzt die unterliegen Komponente muss es halt checkt

heißen ja dann dann setz ich halt checkt gleich activated fertig. Ja weil das ist ja alles javascript ich kann ja programmieren, ich kann die Variablen ja mappen die ich Bock hab und das wird den ganzen Tag getan ne und dann jetzt merkst du vielleicht auch wie die Wiederverwendbarkeit reinkommt das heißt ich hab gekapselte Komponenten die haben die sind in sich schlüssig die haben Logik die können wiederverwendet werden und jetzt kann ich die

quasi. Überall, wenn ich das geschickt mache, wieder reinsetzen in verschiedene Sachen, ja, und dann dann dann wird meine Anwendung schlank. Ja und dann hab ich keinen Spaghetti mehr am Ende, ach so, das sind die, das ist Props und State und jetzt hab ich noch was, das muss ich auch noch, dass ich auch noch mal sagen auf der Tonspur, weil das auch ganz wichtig ist.

Es gibt natürlich noch viel, viel mehr, also werkcamp muss, gibt es ja Bücher, ja man muss das jahrelang lernen, so, aber wenn wir es im Podcast machen, dann musst du wenigstens die wichtigsten Dinger rauspicken, und das ist der Effekt, ja was ist jetzt n Effekt? Ein Effekt ist quasi ein Händler der inner Komponente beschrieben wird.

Das ist quasi so eine Art ständiger Sensor für innere Änderungen, der Effekt wird getriggert durch genau diese 2 Dinger, entweder durch eine Prop Change oder durch eine Stage Change. Ich kann eine Prop Change haben weil eine überliegende Komponente von mir mir was geändert hat oder ich kann einen Stage Change haben weil ich direkt zum Beispiel auf irgendein User Input Geräuscht habe oder irgend so was das sind ja sind beides Dinge.

Die dazu führen, dass ich irgendwie rendern muss, dass irgendwie was neu ausgewertet wird und der Effekt ist jetzt quasi, das ist total cool, das das, das ist ziemlich, das gab es nicht immer in in, das ist auch das ist n sogenannter Hook Use Effekt Hook ja wir lassen das mal weg, was diese Hooks genau sind, das ist ist einfach Technik, ja, aber im Prinzip kann man sich vorstellen wieso n Lauscher und dem Lauscher kann ich sagen du du lauschst nicht einfach auf alles, der hat so n

Filter unten drin, das nennt man Dependency Aree der sagt du Lauschst wenn sich die, die oder die State Property oder die zusammen alle 3 einer alles kannst du alles angeben, ja wenn da irgendwas passiert, dann werte mich aus und das ist ganz oft ganz wichtig, weil du hast ganz oft Logik, die nicht nur nicht nur nen Dummen einen Klick hat, sondern wo du kombinierte Sachen machen musst. Wenn der User geklickt hat und wenn vorher die Property auf irgendwas ist.

Das ist ja ganz oft so kompliziert, ja. Meine Property ist auf, ich bin in Test Mode. Ja und jetzt klickt jemand was was heißt denn das jetzt für

meine Logik? Ja, das heißt Ignorier das weil ich bin in Testing Mode ich bin nicht in Baumode ja so oder ich oder dann halt anders die Property oben ist zum Beispiel jetzt in Baumode und jetzt klickt jemand was jetzt muss ich was ganz anderes machen ja und jetzt brauche ich auf einmal die Beziehung von 2 zustandsbeschreibungsparametern ja die jetzt ausgewertet werden müssen und jetzt kommt der Use Factor weil das kann ja. Zu unterschiedlichen Zeiten

passieren. Vor 5 Sekunden hab ich auf Testing gedrückt und jetzt drückt mir jemand den Button ne dann dann dann läuft ja nicht gleichzeitig was in meinem Code.

So jetzt kommt aber dann den Effekt Hook und dann sagt er jetzt kannst du kleine kleine Logik schreiben, jetzt kannst du der würde dann laufen weil der hör ich jetzt quasi auf bin ich Test Mode und hab ich geklickt ja und jetzt machst du da drin einfach wieder javascript Logik und kannst wieder Zustände ändern im im Effekt Hook setzt du wieder den State um ja und dann kriegst du komplexe Logik hin ne? Und mit diesen konzepten Komponente Property weiterreichen zum Zustand ändern.

States selber setzen durchs Zuhören von Events, die von außen kommen und Effects, die quasi beliebig kombinieren können, Logik und dann auch wieder statesänderung setzen können, das sind die Kernelemente von so einer React Anwendung. Ja und dann schachtelst du den ganzen Kram und baust es wie ein Haus auf. Und die große Kunst. Jemand, der gut React programmieren kann, der hat n gutes Gefühl dafür, wie die Komponenten geschnitten werden müssen.

Ja, weil das ist ja total habiträr, nicht zu groß, nicht zu klein, wiederverwendbar, ja nein und so weiter und sofort, ja und die dann kriegst du so, so langsam kriegst du dann so ne Webanwendung hin, ne, ja wie wie wie kommt man dann zu so n also Plan ich das irgendwie schreib ich einfach mal drauf los was

ist so n Best practice um da tatsächlich die Komponenten so zu schneiden wie Sie Übungen, Übungen, ja Erfahrung, Übungen, Fehler machen. Neu machen, keine Ahnung. Da gibt es also es gibt, das ist einfach so unterschiedlich, das ist kein, es gibt erstens kein Grundrezept, es ist, das ist wie Architektur von Software, das musst du einfach, ich glaube es, es erschlägt nur Erfahrung, Erfahrung, was kann was ist

schnell, was ist langsam. Du musst dich genau auskennen, was ist denn React, was braucht lange zum Rendern, was zieht große Renderingbäume hinter sich, was nicht und so. Das kann aber auch Wurst sein, je nachdem was du für ne

Anwendung hast. Wir zum Beispiel Wir sind total drauf achten, dass sich dass sich nur das Rerendert, was auch wirklich rerendert werden muss, weil wir ganz viele Elemente haben, ne und dass es uns ganz langsam wird und dann Anwendung hast du irgendwie ne Tabelle auf einer Webseite ist auch

scheißegal, ne? Also da gibt es keinen, da gibt es keinen, kein Grundrezept, aber man muss was wichtig ist würde ich sagen bei React nicht einfach ausprobieren, sondern deswegen habe ich auch diese Folge gemacht. Lesen vorher verstehen ja. Projekt genau verstehen was gibt es, wie funktioniert das alles, was passiert bei props, Änderungen bei State, Änderungen, was sind die

Effekte, was löst da was aus? Diese wichtigsten Komponenten, Konzepte, das sind sehr viele, noch viel mehr als ich jetzt hier heute sage, aber die allerwichtigsten davon muss man sauber verstanden haben und im ganz Kleinen ausprobieren und mal debuggen, dass man ne Grundidee kriegt davon, was man da macht und dann muss man noch mit viel Erfahrung einfach rangehen, ausprobieren was passiert, gibt ja aber auch ganz viele Beispiele, Tutorials, dann kann man mit KE sich auch

Tutorials ziehen und so macht mal ne to do Anwendung oder irgend sowas ja. Kriegt man schon hin. Ne, ich will noch eine Sache sagen, ich fällt mir gerade ein, sonst vergesse ich die nachher mit dem Verschachteln von Komponenten. Ja ich hab jetzt immer so getan als könnte ich immer nur 1 zu 1 quasi verbaumen ja es gibt noch was ganz Wichtiges, das hat auch wie Act toll gelöst.

Das nennt sich das ist so ne Map Funktion, die gibt es auch in Javascipt ist die javascript Map Funktion wenn ich zum Beispiel ne Tabelle anzeigen will ich mach mal n krasses Beispiel die Tabelle selber, der Rahmen ist quasi ne Komponente jetzt könnte ich sagen jeder einzelne das wird auch oft so gemacht jede einzelne Row. Ist ne andere Komponente ist ne unterliegende Komponente von der Tabelle.

Ja ich das ist nicht die ganze Tabelle, ist nicht in einer Komponente ganz im Leben nicht, sondern es gibt die Außenkomponente mit dem ganzen Filtergedöns, sortierungs, Logit und so weiter und dann typischerweise hab ich für jede Zeile ne Komponente und ja, aber jede Zeile ist ja gleich, es sind nur andere Daten drin ja aber vom vom vom vom vom Webkrams ist das gleiche. Ja jetzt gibt es ne Möglichkeit zu sagen OK map mir quasi für die Daten die ich hier habe.

In in einem Blockbau und beim JSX kann ich sagen, OK, mach davon ein Array von Komponenten. Ja, das nennt sich Mapping. Ja, das optimiert React sehr krass.

Ja, das ist ganz wichtig, also das sind diese strukturgebenden Elemente sag ich mal der Komponenten, du kannst also entweder in der Komponente direkt eine andere Aufrufen oder ein Array von anderen rendern, ja die dann wieder rendern können und so weiter das soll ich nur noch mal sagen, weil das ist wichtig, das muss man kapieren, wenn man denn das ist ganz oft das Pattern, dass man so so tabellarische Sachen hat und so weiter da immer da. Machst du sowas sofort mit dem

RER alright? Ist denn jetzt der Punkt gekommen um noch mal Styling anzusprechen?

Weil das stimmt so als würdest du da noch was zu sagen. Ja das stimmt ja, pass auf also das das Styling ist ja immer ja ja und vielleicht noch ich hatte auch noch diese grauen Baggersteine irgendwie im Bagger Bestandteile irgendwie so im Hinterkopf so ja genau die grauen Steine ja noch ist unser Bagger grau ja also wir haben jetzt nur, also der ist funktional ja und fertig wenn wir ihn jetzt so gebaut haben mit Kontext Effekt und alles ja aber er ist leider grau.

Genau hier kommt die Farbe rein. Na ja, die Farbe, die Farbe machst du halt, da haben wir auch ne eigene Folge gemacht, deswegen will ich das jetzt nicht nicht großartig sagen, React hat keine vordefinierte, ist nicht opinionated man so schön sagt, dem ist das Vorschuh des Anmals, das ist das machst du selbst dann noch in der aber pro Komponente und jetzt gibt es halt und jetzt stechen wir so ganz bisschen an, also React, wie gesagt wird ja nie alleine genutzt, ich hab ganz am Anfang

schon gesagt ich muss immer hast erst mal n bundler und so weiter und dann das nächste was du normalerweise aussuchst ist irgendwie n Großes. Tatsächlich Framework würd ich dann sagen, was quasi ja vor noch mal vordefinierte Module und Ideen zum anmalen und so weiter standardisiert und auf

React aufsetzt. Jetzt noch mal unserem Lego Technik Beispiel, das ist dann quasi so, als würdest du jetzt irgendwie nicht n Bagger kaufen, den du wo du Blöcke hast, sondern du kaufst jetzt irgendwie was weiß ich willst jetzt irgendwie die Berglandschaft machen, ja und da da gibt es dann halt schon ganz viele Bagger und ganz viele andere Dinger sind also vorkonfigurierte Komponenten mit vorkonfigurierter Logik, ja. Das ist nun n Framework, zum

Beispiel Material UI von Google. Ja, das kennen wir alle, das da ganz viele Anwendungen sehen sehr ähnlich aus und haben diesen Material Style von Google. Ja und das ist trotzdem React ja aber React REACT an sich hat keinen Material Style ja das heißt jetzt aber einfach ich hab ne Bibliothek und benutze Komponenten die schon jemand für mich geschrieben hat, nämlich Google.

Und weil ich, weil ich alles, was ich vorher gesagt hab, passt jetzt ja, die Komponenten haben halt ne API Beschreibung quasi ja das sind also die Properties müssen da beschrieben werden, was macht die Komponente, was kann ich da konfigurieren ne aber ansonsten benutze ich diese Komponente als Blackbox, die heißt zum Beispiel Button Ne oder oder Akkordeon oder irgendsowas ja da geb ich halt über die Properties rein was ich haben will was das dann anzeigen soll die Daten quasi und die

Zustände und der ganze Rest ist fertig und wird von Google gemacht und da ist das ganze Angemale auch drinne ja. Das funktioniert dann so ja, da die die, da kannst du dann quasi, da gibt es dann extra Sektionen, das ist aber alles von Material UI gedacht, ja wie du dann ausdrücken kannst, dass du bestimmt Elemente anmaßt und so weiter da will ich jetzt nicht im Detail drauf gehen, ja, aber ja, im Prinzip geht das so und da gibt. Es ich glaub der Punkt, der ist

total wichtig. Das war mir so nicht klar. Also das MUI ist letzten Endes ein ein auf Projekt Aufsetzendes Design Framework oder so was könnte. Ich sagen ist ne komponentenbibliothek. Ne Komponente benötigt. OK, das ist es auch. Ich glaub, sie nennen sich vielleicht auch so.

Ja genau, die haben halt einfach ganz viele React Komponenten geschrieben, die super funktionieren, ja die funktionieren dann auf dem Telefon auch, ändern die dann schön und die funktionieren dann auf dem Laptop und so da da steckt ganz viel Arbeit drin ne aber die Komponenten sind so schön geschnitten, dass du die einfach wiederverwendbar in deinen Code einsetzen kannst. Ja und die haben sind von der Abstraktionsherbe noch n bisschen höher als React so, aber dann hast du halt quasi nen.

MUI Button, NMUI Akkordeon, MUI Navigation many MUI ist hat ne auch ne freie Open Source Lizenz. Ja sie ist ganz ganz einfach nehmen ja das Problem mit MUI ist und ich kann ja auch n bisschen was also mein Kopfschmerz ist das riesig weil die der Scheiß also das ist wie das Projekt Framework ändert sich halt auch, das geht relativ rasant durch die Version und auch durch die Ideen.

Ja ich hab ja gesagt da gab es mal Klassen da gab es Funktionen so und jedes Mal baust du komplett deine Webanwendung um ja. Und bei MUI genauso. Ja, die gehen heute durch die Version und jedes Mal ist das

wieder anders. Wie du das Styling da dran setzt und wie du die, also die brechen quasi mit ihrer eigenen Art wie von den Komponenten die ganze Zeit ja ist irre, sieht zwar irgendwie schick aus, aber du hast echt schon Schmerz, ist halt moderne Webtechnologie, aber das willst du auch erwarten, der Scheiß soll ja auch nicht aussehen wie immer vor 10 Jahren ne die machen halt weiter gut und und von diesen Komponentenbibliotheken gibt es halt verschiedene oder auf

verschiedenen Ideen Levels auch von abstraktionslevels ich sag noch mal eine zum Beispiel dev extreme ja. Ist auch im Prinzip ne Komponentenbibliothek für React, da sind die Komponenten aber noch viel größer geschnitten.

Ja, während du bei MUI zum Beispiel typischerweise n Button findest und so unsere Elemente wie n, dropdown und was weiß ich Input, Elemente, Text, Fields und so weiter hast du bei DEV x scheme riesig große Module. Ja, das heißt dann auf einmal da Data Grid Chart und so und das hast du so, da musst du überhaupt nicht mehr dran, dann bist du auf. Also du hast einfach nen viel dicker vorgebautes Ding. Ja so als quasi den Unterbau von Bagger kriegst du da schon

hingelegt. Ja so und dann kannst du das auch konfigurieren und es wird auch angemalt und so weiter und sofort ja, also das ist zu diesen Komponentenbibliotheken und dann die Möglichkeit deinen Kram anzumalen gibt es verschiedene irgendwie Act du kannst halt immer das ist was was wenn du du kannst es auch machen ohne dass du irgendwas da rein lädst. Das ist eigentlich im Moment geht es fast wieder dahin ja ich nutze gar nichts, ich mach wieder plain CSS. Und das ist schön.

Da hat jetzt React, das ist aber auch relativ neu, ne Möglichkeit gefunden, das nennt sich CSS Modules, es könnte auch CSS Components heißen, ist ja nicht schicker da, da sagst du quasi ganz normal, du schreibst NCSS Style Sheet hin, aber nur n ganz kleines und das ist Gescoped auf deine Komponente. Das ist wichtig, weil CSS funktioniert eigentlich, CSS hat ja mit diesen Komponenten Ideen von REACT nichts zu tun, CSS ist immer global, das malt alles an was du hinterm Virtual Dom hast.

Ja. Das willst du aber nicht. Du willst sagen, die Komponente die ist so angemalt und zwar immer so und das interessiert die auch nicht, wie andere Komponenten angemalt haben. Du willst das Kapseln ne und jetzt gibt es das modular CSS und da schreibst du quasi n kleines CSS hin, das aber gekapselt nur gültig ist für diese Komponente, das ist halt cool.

Ja so kannst du es zum Beispiel geil anmalen ne oder nimmst du halt inline Styles mit javascript kannst du immer inline Styles setzen, das ist The Way geht der geht immer ja da da kannst du immer typisch anmalen ne aber was du erreichen willst ist quasi. Komponentenspezifisch anzumalen ne, und da gibt es halt viele Lösungen. Ja so ne so ne Lösung und so also das geht vor und zurück und es ist grauselig und kriegst Kopfschmerzen.

Ja im Prinzip muss man sich eigentlich einmal für was entscheiden und das dann durchziehen ne aber weil die Historie sowieso ist. Wir haben auch 3 verschiedene Systeme zum anmalen, ne ist ne Katastrophe. OK, also schon ne Glaubensfrage irgendwie.

Glaubensfrage, so n leidiges Thema ich, ich kann es ich also ich ja. Es wär schön, wenn es nur 1 gäbe, aber dass es, wie das so ist, manchmal haben sich Standards durchgesetzt und manchmal nicht. Und da wo es nicht durchsetzt, dann dann schmerzt du halt den Schmerz ab. Ja von nicht standardisiertem Scheiß o. K du dann hab ich letzte Frage. Also von meiner Seite, was ist denn jetzt so wenn man in die

Zukunft schaut? Glaubst du Rack wird uns noch ne lange Zeit begleiten oder kommen auch neue andere Dinge die das wieder noch weiter verbessern und ersetzen könnten? Also ich hab zum Beispiel von Swelte gelesen oder Solid Jazz oder solche Sachen. Ach ja, es ist natürlich, da werden immer noch Welt neue kommen und so weiter aber ich glaube ganz fest daran, dass React was ganz langlebiges ist. Das wird uns noch für immer begleiten.

Ne, so was heißt für immer, aber es ist dann es hat ne riesige Community, es gibt einfach riesige Anwendungen die dann geschrieben sind, es ist einfach to big to fail im Moment das das würde das halbe Internet runterreißen, also den Webauftrag des halben Internets wenn jetzt React zum Beispiel tot wär, da hätten ganz viele Leute ganz viel Schmerzen und da

würden. Ganz viele große Firmen, auch ganz viel Geld reinblasen wenn ihr jetzt zum Beispiel Meter kein Bock mehr hätte, das zu entertainen oder irgend so was aus Eigeninteresse. Also das ist, das ist einfach die die Bibliothek, ja, und es ist auch immer, das sag ich jetzt auch noch mal durch diese Art und Weise, wie es gebaut ist, hat man ganz am Anfang gesagt, hat sie ja gefragt, was sind die Unterschiede zwischen Felte und View und und, Angular

und so weiter und sofort. Ich würde sagen, React ist so die Flexibelste von denen und diese, die und die wildesten Anwendungen, was halt die krassesten Web Apps wo irgendwie Sachen passieren, die man sonst nicht so sieht, die sind dann mit hoher Wahrscheinlichkeit wahrscheinlich im React gebaut, weil das halt die meisten Freiheitsgrade gibt durch dieses Komponentenbasierte Krams und nicht so vorgebaut ist.

Und jetzt sag ich das noch mal kurz, das kann man jetzt einordnen, ne während wir in React Komponenten machen können die Kombination aus Logik anmalen und Steinen sind. Oder auch nur Steine sind oder auch nur Logik sind oder auch

nur anmalen. Das gibt es auch, kannst dann auch schön kombinieren, ist es zum Beispiel bei einem eng oder so, da wirst du da wirst du, musst du erstmal lesen, hier in dieses Fall schreibst du anmalen in dieses schreibst du die Logik und in diesem Fall kommt nur das html, du kannst nicht das Bild kombinieren, du bist vom Framework gezwungen es so zu

machen. Ja und damit bist du ein bisschen limitiert, ja. Im Prinzip ist immer alles das Gleiche im Leben. Ja man, du kannst sagen es ist ne Low Coat Plattform für javascript oder Irgendsowas. Ja und wie hackt es quasi auf einem Abstraktionslevel sehr gering, sodass du damit alles Mögliche machen kannst. Dafür ist die Learning Curve n bisschen stabiler und du kannst auch Sachen ganz schön falsch machen. Du kannst auch Scheiße bauen, die halt langsam ist und so.

Du kannst damit aber auch krassen innovativen Kram machen, der ganz anders aussieht als bei anderen. Ja und bei Angular, da bist du halt mit einer kleineren Learning Curve schneller am Ziel, es läuft stabil und performant, ja. Bist aber eventuell n bisschen eingeengt an dem was du da so ganz krass machen kannst. Ja, die ist halt so. Immer dann. Gibt es halt hinter Use Case ist.

Genau. Und deswegen wird es auch so sein, dass immer wieder solche neuen Frameworks aufkommen und jedes bedient sein Use Case und ich will auch nicht sagen, dass React das Beste ist für für jede Anwendung. So, ich würde aber schon sagen, ist n ganz schönes Silverbullet kannst du also ganz einfache Sachen auch schnell machen, auch vor allen Dingen KI Unterstützung und so weiter sowie sehr komplexe, also ist schon meine lieblings sag ich mal Frontend bibliothek aber alle anderen sind.

Natürlich gerechtfertigt da und haben vielleicht n ganz ganz anderen kleinen Fokus und so weiter und es wie es immer ist, ja passt vielleicht für n anderen anderen Fall Anwendungsfall besser. Cool, ja, super Deep Dive. Ich hoffe das hat den Hörerwunsch erfüllt, der uns dann noch erreicht hat über über den Kommentar in der 1. Folge zum Thema. Ja, ich hoffe auch das war ne Herausforderung irgendwie auf der Tonspur React zu erklären. Das ist ja schon auch schriftlich und bildlich

irgendwie schwierig aus. Hat mich auch einfach n bisschen bisschen. Mich hat es ziemlich lang gekostet bis ich React durchdrungen hab, also allein die Konzepte ja kannst ich weiß noch, ich erinnere mich noch wie ich angefangen hab und war völlig verwirrt, dachte was ist das für mich mir total geholfen. Und ich hab auch ganz viele Sachen wiedererkannt, die Konzepte, unser Produkt sind und die mir jetzt klar sind, warum die so sind oder was dich da so getrieben hat. Ja, siehst du.

Ich, also ich glaube. Also es gibt ja, es gibt ja n paar sehr erfolgreiche Sachen wie zum Beispiel React, einfach in der Welt und warum ist es erfolgreich, weil die Designentscheidungen gesund sind, flexibel und skalierbar, und wenn man dann was Größeres baut, dann darf man ruhig mal schielen, wie das die Experten gemacht haben.

Ja und dann kann man, dann ist man nicht ganz, dann ist man wahrscheinlich nicht ganz falsch unterwegs mit seinen eigenen Designentscheidungen, die man einfach n ne Level höher gepusht hat, aber trotzdem ähnliche Sachen macht. Das sollte man tun. Ja, da gucken, wo es, wo es gut gemeint. Wird meine Device als Architekt, weil es die Strukturen sind, immer die gleichen? Ja, es ist nur das quasi das Tauchlevel ja so und aber Konzepte kann man übernehmen auf auf verschiedene Abstraktions

Label und und und. React hat es glaub ich hat n sehr ausgewogenes Konzept, da fehlt nicht so viel, das ist schon ziemlich cool ja mhm. OK, dann würd ich sagen machen wir Deckel drauf auf React JS machen wir und. Wir freuen uns auf euer Feedback dazu. Lasst uns n Like da n Abo, was auch immer, das hilft unserem Podcast immer weiter und gibt Burka Motivation sich zu tief in Themen einzuarbeiten. Behaupte ich mal. Ja, da hast du recht. Ja, macht Spaß, OK, cool.

Also dann wünsche ich euch was, ich sag mal zuerst Tschüss aus Hamburg und gebt dem Gerd noch mal das letzte Wort heute schöne Sommerzeit, wir hören uns in 2 Wochen bis dann ciao. Einfach komplex wird präsentiert und produziert von Heiseware. Wir freuen uns auf deine Fragen und deinfeedbackanpodcast@heiseware.com vielen Dank fürs Hören dieser Folge bis Dienstag in 2 Wochen und Tschüss aus Hamburg.