React: Unterschied zwischen den Versionen
Lor (Diskussion | Beiträge) (Basis Seite zur library "React" erstellt, viele links noch nicht hinzugefügt, an machen stellen vielleicht etwas zu kompliziert.) |
Sn (Diskussion | Beiträge) K (Links) |
||
| Zeile 1: | Zeile 1: | ||
'''React''' ist eine [[JavaScript]]-Library, die hauptsächlich dafür verwendet wird, Benutzeroberflächen (UIs) für | '''React''' ist eine [[JavaScript]]-[[Programmbibliothek|Library]], die hauptsächlich dafür verwendet wird, Benutzeroberflächen (UIs) für [[Webseite]]n zu erstellen. Sie wurde von Facebook entwickelt und wird von vielen großen Webseiten und Apps genutzt, weil sie es einfach macht, dynamische und interaktive Webseiten zu bauen. | ||
== Was macht React? == | |||
React ermöglicht es Entwicklern, Webseiten in kleine, wiederverwendbare '''Komponenten''' aufzuteilen. Eine Komponente könnte zum Beispiel ein Button, ein Menü oder ein ganzer Abschnitt der Webseite sein. Diese Bausteine können immer wieder verwendet werden, was die Entwicklung effizienter macht und den Code übersichtlicher hält. | React ermöglicht es Entwicklern, Webseiten in kleine, wiederverwendbare '''Komponenten''' aufzuteilen. Eine Komponente könnte zum Beispiel ein Button, ein Menü oder ein ganzer Abschnitt der Webseite sein. Diese Bausteine können immer wieder verwendet werden, was die Entwicklung effizienter macht und den Code übersichtlicher hält. | ||
== Warum heißt es React? == | |||
Der Name '''React''' kommt von dem Wort '''"reaktiv"'''. Das bedeutet, dass Webseiten, die mit React gebaut sind, sofort auf Benutzereingaben reagieren. Das heißt, wenn du auf der Webseite etwas anklickst oder Daten eingibst, werden die Inhalte dynamisch und ohne Neuladen der Seite angepasst. In traditionellen Webseiten muss oft die ganze Seite neu geladen werden, um Änderungen anzuzeigen, aber mit React geht das viel schneller. React hilft also dabei, dass Webseiten '''"reaktiv"''' und dynamisch auf Benutzereingaben reagieren. | Der Name '''React''' kommt von dem Wort '''"reaktiv"'''. Das bedeutet, dass Webseiten, die mit React gebaut sind, sofort auf Benutzereingaben reagieren. Das heißt, wenn du auf der Webseite etwas anklickst oder Daten eingibst, werden die Inhalte dynamisch und ohne Neuladen der Seite angepasst. In traditionellen Webseiten muss oft die ganze Seite neu geladen werden, um Änderungen anzuzeigen, aber mit React geht das viel schneller. React hilft also dabei, dass Webseiten '''"reaktiv"''' und dynamisch auf Benutzereingaben reagieren. | ||
== Wie funktioniert der Virtual DOM? == | |||
Normalerweise arbeitet der Browser direkt mit dem '''DOM''' (Document Object Model), um die Webseite darzustellen. Wenn sich etwas ändert, muss der Browser den ganzen DOM durchgehen und neu zeichnen (rendern), was oft sehr langsam und aufwendig ist, besonders bei großen Webseiten mit vielen Elementen. | Normalerweise arbeitet der [[Browser]] direkt mit dem '''[[DOM]]''' (Document Object Model), um die Webseite darzustellen. Wenn sich etwas ändert, muss der Browser den ganzen DOM durchgehen und neu zeichnen (rendern), was oft sehr langsam und aufwendig ist, besonders bei großen Webseiten mit vielen Elementen. | ||
Der '''Virtual DOM''' in React funktioniert ein bisschen anders. Er ist eine virtuelle Kopie des DOMs, die komplett im Speicher (im Hintergrund) gehalten wird. Wenn eine Änderung passiert, macht React diese Änderung erst im '''Virtual DOM''' und vergleicht dann, was sich tatsächlich geändert hat. Erst nach diesem Vergleich wird der echte DOM angepasst, aber nur die Teile, die sich wirklich geändert haben. Dadurch muss der Browser nicht die ganze Webseite neu zeichnen, sondern nur die kleinen Teile, die sich geändert haben. Das spart viel Zeit und sorgt dafür, dass Webseiten schneller reagieren. | Der '''Virtual DOM''' in React funktioniert ein bisschen anders. Er ist eine virtuelle Kopie des DOMs, die komplett im Speicher (im Hintergrund) gehalten wird. Wenn eine Änderung passiert, macht React diese Änderung erst im '''Virtual DOM''' und vergleicht dann, was sich tatsächlich geändert hat. Erst nach diesem Vergleich wird der echte DOM angepasst, aber nur die Teile, die sich wirklich geändert haben. Dadurch muss der Browser nicht die ganze Webseite neu zeichnen, sondern nur die kleinen Teile, die sich geändert haben. Das spart viel Zeit und sorgt dafür, dass Webseiten schneller reagieren. | ||
== Wofür wird React verwendet? == | |||
React wird häufig für '''Single-Page-Applications (SPAs)''' verwendet. Eine SPA ist eine Webseite, bei der keine neuen Seiten geladen werden müssen, wenn der Benutzer auf Links klickt oder mit der Seite interagiert. Stattdessen wird der Inhalt dynamisch angepasst, ohne dass die Seite komplett neu geladen wird. Das macht die Benutzung schneller und flüssiger. | React wird häufig für '''Single-Page-Applications (SPAs)''' verwendet. Eine SPA ist eine Webseite, bei der keine neuen Seiten geladen werden müssen, wenn der Benutzer auf Links klickt oder mit der Seite interagiert. Stattdessen wird der Inhalt dynamisch angepasst, ohne dass die Seite komplett neu geladen wird. Das macht die Benutzung schneller und flüssiger. | ||
Ein Beispiel dafür ist '''Facebook''', wo der Newsfeed, Kommentare und andere Inhalte dynamisch in Echtzeit aktualisiert werden, ohne dass du die Seite neu laden musst. Hier zeigt sich die Stärke von React: Es kann dynamische Inhalte schnell und effizient verwalten. | Ein Beispiel dafür ist '''Facebook''', wo der Newsfeed, Kommentare und andere Inhalte dynamisch in Echtzeit aktualisiert werden, ohne dass du die Seite neu laden musst. Hier zeigt sich die Stärke von React: Es kann dynamische Inhalte schnell und effizient verwalten. | ||
== Vorteile von React == | |||
* Einmal erstellte Bausteine, wie Buttons oder Formulare, können auf der gesamten Webseite verwendet werden, was den Entwicklungsaufwand reduziert. | * Einmal erstellte Bausteine, wie Buttons oder Formulare, können auf der gesamten Webseite verwendet werden, was den Entwicklungsaufwand reduziert. | ||
| Zeile 23: | Zeile 23: | ||
* Da React weit verbreitet ist, gibt es viele Ressourcen, Tutorials und Community-Support, was das Lernen und Entwickeln einfacher macht. | * Da React weit verbreitet ist, gibt es viele Ressourcen, Tutorials und Community-Support, was das Lernen und Entwickeln einfacher macht. | ||
== Nachteile von React == | |||
* '''Längere Ladezeiten beim ersten Aufruf -''' Da bei '''Single-Page-Applications (SPAs)''' viel Code auf einmal geladen wird, kann es zu längeren Ladezeiten beim ersten Besuch der Seite kommen. Das liegt daran, dass die gesamte Anwendung beim ersten Laden in den Browser geladen wird, um dann dynamisch Inhalte ohne Neuladen zu verwalten. | * '''Längere Ladezeiten beim ersten Aufruf -''' Da bei '''Single-Page-Applications (SPAs)''' viel Code auf einmal geladen wird, kann es zu längeren Ladezeiten beim ersten Besuch der Seite kommen. Das liegt daran, dass die gesamte Anwendung beim ersten Laden in den Browser geladen wird, um dann dynamisch Inhalte ohne Neuladen zu verwalten. | ||
== Zum Weiterlesen == | |||
* [https://react.dev Offizielle Website des Projekts {{Flagge|GBFRJPCNTRES}}] | |||
* {{W3Schools|react|React Tutorial}} | |||
Version vom 6. September 2024, 08:17 Uhr
React ist eine JavaScript-Library, die hauptsächlich dafür verwendet wird, Benutzeroberflächen (UIs) für Webseiten zu erstellen. Sie wurde von Facebook entwickelt und wird von vielen großen Webseiten und Apps genutzt, weil sie es einfach macht, dynamische und interaktive Webseiten zu bauen.
Was macht React?
React ermöglicht es Entwicklern, Webseiten in kleine, wiederverwendbare Komponenten aufzuteilen. Eine Komponente könnte zum Beispiel ein Button, ein Menü oder ein ganzer Abschnitt der Webseite sein. Diese Bausteine können immer wieder verwendet werden, was die Entwicklung effizienter macht und den Code übersichtlicher hält.
Warum heißt es React?
Der Name React kommt von dem Wort "reaktiv". Das bedeutet, dass Webseiten, die mit React gebaut sind, sofort auf Benutzereingaben reagieren. Das heißt, wenn du auf der Webseite etwas anklickst oder Daten eingibst, werden die Inhalte dynamisch und ohne Neuladen der Seite angepasst. In traditionellen Webseiten muss oft die ganze Seite neu geladen werden, um Änderungen anzuzeigen, aber mit React geht das viel schneller. React hilft also dabei, dass Webseiten "reaktiv" und dynamisch auf Benutzereingaben reagieren.
Wie funktioniert der Virtual DOM?
Normalerweise arbeitet der Browser direkt mit dem DOM (Document Object Model), um die Webseite darzustellen. Wenn sich etwas ändert, muss der Browser den ganzen DOM durchgehen und neu zeichnen (rendern), was oft sehr langsam und aufwendig ist, besonders bei großen Webseiten mit vielen Elementen.
Der Virtual DOM in React funktioniert ein bisschen anders. Er ist eine virtuelle Kopie des DOMs, die komplett im Speicher (im Hintergrund) gehalten wird. Wenn eine Änderung passiert, macht React diese Änderung erst im Virtual DOM und vergleicht dann, was sich tatsächlich geändert hat. Erst nach diesem Vergleich wird der echte DOM angepasst, aber nur die Teile, die sich wirklich geändert haben. Dadurch muss der Browser nicht die ganze Webseite neu zeichnen, sondern nur die kleinen Teile, die sich geändert haben. Das spart viel Zeit und sorgt dafür, dass Webseiten schneller reagieren.
Wofür wird React verwendet?
React wird häufig für Single-Page-Applications (SPAs) verwendet. Eine SPA ist eine Webseite, bei der keine neuen Seiten geladen werden müssen, wenn der Benutzer auf Links klickt oder mit der Seite interagiert. Stattdessen wird der Inhalt dynamisch angepasst, ohne dass die Seite komplett neu geladen wird. Das macht die Benutzung schneller und flüssiger.
Ein Beispiel dafür ist Facebook, wo der Newsfeed, Kommentare und andere Inhalte dynamisch in Echtzeit aktualisiert werden, ohne dass du die Seite neu laden musst. Hier zeigt sich die Stärke von React: Es kann dynamische Inhalte schnell und effizient verwalten.
Vorteile von React
- Einmal erstellte Bausteine, wie Buttons oder Formulare, können auf der gesamten Webseite verwendet werden, was den Entwicklungsaufwand reduziert.
- Durch den Virtual DOM werden nur die Teile der Seite aktualisiert, die sich geändert haben, was zu flüssigeren und schnelleren Benutzeroberflächen führt.
- Da React weit verbreitet ist, gibt es viele Ressourcen, Tutorials und Community-Support, was das Lernen und Entwickeln einfacher macht.
Nachteile von React
- Längere Ladezeiten beim ersten Aufruf - Da bei Single-Page-Applications (SPAs) viel Code auf einmal geladen wird, kann es zu längeren Ladezeiten beim ersten Besuch der Seite kommen. Das liegt daran, dass die gesamte Anwendung beim ersten Laden in den Browser geladen wird, um dann dynamisch Inhalte ohne Neuladen zu verwalten.
