Nachdem wir Ihnen bereits Angular und Vue.js näher gebracht haben, wollen wir nun mit React fortfahren. Dabei ist auch React eine JavaScript Library um User Interfaces zu erstellen. Dadurch soll es anhand des States der Applikation möglich sein, einen gewünschtes User Interface darzustellen. Wie Angular und Vue setzt auch React auf eine komponentenbasierte Anwendung, bei der man die erstellten Komponenten immer wieder verwenden kann.
React wurde dabei von bzw. bei Facebook entwickelt und fand 2011 erstmals für Facebooks Newsfeed Anwendung sowie später im Jahre 2012 auch bei Instagram. Ab Oktober 2014 wurde React offiziell zu einem Open-Source-Projekt, jedoch mit einer BSD-Lizenz mit zusätzlicher Patentlizenz. Dies führte zu grossen Diskussionen und wurde ab September doch unter der MIT-Lizenz veröffentlicht.
Installation
Um mit der Entwicklung mit React zu beginnen, sollte zuvor Node.js installiert sein. Wenn Sie eine React erstellen möchten, können Sie zunächst create-react-app
installieren. Dies können Sie über das Terminal mit dem folgenden Befehl tun:
|
|
Wenn die Installation erfolgreich durchgelaufen ist, können Sie innerhalb des Terminals in den Ordner wechseln, in dem Sie Ihre App erstellen möchten. Dort führen Sie anschliessend den nächsten Befehl inklusive des gewünschten App-Namens aus. Dadurch erstellen Sie ein Setup einer React App , mitt der Sie entwicklen können.
|
|
Dadurch erhalten Sie folgende Ordner Struktur:
Sobald der Erstellungsvorgang abgeschlossen ist, können Sie mit code .
VS Code öffnen, falls dies Ihre gewünschte Entwicklungsumgebung sein sollte.
Zum Schluss müssen Sie nur noch den Server innerhalb des erstellen App Ordners starten.
|
|
JSX
Anstatt die übliche JavaScript-Endung für Files zu nutzen, sollten Sie lieber JSX für alle Files bzw. für Komponenten nutzen. Dabei sieht JSX von der Syntax zwar wie ein Template Sprache aus, kann jedoch auf den vollen Funktionsumfang von JavaScript zurückgreifen. Des Weiteren wird darauf geachtet, dass alle Elemente, die geöffnet werden, auch wieder geschlossen werden müssen.
Dabei kompeliert Babbel bei dem Build-Prozess diese Files dann in React.createElement()
-Aufrufe. Dies hat den Vorteil, dass beim Programmieren kontrolliert wird, ob die Eingabe Parameter stimmen. Dies hilft Ihnen, fehlerfrei zu programmieren.
Natürlich gibt es auch dabei einige Dinge zu beachten. Sobald der Code über mehrere Zeilen geht, müssen diese Ausdrücke in Klammer stehen. Möchte man JavaScript Ausdrücke verwenden, werden diese in geschweiften Klammern geschrieben. Dasselbe zählt für CSS-Inline-Style. Auch wichtig zu wissen, dass die Attribute für HTML-Elemente nicht auf die übliche Art geschrieben wird, sondern hier wird auf die Schreibweise des DOM Element Interface zurückgegriffen.
Komponenten
Komponenten sind dafür da, dass Sie ihre Applikation bzw. Ihr User Interface in einzelne kleinere Stücke unterteilen können. Dabei sollten Sie darauf achten, dass diese nur von ihrem Input (den Properties) abhängig sind, damit sie auch an anderen Stellen wieder verwendet werden können. Dabei gibt es zwei verschiedene Arten von Komponenten Function Components und Class Components
Class Components
Wenn Sie solch eine Komponente verwenden, müssen Sie diese Klasse durch Component
erweitern. Ein weiterer Unterschied zur Function Component ist die render
-Methode. Wenn Sie Ihrer Komponente Properties übergeben wollen, können Sie dies selbstverständlich machen. Jedoch können Sie darauf nur über die Instanz Eigenschaft this.props
zugreifen.
|
|
Function Components
Diese Komponente wird als eine JavaScript-Funktion erstellt. Bevor React Hooks eingeführt hatte, war es bei dieser Art von Komponente nicht möglich, einen lokalen State zu verwalten. Dadurch erfüllt die Komponente nun alle Bedingungen, da Sie entweder null
oder ein React.Element
als Rückgabe Wert liefert. Um auf Properties zu zugreifen, können sie in den Klammern entweder die in zusätzlichen geschweiften Klammern den Property-Name übergeben oder Sie geben nur props
an und greifen über props.
und den Property-Namen darauf zu.
|
|
Um diese beiden Komponenten zu verwenden, müssen diese innerhalb des Files App.js
zunächst importiert werden. Anschliessend können Sie diese innerhalb des return
-Wertes verwenden.
|
|
Innerhalb des index.js
Files wird dagegen die App.js
Komponente aufgerufen, welche im Normal Fall als die oberste Komponente innerhalb einer React Applikation zählt.
|
|
Wie Sie oben auf Zeile 11 sehen können, wird hier auf ein Id root
innerhalb von document
verwiesen.
Diese ID können Sie in dem index.html
File finden. Dieses File stellt den endgültigen Inhalt Ihrer Applikation dar. Dabei wird nun Ihre App.js
in das div
-Element root
gerendert.
|
|
Event Handling
Natürlich haben Sie auch die Möglichkeit, Events innerhalb von React zu nutzen, wie zum Beispiel das Klicken eines Buttons. Ein Unterschied ist hier im Vergleich zu HTML Event-Attributen, dass die CamelCase-Schreibweise dafür genutzt wird. Dies bedeutet beispielsweise, dass aus onclick
innerhalb von HTML onClick
in React JSX Files.
Möchten Sie nun beispielsweise auf einem Button ein onClick-Event erstellen, dann müssen Sie via Event-Props eine Referenz zu einer Funktion übergeben. Dafür erstellen wir zunächst eine MyButton
-Klassen-Komponente mit dem gewünschten Button. Dieser Button soll bei einem onClick
-Event die Funktion onClickHandler
innerhalb der eigenen Klasse aufrufen.
|
|
Deshalb müssen Sie als Nächstes noch die Funktion erstellen. Diese soll bei jedem Click auf dem Button die Variable counter innerhalb des States um eins erhöhen.
|
|
Damit Sie auch den State mit der Variable Counter nutzen können, ist es notwendig, einen Constructor zu erstellen, der den State mit der Variable definiert. Damit der onClickHandler auch auf dieses State zugreifen kann, ist noch das Method-Binding notwendig.
|
|
Es gibt jedoch auch noch die Möglichkeit, dass Sie keinen Constructor erstellen müssen, sondern die Class Properties verwenden können. Dabei müssen sie nur den State definieren und die Methode als Arrow Function schreiben.
|
|
Styling
Für das Styling von Komponenten innerhalb von React können Sie auf verschiedene Varianten zugreifen.
Inline
Die erste Möglichkeit ist die Style Anpassungen mittels Inline Style vorzunehmen. Dies könnte dann wie folgt aussehen.
|
|
CSS-Klassen
Natürlich können Sie auch einfach ein CSS-File erstellen in dem Sie wie gewohnt ihre Styles festlegen. Dieses File müssen Sie anschliessend in der gewünschten Komponente importieren.
|
|
Innerhalb des CSS-Files können Sie beispielsweise anhand Klassen oder IDs das styling vornehmen.
|
|
Um dieses Styling nun zu verwenden müssen Sie in diesem Fall der gewünschten Komponente den className
übergeben.
|
|
CSS-in-JS
Eine weitere Möglichkeit wäre CSS-in-JS. Dabei wird der übliche Teil von CSS direkt innerhalb von JavaScript geschrieben. Dadurch ist es natürlich möglich, dass diese Komponente immer genau dasselbe Design hat, egal wo sie wiederverwendet wird.
Dabei ist einer der gängigsten Methoden die Verwendung von Styled Components. Dies müssen Sie jedoch zunächst über das Terminal installieren.
|
|
Anschliessend können Sie in Ihrer Komponente styled-components importieren. Anhand einer Variable können Sie das Styling vornehmen, in dem Sie bestimmen, was für ein HTML-Element es sein soll. Wiederum anhand von CSS-Attributen bestimmen Sie das eigentliche Design.
|
|
Innerhalb ihrer Komponente können Sie den Button nun ganz einfach anhand des Variablennamens verwenden.
|
|
Nun haben Sie die Grundlagen von React kennengelernt. Sie sind nun auf jeden Fall bereit anhand des nächsten Blog-Artikels auch noch eine ToDo-Liste zu erstellen.