Entwicklungsumgebung einrichten – Tutorial zu React Native

Für die Entwicklung mit React Native ist es nicht möglich, die jeweiligen Entwicklungsumgebungen für iOS und Android, also Xcode und Android Studio, zu verwenden. Beide Entwicklungsumgebungen unterstützen nämlich nicht die Darstellung von Code in JavaScript oder TypeScript. Daher werden wir uns im Rahmen dieses Videos damit auseinandersetzen, welche Entwicklungsumgebungen wir stattdessen verwenden können. Die wohl wichtigste kostenfreie Möglichkeit, mit React Native zu entwickeln, ist mit dem Tool Visual Studio Code. Dieses finden Sie unter code.visualstudio.com und dort wird ein Download für die jeweilige Plattform, also beispielsweise Mac, Linux oder Windows angeboten. Nach der Installation von Visual Studio Code befinden Sie sich in dieser Startansicht. Als Nächstes können Sie nun Erweiterungen für Visual Studio Code installieren, die sich optimal mit React Native integrieren. Unter dem Reiter Erweiterungen können Sie nun beispielsweise nach "react native" suchen. Microsoft selbst stellt hier Debugging Tools und andere Tools für React Native zur Verfügung. Es ist äußerst empfehlenswert, diese in Ihrer Entwicklungsumgebung zu installieren. Außerdem nutzen Sie für React Native beispielsweise Android oder iOS die Programmiersprache Java und Swift. Für Java können Sie für Visual Studio Code eine Erweiterung installieren, sodass Java-Code entsprechend Highlighting hat und auch Debugging unterstützt. Für Android speziell empfiehlt es sich, das Android Debugging Plug-in zu installieren. Unter wenigen Umständen werden Sie davon Gebrauch machen müssen. Als ein Erweiterungspack für iOS gibt es noch React Native iOS Pack. Diese enthält mehrere weitere Extensions, unter anderem die React Native Tools, die Sie bereits installiert haben, als auch Tools zur Entwicklung mit Swift und Objective-C. Ihr Projekt können Sie dann im Reiter Dateien unter Open Folder öffnen. Sie wählen dann im Ordner Projects reactNativeDemo aus und öffnen diesen Ordner. Mithilfe von Visual Studio Code können Sie nun die Code-Dateien editieren. Da standardmäßig in einem React Native-Projekt auch eine ESLint-Konfiguration vorliegt, empfiehlt es sich, in den Erweiterungen auch ESLint zu installieren. Neben Visual Studio Code können Sie auch IntelliJ IDEA verwenden. Wenn auch IntelliJ IDEA ursprünglich eine Java-IDE ist, ist diese voll kompatibel mit der Entwicklung von TypeScript und Javascript. Unglücklicherweise ist an der Stelle die Community Version für die JVM und Android nicht ausreichend; Sie benötigen die Ultimate-Version. Im Rahmen einer 30-tägigen Testversion können Sie aber für sich herausfinden, ob IntelliJ IDEA oder Visual Studio Code das richtige Entwicklungstool für Sie ist. Nach einer Standardinstallation von IntelliJ IDEA ist IntelliJ IDEA bereits mit sehr vielen Plugins ausgerüstet, um React Native korrekt verarbeiten zu können. Unter Configure > Plugins empfehle ich Ihnen an dieser Stelle noch das Plugin für Styled-Components zu installieren. Ihr Projekt öffnen Sie dann mithilfe des Open-Buttons und im Ordner Projects befindet sich reactNativeDemo. Diesen öffnen Sie als Ordner und importieren ihn nicht als klassisches IntelliJ IDEA-Projekt. Im Ordner reactNativeDemo kann ich nun eine JavaScript-Datei wie beispielsweise Apps.js öffnen. Standardmäßig funktionieren hier alle Highlighting-Funktionen innerhalb von IntelliJ IDEA. Leider sind allerdings weder Visual Studio Code noch IntelliJ IDEA in der Lage, den Debugging-Prozess mit React Native optimal zu unterstützen. Das Debugging mit React Native funktioniert zunächst einmal in einem Chrome-Browser und den Chrome Developer Tools. Ein sehr nützliches Tool hier ist der react-native-debugger. Entweder zu finden unter der folgenden URL oder alternativ das erste Ergebnis einer Google-Suche. Unter 72 releases findet man dann eine Installationsdatei unter Assets für die jeweilige Plattform, beispielsweise eine EXE-Datei für Microsoft Windows oder auch eine DMG-Datei für macOS. Sobald man nun den React Native Debugger startet, sieht man, dass man hingegen zu den klassischen Chrome Developer Tools, die sich hier auf der rechten Seite befinden, zusätzlich einen Redux Debugger erhält und einen DOM Explorer. Dieses Tool aus den klassischen React Developer Tools, kann also auch auf React Native angewendet werden. Sollten Sie beim späteren Verbinden Ihrer App und dem Debugging Tool folgendes Problem haben, dass DevTools v4 nicht kompatibel mit Ihrer React-Version ist, so müssen Sie eine ältere Version des React Native Debugger installieren. Daher empfiehlt es sich, auf der Releases-Seite nicht eine Pre-release-Version zu verwenden, sondern stattdessen eine aktuelle Version, die stabil ist. Für die Entwicklung mit React Native stehen Ihnen also nun verschiedene Entwicklungsumgebungen zur Verfügung. Dazu gehört zunächst einmal Visual Studio Code, welches völlig kostenfrei zu erhalten ist. Alternativ können Sie auch IntelliJ IDEA verwenden und beispielsweise dann auch mit der Android-Entwicklung integrieren. Sollten Sie allerdings mit iOS-spezifischem Code arbeiten und die debuggen müssen, so empfiehlt es sich immer, Xcode dafür zu verwenden. Für das Debugging von React Native-eigenem Code sollte der React Native Debugger verwendet werden oder alternativ die Chrome Developer Tools in Google Chrome.