Ratgeber

Was ist eigentlich React?

(Bild: Thongchai Kitiyanantawong / Shutterstock)

Das Buzzword React ist seit ein paar Jahren überall. React Hooks, React mit GraphQL – solche Schlagwörter dominieren das Netz. Wer gerade erst angefangen hat, Coden zu lernen, und sich jetzt fragt, was eigentlich dahinter steckt – wir erklären es euch. 

Das Beste an moderner Webentwicklung ist, dass es in diesem Themengebiet so unglaublich viele Ressourcen gibt. Das Schlimmste an moderner Webentwicklung ist, dass es so unglaublich viele Ressourcen gibt, so dieser Autor in seinem Artikel auf Medium. Das mag euch vielleicht bekannt vorkommen.

Wer gerade erst angefangen hat, sich mit Entwicklungsthemen zu befassen, ist oft schon mit der bloßen Entscheidung, was er oder sie als nächstes – oder als erstes – lernen sollte, überfordert. Angular, Vue, Firebase, Bootstrap, Node.js, Docker, Python, Rust, Redux, Git, Babel, Webpack, Kotlin … die Liste ließe sich unendlich fortführen. Um zu verstehen, was hinter dem Hype um React steckt, ist es wahrscheinlich sinnvoll, ein paar Basics verstanden zu haben.

So ist eine Webanwendung aufgebaut

Eine Webanwendung besteht aus Frontend und Backend respektive Client-Side und Server-Side. Das Backend besteht aus Server, Applikation und Datenbank. Der Server kommuniziert mit der Datenbank und hostet eure Anwendung. Das Backend schickt Daten an das Frontend. JavaScript konvertiert diese Daten in HTML. Eine Webanwendung besteht grundsätzlich aus beidem, Frontend und Backend. Im Browser manifestiert sich das Frontend in Form eines User-Interface, also dem, was ihr seht und womit ihr interagiert.

Bibliothek mit Ressourcen zum Bauen von User-Interfaces

React ist ein JavaScript-Framework oder eine Library für die Entwicklung von User-Interfaces. Eigentlich ist der Begriff Library ganz passend: In einer Bibliothek gibt es eine Auswahl von Büchern, die von Bibliothekaren kuratiert und für euch sortiert wurden. Wenn ihr ein Buch aus der Bibliothek braucht, könnt ihr es einfach über das Bibliothekssystem finden und ausleihen. In einer JavaScript-Library gibt es zwar keine Bücher, dafür aber fertigen Code, auf den ihr zugreifen könnt.

Andere Frameworks mit demselben Zweck sind zum Beispiel Vue oder Angular. Mit anderen Worten: React ist eine Library für die Frontend-Entwicklung. Ein Frontend zu bauen, geht natürlich auch ohne Framework mit „reinem“ JavaScript, das auch Vanilla JavaScript genannt wird. Entwickelt wurde React von Facebook: Die Facebook-App und die Webversion basieren beide auf der Library. React eignet sich besonders gut für Single-Page-Applikationen und für interaktive Apps.

Single-Page-Apps

In einer Web-App gibt es verschiedene Ansichten oder Views. Klickt ihr auf einem UI irgendwo drauf, ändert sich die View. Viele Internetnutzer assoziieren eine Änderung der View vielleicht mit einem Seitenwechsel. Das ist nicht falsch: Frühere Webanwendungen bestanden typischerweise aus mehreren verschiedenen Seiten. Wenn eine neue View angezeigt werden sollte, musste dafür eine neue Seite geladen werden.

Eine modernere Herangehensweise sind Single-Page-Applications oder SPA. Eine Single-Page-Application besteht aus verschiedenen Views – bei nur einer einzelnen Seite. Diese Single Page enthält alle vorhandenen Views – die aktive kann dynamisch getoggelt werden. In einer Multipage-App wären alle Views, die eure Anwendung bietet, auf einer separaten Seite. Klickt ein User zum Beispiel auf einen Sign-in-Link in der Navigationsleiste, müsste dafür eine neue Seite, die die Sign-in-Ansicht enthält, geladen werden. Bei einer Single-Page-App ändert sich beim Klick auf Sign-in basierend auf dem State einfach die aktive View, das Laden einer separaten Seite ist nicht nötig. Aber was ist eigentlich ein State?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
Werner
Werner

Gute Zusammenfassung. Bei diesem Statement habe ich aber meine Zweifel:
‚regelmäßig neue Features dazu, die den Nutzern das Leben vereinfachen sollen‘

Sollen vielleicht…
Ob das aber so klappt?
;-)

React ist zwar sehr gefragt, aber ich habe mich trotzdem für VueJs/Nuxt entschieden. Der Code ist ’nicer‘ und insgesamt einfacher zu lernen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung