Begriffe erklärt – Was ist was? ein Überblick für React / React Native

Wenn man alles runter bricht besteht eine Anwendung aus Frontend und Backend. Das Frontend besteht aus verschiedenen Elementen, die die Benutzeroberfläche der Anwendung ergeben. Diese Elemente heißen bei React Native ‚Components‘. React Native hat eine (relativ kleine) Grundmenge von Basis Components die einem zur Verfügung stehen. Eine Übersicht dieser Components findest du hier: React Native Components. Möchtest du weitere Components verwenden, die darüber hinaus gehen hast du drei Möglichkeiten dazu. 1. Du schreibst sie selber mit den dir zu Verfügung stehenden Basic Components. 2. Du erweiterst Basic Components. 3. Du greifst auf Libarys wie React Native Elements zurück.

JSX ist die Syntax ie bei React und React Native verwendet wird. Sie erlaubt uns JavaScript und Elemente miteinander zu kombinieren. Zum Beispiel werden JavaScript Ausdrücke die innerhalb eines Elements verwendet werden, ausgewertet und als String an das Element zurückgegeben.

Hooks wurden relativ neu zu React hinzugefügt. Mit Hooks teilst du Components in kleinere Funktionen. So kannst du wiederverwendbare stateful Methoden bauen ohne die Component Hierarchie ändern zu müssen.

Wenn dich interessiert wie das geht, schau demnächst nochmal vorbei. Da veröffentliche einen Beitrag zum Thema Hooks in React.

Expo ist ein Open-Source Framework und eine Plattform für React Native Apps. Es ist um deine Anwendung herum gebaut und erleichtert den Entwicklungs-, Test- und Deploymentprozess für deine Anwendung. Die Entwicklung mit Expo bietet einige Vor- aber auch Nachteile zu der Entwicklung mit den CLIs.

Ein State in React ist eine Art Datenspeicher für den Zustand deiner Component. Du verwendest States um Daten von sich veränernden Componenten zu speichern. Wenn du User Input handeln möchtest benutzt du States dazu. Änderst du einen State über die Setter-Methode, renderst du damit auch deine Component automatisch neu. Möchtest du einen State über eine Component hinaus benutzen, empfiehlt sich die Verwendung von einem State Management wie Redux.

Redux ist ein State Management System. Du kannst die Libary einfach über zum Beispiel npm zu dem Projekt hinzufügen. Wenn man größere, komplexere Anwendungen schreibt enthalten sie auch ganz schnell eine Vielzahl von states und diese States wollen gemanaged werden. Das kann schnell sehr komplex und unübersichtlich werden. States die über eine Component hinaus verwendet werden (weil sie zum Beispiel die Daten beeinflussen) sollten also über ein State Management verwaltet werden. Verwaltest du die States so, werden sind auch in den anderen Components abrufbar und änderbar. Sobald du ein State änderst wird auch hier ein Rerendering ausgelöst.