Anzeige
Anzeige
Ratgeber
Artikel merken

Einstieg in React – Das sind die wichtigsten Tools

Mit diesen Guides und Tutorials gelingt euch der Einstieg in React und ihr setzt direkt erste Projekte um.

Von Janna Tillmann
4 Min. Lesezeit
Anzeige
Anzeige
React lernen kann man sich leicht machen (Screenshot: React)

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:

  1. React und ReactDOM
  2. Package-Manager, da React nicht nur eine Datei ist, die man einfach herunterladen kann
  3. Compiler von JSX zu Javascript
  4. Transformationsmanager, der die notwendigen Transformationen konfiguriert und zusammenstellt
Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Werner

Links sind fast alle fehlerhaft..

Antworten
Daniel

Bei mir gehen alle getesteten.

Antworten
lvlirko

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

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige