Einstieg in React – Das sind die wichtigsten Tools

React besteht grundlegend nicht nur aus einer einzigen Datei mit allen Funktionen. Um damit wirklich eine eigene Anwendung aufzuziehen, sind mehrere Komponenten nötig, nämlich:
- React und ReactDOM
- Package-Manager, da React nicht nur eine Datei ist, die man einfach herunterladen kann
- Compiler von JSX zu Javascript
- Transformationsmanager, der die notwendigen Transformationen konfiguriert und zusammenstellt
Die hier vorgestellten Anleitungen realisieren das allesamt mit NPM, Babel und Webpack, es gibt allerdings natürlich wie immer Alternativen. Um diesen Artikel jetzt nicht zu überladen, sei an dieser Stelle nur beispielhaft auf diesen Vergleich anderer Lösungen zur Arbeit mit React verwiesen.
Download-Anleitungen
- Dieses fünfseitige Dokument der Codecademy stellt alle notwendigen Schritte der Installation dar und erklärt ausführlich, was passiert, welchen Sinn das hat und was mit welchem Schritt erreicht wird. Für erfahrene Nutzer sicher zu kleinschrittig, für Einsteiger aber wunderbar geeignet, da es eben mehr tut als die nötigen Packages zu benennen. Vorwissen in Javascript ist aber spätestens am Ende wichtig, da die Beispieldatei für den ersten Aufruf nicht mitgeliefert wird, sondern von euch erstellt werden soll.
Auf Seite fünf findet sich zusätzlich eine knappe Zusammenfassung für Ungeduldige. - Auch dieser Guide richtet sich an Einsteiger. Hier werden alle notwendigen Schritte aufgelistet, allerdings nicht ganz so ausführlich und tiefgehend erklärt. Und wer React unter Windows starten will, wird sich mit dem anderen Filesystem auseinandersetzen müssen – oder sowieso lieber auf eine virtuelle Maschine wechseln, um alle Konsolenbefehle problemlos nutzen zu können.
- Eher für die erfahrenen Nutzer ist diese Anleitung, die die gesamte Installation stichwortartig durchgeht und nicht wirklich erklärt, was passiert. Als Übersicht auf jeden Fall sinnvoll, wenn man sowieso weiß, was in etwa zu tun ist. Für ganz blutige Anfänger und alle, die gerne Hintergrundwissen haben wollen, aber nicht zielführend.
- Sehr ähnlich zum Tutorial hier drüber (und auch davon inspiriert) gibt es eine deutsche Anleitung, in der ihr auch einige Infos zu den einzelnen Paketen und ein kleines bisschen mehr als eine bloße Anleitung zum Download bekommt.
Editoren
Als kostenlose Varianten dürften Atom und Nuclide am interessantesten sein. Atom ist im Vergleich ein neuerer Editor, der in Javascript geschrieben ist und entsprechend gut damit umgehen kann. Er besitzt alle zu erwartenden Funktionen wie Autocompletion und Tools zur Textersetzung sowie einen File-Editor. Interessant ist außerdem, dass er eine Möglichkeit bietet, direkt eine Konsole zum Debuggen im Editor aufzumachen und so Fehler zu finden. Außerdem verfügt Atom über eine direkte Einbindung von Github und kann ansonsten extrem leicht erweitert und angepasst werden.
Genau eine solche Anpassung ist nämlich Nuclide. Der Editor ist eine Anpassung von Atom an React, die direkt vom Entwicklerteam von Facebook durchgeführt wurde. Entsprechend ist dieser Editor natürlich für React besonders gut geeignet. Allerdings ist Nuclide anders als Atom unter Windows nicht voll funktionsfähig und bisher gibt es kein Update dazu, wann das der Fall sein wird.
Erste React-Tutorials
- Codecademy: Hier findet ihr ein kostenloses Tutorial in zwei Teilen, das euch direkt interaktiv begrüßt und euch immer wieder Aufgaben lösen lässt. Allerdings ist der Kurs zu Beginn extrem grundlegend, ihr werdet erst einmal JSX anschauen und nicht ungeheuer spannende Ideen umsetzen. Das bessert sich aber mit der Zeit und für Einsteiger ist eine Auffrischung der Grundlagen und die Beschäftigung damit sowieso nicht verkehrt. Eine Installation ist hier nicht nötig, ihr arbeitet im Browser.
- Reacts eigenes Tutorial ist ebenfalls direkt im Browser durchzuspielen und lässt uns ein eigenes Tic-Tac-Toe-Spiel aufsetzen. Das verdeutlicht alle wichtigen Ideen der Bibliothek und ist natürlich auch ein schöner Erfolg zu Beginn. Durch die ausführliche Dokumentation, die das Tutorial begleitet, ist es leicht, sich in die Themen zu denken und den jeweiligen Abschnitten zu folgen. Das Tutorial bespricht nur React und JSX, zusätzliche Tools wie Webpackage und Babel sind nicht Teil davon.
- James K. Nelsons Tutorial glänzt dadurch, dass dafür nicht einmal eine Installation nötig ist. Stattdessen wird bewusst ohne zusätzliche Tools eine minimale Anwendung geschrieben und im Anschluss in aller Ausführlichkeit erklärt. Für Anfänger ganz sicher goldwert, für alle erfahreneren Anwender eher zu grundlegend. Inzwischen gibt es eine neue Variante, die über das Erstellen einer HTML-Seite deutlich hinausgeht und trotzdem nur mit React und ohne weitere Tools aufzusetzen ist.
- Dieses Tutorial erklärt zwar extrem viel, hat dabei allerdings keine besonders interaktiven Parts. Es werden zwar immer wieder Codes gezeigt, allerdings ist es vor allem ein sehr ausführlicher und tiefgehender Text, der teilweise anhand von Code die Prinzipien von React erklärt. Ganz aktuell ist er leider nicht mehr und arbeitet mit einigen Funktionen, die ab React 16 nicht mehr funktionieren sollen. Trotzdem ist es für den Einstieg aber eine sehr spannende Lektüre und vermittelt sehr viel grundlegendes Wissen. Eine aktualisierte Form ist ebenfalls verlinkt, allerdings nur kostenpflichtig abrufbar.
- Ein Tutorial auf Deutsch gibt es auch. Hier bekommt ihr einen Einblick in den Code und gleichzeitig eine generelle Übersicht über die Ideen von React und deren grundsätzliche Umsetzung. Alle Beispiele könnt ihr interaktiv nachverfolgen und den Code auch ohne vorherige Installation in einem Browser-Editor nachverfolgen und bearbeiten. Aktuell ist ES6 in diesem Tutorial auch noch nicht abgedeckt, es soll aber ein Update dahingehend folgen.
Spätestens, wenn React 16 erscheint, dürften sich neue Lösungen präsentieren, die dann in diesen Artikel aufgenommen werden. Gibt es ansonsten noch weitere Tipps, die ihr Einsteigern geben würdet, oder Tutorials, auf die niemand verzichten sollte?
Links sind fast alle fehlerhaft..
Bei mir gehen alle getesteten.
Sorry das ich vom Thema abschweife, aber …
wieso wird eigentlich immer dieser mittelmäßige Atom Editor erwähnt?
Als Bitbucket User ist Atom ein Geschwür mit seiner Github verankerten Architektur.
Warum nicht mal VSCode erwähnen?
Obwohl es sich hier um einen von Microsoft entwickelten Editor handelt ist er tatsächlich barrierefrei.
Zudem kommt VSCode von Hause aus mit allen gängigen Frameworks klar und bietet entsprechende Hilfen. https://code.visualstudio.com/docs/nodejs/reactjs-tutorial
Bei Atom sucht man danach vergebens: https://atom.io/docs/api/search/latest?utf8=%E2%9C%93&q=react