Technologien, die wir verwenden: React

Einleitung

Heutzutage wird viel Software für das Web entwickelt: Skype, Discord, Visual Studio Code, Microsoft Office... Selbst wenn eines dieser Programme auf Ihrem Computer installiert ist, steckt oft eine Web-Technologie dahinter. Das liegt daran, dass das Web eine plattformübergreifende, leicht zugängliche und leistungsstarke Möglichkeit ist, Software zu minimalen Kosten zu vertreiben und dabei eine moderne Nutzererfahrung zu bieten.

Bei The QA Company verwenden wir häufig React, um unsere Web-Oberflächen zu entwickeln. So ist zum Beispiel QAnswer damit gebaut, und wir werden sehen, warum diese Technologie für diese Art von System besonders geeignet ist.

‍

Was ist React?

React ist ein Web-Framework, das von Jordan Walke, einem Software-Ingenieur bei Facebook, erstellt wurde und seit 2013 Open Source ist. Es ermöglicht Entwicklern, den Schnittstellencode auf eine besondere Weise zu schreiben, und React kompiliert ihn zu HTML, JavaScript und CSS, das von jedem Browser gelesen werden kann.

Wenn ein Entwickler React verwendet, erstellt er Komponenten. Praktisch alles, was über React gerendert wird, ist eine Komponente, und diese sind darauf ausgelegt, wiederverwendbar zu sein. Darüber hinaus hat sich React als sehr leistungsfähiges Werkzeug erwiesen, weshalb eine Community entstanden ist, die zu einer der größten auf Entwickler-Sharing-Plattformen wie StackOverflow geworden ist, wo React in der Entwicklerumfrage 2020 in der Kategorie „Web-Frameworks" den zweiten Platz belegte.

React-Komponenten bestehen aus mehreren Dingen:

• Ein Template: häufig mit einer speziellen Sprache namens JSX erstellt, die eine Mischung aus HTML und JavaScript ist. Templates sind das Skelett der Webanwendung.
• States: Ein State ist wie eine Variable, aber React verwaltet sie effizient. Ein State kann beispielsweise in einem Template verwendet werden, und wenn er aktualisiert wird, wird das Template automatisch entsprechend neu gerendert.
• Sonstiges: Es gibt viele weitere Elemente wie Side-Effects, Callbacks und Contexts, aber der Einfachheit halber können wir diese unter der Bezeichnung „Logik der Oberfläche" zusammenfassen. Ihr Zweck besteht darin, die Benutzeroberfläche mit den Servern zu verbinden, Benutzerinteraktionen zu verarbeiten usw.

‍

React für QAnswer

Wie bereits erwähnt, verwenden wir React in der QAnswer-Webanwendung, und diese Wahl ist nicht zufällig. QAnswer ist mehr als eine Webseite — es ist eine Single-Page-Application (SPA), die während der gesamten Navigation einen State beibehält. Dieser State umfasst hauptsächlich die Benutzerkontoinformationen (Benutzername, Datensätze, ...) und den Zustand der Oberfläche (auf welcher Seite sich der Benutzer befindet, welcher Datensatz angezeigt wird, ...). So bieten wir ein reibungsloses und schnelles Erlebnis, indem der Browser beim Navigieren zwischen Seiten oder bei Serveranfragen nicht neu geladen werden muss. React hilft uns, die Oberfläche mit dem aktuellen Zustand der Anwendung verbunden zu halten und dabei diese gute Nutzererfahrung aufrechtzuerhalten.

‍

Fazit

Wir haben gesehen, was React ist und warum es zu einer guten Nutzererfahrung in Webanwendungen wie QAnswer beiträgt. Wenn Sie mehr über React und sein Ökosystem erfahren möchten, können Sie die offizielle React-Website besuchen: https://reactjs.org/ — die Dokumentation ist gut und es gibt viele Lernressourcen.

‍

Vielen Dank fürs Lesen. Wir hoffen, es war hilfreich!

‍