[MELDEN] Von der Vision zum Code: Ein Leitfaden zur Ausrichtung der Geschäftsstrategie auf die Ziele der Softwareentwicklung ist veröffentlicht!
HOL ES DIR HIER

So lernen Sie React — Die besten kostenlosen Online-Ressourcen für Anfänger

readtime
Last updated on
February 17, 2025

A QUICK SUMMARY – FOR THE BUSY ONES

TABLE OF CONTENTS

So lernen Sie React — Die besten kostenlosen Online-Ressourcen für Anfänger

Einführung

Wenn Sie Softwareentwickler sind, ist das Erlernen neuer Technologien Ihr täglich Brot. Vielleicht hatten Sie bereits die Gelegenheit, React auszuprobieren, konnten sich aber noch keine soliden Fähigkeiten aneignen, oder vielleicht fangen Sie gerade erst an.

In diesem Artikel listen wir die besten kostenlosen Online-Ressourcen auf — einschließlich interaktiver Tutorials und Videos —, um Ihnen zu helfen, die Prinzipien von React besser zu verstehen und Ihre Programmierkenntnisse zu üben.

1. Offizielle React-Dokumentation & Tutorial

Der beste Weg, Ihre Reise mit einer neuen Technologie zu beginnen, besteht darin, die offizielle Dokumentation zu lesen. Dies wird Ihnen helfen, den Zweck der Erstellung dieses Frameworks, seine Anwendungsfälle, Grundprinzipien und die Terminologie zu verstehen. Insbesondere die Dokumentation von React ist sehr gut gepflegt und in einer Sprache verfasst, die so einfach ist, dass selbst ein Kind sie verstehen würde.

Die Homepage der offiziellen Website von React bietet einen kurzen Überblick über die Technologie. Wenn Sie damit fertig sind, gehen Sie in den Abschnitt „Docs“, um zu erfahren, wie Sie mit React beginnen und sich mit den wichtigsten Konzepten vertraut machen können. Wenn Sie damit fertig sind, fahren Sie mit dem „Tutorial“ fort.

Das Tutorial selbst ist nicht nur sehr gut beschrieben und leicht zu befolgen, sondern macht auch wirklich Spaß. Du wirst Aufbau eines interaktiven Tic-Tac-Toe-Spiels mit einer Zeitreise-Funktion 😉

LINKS:

2. Die Grundlagen von React — Interaktiver Leitfaden von ReactArmory

Dieser großartige Leitfaden wurde entworfen und erstellt, um Leuten zu helfen, die gerade erst mit React anfangen und sich von den Schlagwörtern, die überall im Internet kursieren, überwältigt und verwirrt fühlen. Sie werden hier nichts von Redux, Babel, React-Router oder ähnlichem hören. Es ist nur eine einfache und wirklich unterhaltsame Übung und Einführung in React in seiner grundlegendsten Form.

Am Ende des Tutorials werden Sie in der Lage sein, eine zu erstellen animierter Fraktalbaum ganz alleine! Aber zuerst lernst du JSX, spielst mit einigen benutzerdefinierten React-Elementen, renderst und erneutes Rendern sowie Ereignissen und Komponenten.

LINKS:

3. React-Tutorial: Ein umfassender Leitfaden zum Erlernen von React.js im Jahr 2018 — Artikel von Tyler McGinnis

Wenn du nicht weißt, wer Tyler McGinnis ist, wo warst du dann? Tyler ist Google-Entwicklerexperte und ehemaliger Direktor von Dev Mountain, der für seine pädagogische Tätigkeit im Bereich Webentwicklung bekannt ist.

Er leitet die Website TylerMcGinnis.com, die qualitativ hochwertige kostenpflichtige Kurse für Entwickler anbietet. Seine React Fundamentals-Trainings haben bereits 3000 Bewertungen erhalten und einen durchschnittliche Bewertung von 9,3/10.

LINKS:

4. Erstellen Sie mit React JS — Reihe interaktiver Tutorials und Artikel

BuildWithReact.com ist eine Website unter der Leitung von Paul Shen, einem ehemaligen Facebook-Ingenieur, der an der Entwicklung von React-UI-Komponenten beteiligt war und React selbst unterrichtete. Gibt es eine bessere Möglichkeit, React zu lernen, als seinem Schöpfer zu folgen? Ich nehme an, nicht!

Die Seite wurde so konzipiert, dass Sie Schritt für Schritt die Grundlagen von React erlernen können. Sie bietet 6 kurze und einfache Tutorials, angereichert mit JSBin-Schnipseln, damit du üben kannst, was du unterwegs gelernt hast. Die einzelnen Übungen sind in einer logischen Reihenfolge angeordnet, sodass du nicht verwirrt wirst. Dort erfährst du mehr über JSX, Komponenten, Ereignisse, Status.

Obwohl das Tutorial 2016 veröffentlicht wurde, kann man es definitiv nicht als veraltet bezeichnen. Es behandelt die unveränderlichen Grundlagen, sodass Sie mit Sicherheit nicht enttäuscht sein werden.

LINKS:

5. React Bits — GitBook

Obwohl React Bits ein GitBook sind, fühlen sie sich nicht wie ein Buch an, weil es nicht viel zu lesen gibt. Der Autor nennt es „Eine Zusammenstellung von React-Mustern, Techniken, Tipps und Tricks“ und ich finde, das ist ein wirklich passender Titel.

React Bits hat die Form eines übersichtlichen Gliederung unterteilt in 6 Kategorien:

  1. Entwurfsmuster und Techniken
  2. Anti-Muster
  3. Umgang mit UX-Variationen
  4. Perf-Tipps
  5. Styling
  6. Gotchas

Jeder Artikel in der Kategorie besteht hauptsächlich aus Codefragmenten mit Kommentaren und listet andere Ressourcen zu einem bestimmten Thema auf (z. B. Medium-Posts). Sie müssen keine Angst haben, dass diese Quelle veraltet ist, da sie häufig aktualisiert und gut gepflegt wird. Als dieser Artikel geschrieben wurde (Juli 2018), wurde die letzte Aktualisierung 15 Tage zuvor vorgenommen.

Wir empfehlen dringend, React Bits auszuprobieren, da es eine großartige Quelle und eine echte Goldmine ist. Wir sind sicher, dass jeder dort etwas Wertvolles finden wird.

LINKS:

6. Fangen Sie an, React zu lernen — Kostenloser Videokurs von Egghead.io

Egghead.io ist eine Plattform, die von berufstätigen Webprofis entwickelt wurde, die zur Open-Source-Community beitragen wollten. Du wirst dort keinen Flaum finden. Die Videokurse sind relativ kurz (normalerweise zwischen 30 Minuten und 2 Stunden), bringen es direkt auf den Punkt und vermitteln praktisches Wissen, das sofort angewendet werden kann.

Dieser spezielle Videokurs wurde erstellt von Joe Maddalone. Wenn Sie seine Nachhilfe erleben möchten, bevor Sie sich für einen vollständigen Kurs entscheiden, schauen Sie sich eines seiner Videos auf YouTube an.

Hier ist ein Beispiel:

Die Start Learning React-Reihe hilft Ihnen dabei, die grundlegenden Grundlagen von React zu erkunden, um Ihnen den Einstieg zu erleichtern. Sie besteht aus 21 Unterrichtsstunden, jeder nimmt eine durchschnittlich 3 Minuten zum Anschauen. Obwohl der gesamte Kurs etwa eine Stunde dauert, sollten Sie sich auf jeden Fall etwas mehr Zeit nehmen, um die einzelnen in den Videos gezeigten Schritte nachzuverfolgen. Die Mühe lohnt sich wirklich.

Die Lektionen behandeln Themen wie das Erstellen einer App mit Create-React-App, das Rendern von Komponenten, das Festlegen von Eigenschaften, den Zugriff auf verschachtelte Daten, die benutzerdefinierte Validierung, das Verwalten von Komponenten mit dem Status, das Erstellen von Live-Compilern und vieles mehr.

Lass dir das nicht entgehen!

LINKS:

7. React JS-Tutorials — Kostenloser Videokurs von LearnCode.academy

Dieser kostenlose Youtube-Playlist-Kurs besteht aus 23 videos behandelt Themen von den Grundlagen von React bis hin zu Redux- und MobX-Tutorials. Zu Beginn sollten Sie sich auf die Lektionen 1 bis 8 konzentrieren, da sie sich ausschließlich auf React JS konzentrieren.

Das Anschauen dieser wenigen Lektionen dauert etwa eine Stunde, aber wie bei jedem Kurs sollten Sie die Schritte befolgen und Ihre Fähigkeiten durch Übung weiterentwickeln. Dieses kostenlose Videotraining ist sehr beliebt. Im Juli 2018 hatte es fast 2.000.000 Aufrufe.

In diesem Kurs lernst du Grundlagen wie Komponenten, Status, Requisiten, Ereignisse, React-Router, Inline-Styles und Arrays kennen.

LINKS:

Letzte Worte

Es gibt unzählige, wertvolle React-Ressourcen im Web. Da sich der Bereich der Softwareentwicklung ständig weiterentwickelt, ist es immer am besten, sich für die neuesten Materialien zu entscheiden. Wir hoffen, dass Sie unsere Liste der besten kostenlosen Online-React-Ressourcen für Anfänger hilfreich fanden.

Wenn Ihnen unser Beitrag gefallen hat, teilen Sie ihn bitte mit anderen JavaScript-Liebhabern und -Ingenieuren und helfen Sie dabei, diese großartige Technologie bekannt zu machen.

Viel Glück auf deiner React JS-Entwicklungsreise!

Frequently Asked Questions

No items found.

Our promise

Every year, Brainhub helps 750,000+ founders, leaders and software engineers make smart tech decisions. We earn that trust by openly sharing our insights based on practical software engineering experience.

Authors

Marcin Dryka
github
Softwareingenieur

Full-Stack-Softwareentwickler mit 18 Jahren Berufserfahrung.

Bianka Pluszczewska
github
Technischer Redakteur

Enthusiast für Softwareentwicklung mit 9 Jahren Berufserfahrung in dieser Branche.

Marcin Dryka
github
Softwareingenieur

Full-Stack-Softwareentwickler mit 18 Jahren Berufserfahrung.

Bianka Pluszczewska
github
Technischer Redakteur

Enthusiast für Softwareentwicklung mit 9 Jahren Berufserfahrung in dieser Branche.

Read next

No items found...