Wie man lernt zu reagieren - Eine Roadmap vom Anfänger bis zum Fortgeschrittenen

Hey Leute!

Dieser Leitfaden richtet sich an Personen, die mit React beginnen. Ich habe die besten Videos und Artikel in jedem Abschnitt sorgfältig zusammengestellt, um das Lernen zu erleichtern.

Hinweis: Ich bin mit keiner der unten genannten Websites verbunden. Es ist nur meine Ansicht.

Voraussetzungen

  1. Grundkenntnisse in HTML, CSS und JavaScript.
  2. Grundlegendes Verständnis der ES6-Funktionen. Hier ist mein Artikel, in dem einige der ES6-Funktionen erläutert werden.

    Zu Beginn sollten Sie mindestens die folgenden Funktionen kennen:

    1. Lassen Sie

    2. Const

    3. Pfeilfunktionen

    4. Importe und Exporte

    5. Klassen

  3. Grundlegendes Verständnis der Verwendung von npm.

Beginnen

Sie können Online-Code-Editoren zum Üben verwenden oder die Create React App verwenden.

Ich habe eine Entwicklungsumgebung in JSFiddle und in Codepen eingerichtet.

Um alle Grundlagen von React zu verstehen, können Sie mit den folgenden Tutorials beginnen:

Reagieren Sie auf die offizielle Dokumentation von React

Leitfaden für Anfänger von Kent C. Dodds

Grundlagen der Reaktion von Samer Buna

Inzwischen sollten Sie eine grundlegende Vorstellung von den Grundlagen von React haben. Es reicht aus, einfache Web-Apps in React zu entwickeln.

Schauen Sie sich jetzt das offizielle React-Tutorial an:

React Offizielles Tutorial von React

Es ist ein gut geschriebener Artikel, der die Grundlagen von React behandelt. Und es erklärt auch die spezifischen Themen sehr klar.

Zu guter Letzt erfahren Sie, wie Sie mit React-Apps eine Verbindung zu APIs herstellen:

API mit React.js von Ethan Jarrell abrufen

Beginnen Sie mit dem Aufbau einiger Projekte

  1. Einfache ToDo-App
  2. Einfache Taschenrechner-App
  3. Bauen Sie einen Einkaufswagen
  4. Zeigen Sie die Benutzerstatistiken von GitHub mithilfe der GitHub-API an

Router reagieren

Mit React Router können Sie Routen zu Ihren Einzelseitenanwendungen erstellen. Es ist sehr leistungsfähig und einfach mit Ihrer React-Anwendung zu verwenden.

So fangen Sie an:

React Router Tutorial von Paul Sherman

Reagieren Sie auf Router und Einführung in SPA von Learn Code Academy

Routing Reagieren Sie Apps von Scotch.io

Diese Artikel sind mehr als genug, um mit dem React-Routing zu beginnen.

Projekte

  1. Eine einfache CURD-Anwendung
  2. Hacker News Klon

Wenn Sie wirklich viel über Router erfahren möchten, lesen Sie die folgende Anleitung:

React Router vollständige Anleitung von React Training

Webpack

Webpack ist ein bekannter JavaScript-Modul-Bundler. Mit Webpack können Sie Abhängigkeiten als statische Dateien für Ihr Projekt verwalten, sodass Entwickler dies nicht tun müssen.

Webpack wird auch mit Ladern geliefert. Mit Loadern können Sie bestimmte Aufgaben rund um Ihr Projekt ausführen.

Befolgen Sie die folgenden Tutorials, um mehr über Webpack zu erfahren.

Wann und warum sollte Webpack von Andrew Ray verwendet werden?

Webpack-Tutorial von Learn Code Academy

Informationen zum Einrichten Ihrer lokalen React-Umgebung mit Webpack finden Sie im folgenden GitHub-Repo:

Reagieren Sie auf die SPA-Vorlage von Hanif Roshan

Ich denke, die obigen Tutorials reichen aus, um mit Webpack zu beginnen. Um jedoch detaillierte Informationen zu erhalten, können Sie sich auf die folgenden Anleitungen beziehen:

Webpack-Einführung von SurviveJS

Webpack offizielle Dokumente

Server-Rendering

Server-Rendering ist eine der coolsten Funktionen in React. Es kann mit jeder der Back-End-Technologien verwendet werden.

Mit Server Side Rendering (SSR) in React können Sie Komponenten auf dem Server erstellen und diese in Ihrem Browser als HTML rendern. Und wenn alle JavaScript-Module im Browser heruntergeladen wurden, betritt React die Bühne. Einfach!

Schauen Sie sich zunächst die React-DOM-API an:

React-DOM-API nach React

Befolgen Sie die folgenden Tutorials, um detaillierte Informationen zu erhalten:

Reagieren Sie auf das Server-Rendering von Tyler McGinnis

Reagieren Sie auf das Rendern von Routerservern durch Roilan Salinas

React Server-seitiges Rendering-Handbuch von Dennis Brotzky

Redux

Redux ist eine JavaScript-Bibliothek, die zur Verwaltung von Anwendungsstatus entwickelt wurde. Wenn Sie eine komplexe Anwendung erstellen, wird der Aufwand für die Verwaltung von Zuständen über Komponenten hinweg erhöht. Mit Redux können Sie alle Ihre Status in einer einzigen Quelle speichern. Und natürlich spielt React gut mit Redux :)

So fangen Sie an:

Redux-Tutorialvon Learn Code Academy

Redux Tutorial für Anfänger von Valentino Gagliardi

Reagiere Redux mit CSS-Tricks

Diese Tutorials sind mehr als genug, um mit Redux zu beginnen. Ich kann jedoch nicht widerstehen, auch das folgende Tutorial zu erwähnen. Das ist es wert :)

Erste Schritte mit Redux von Dan Abramov

Ressourcen

Ehrfürchtige Reaktion

Wenn Ihnen der Artikel gefällt, vergessen Sie nicht, ihn zu teilen :)