React Router 6 lernen

React Router 6 lernen

Dieser Kurs ist Teil von Spezialisierung „Fortgeschrittene React-Kenntnisse“

Dozent: Bob Ziroll

Bei enthalten

Mehr erfahren

6 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

16 Bewertungen

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

6 Module

Verschaffen Sie sich einen Einblick in ein Thema und lernen Sie die Grundlagen.

16 Bewertungen

Stufe Mittel

Empfohlene Erfahrung

1 Woche zu vervollständigen

unter 10 Stunden pro Woche

Flexibler Zeitplan

In Ihrem eigenen Lerntempo lernen

Kompetenzen, die Sie erwerben

Kategorie: Benutzerfreundliches Design
Kategorie: Beglaubigungen
Kategorie: React.js
Kategorie: Web-Entwicklung
Kategorie: Berechtigung (Computing)

Werkzeuge, die Sie lernen werden

Kategorie: Frontend-Leistung
Kategorie: Web-Anwendungen

Wichtige Details

Zertifikat zur Vorlage

Zu Ihrem LinkedIn-Profil hinzufügen

Bewertungen

6 Aufgaben

Unterrichtet in Englisch

Erfahren Sie, wie Mitarbeiter führender Unternehmen gefragte Kompetenzen erwerben.

Weitere Informationen zu Coursera für Unternehmen

Logos von Petrobras, TATA, Danone, Capgemini, P&G und L'Oreal

Erweitern Sie Ihre Fachkenntnisse

Dieser Kurs ist Teil der Spezialisierung Spezialisierung „Fortgeschrittene React-Kenntnisse“

Wenn Sie sich für diesen Kurs anmelden, werden Sie auch für diese Spezialisierung angemeldet.

Lernen Sie neue Konzepte von Branchenexperten
Gewinnen Sie ein Grundverständnis bestimmter Themen oder Tools
Erwerben Sie berufsrelevante Kompetenzen durch praktische Projekte
Erwerben Sie ein Berufszertifikat zur Vorlage

In diesem Kurs gibt es 6 Module

Lernen Sie React Router v6, die beliebteste Routing-Bibliothek für React-Anwendungen und eine der am häufigsten heruntergeladenen React-Support-Bibliotheken überhaupt. In diesem Kurs lernen Sie die wichtigsten Teile der React Router (v6)-Bibliothek kennen, während Sie eine App namens "VanLife" erstellen, eine App, mit der Sie ausgestattete Reisebusse für Ihr nächstes Roadtrip-Abenteuer mieten können. Dieser Kurs ist voll von kleinen und großen interaktiven Coding-Herausforderungen, die Ihnen helfen, die Themen, die Sie lernen werden, zu vertiefen, während Sie das Hauptprojekt VanLife erstellen. Wiederholung und Übung sind der beste Weg, um die Hölle der Tutorien zu vermeiden und das Muskelgedächtnis aufzubauen, das Sie brauchen, um wirklich zu verstehen, was Sie lernen. Wenn Sie also der Hölle der Tutorien entkommen wollen, ist dieser Kurs (und Scrimba-Kurse im Allgemeinen) der richtige Weg für Sie!

Machen Sie Ihre ersten Schritte mit React Router und machen Sie sich mit dem Kursprojekt vertraut, einer coolen Website für die Vermietung von Lieferwagen.

Das ist alles enthalten

1 Aufgabe19 Plug-ins

1 AufgabeInsgesamt 15 Minuten

React Router Abschnitt 1 Bewertete Aufgabenstellung15 Minuten

19 Plug-insInsgesamt 80 Minuten

Willkommen zum interaktiven Unterricht!1 Minute
Einführung in React Router 63 Minuten
Mehrseitige gegenüber einseitigen Anwendungen5 Minuten
React Router Einrichtung & BrowserRouter3 Minuten
Routen3 Minuten
BrowserRouter & Routen Herausforderung1 Minute
Route, Pfad und Element4 Minuten
Schnelle Re-Organisation1 Minute
Verknüpfungen im React Router4 Minuten
Bootstrapping des VanLife-Projekts8 Minuten
Erste Bereitstellung auf Netlify12 Minuten
Mirage JS Server2 Minuten
Herausforderung: Vans Seite - Teil 12 Minuten
Herausforderung: Vans Seite - Teil 29 Minuten
Routen-Parameter - Teil 14 Minuten
Routen-Parameter - Teil 22 Minuten
Route Params Teil 3.1 - useParams() & Herausforderung5 Minuten
Route Params Teil 3.2 - useParams() Herausforderung7 Minuten
Route Params Quiz4 Minuten

Das Lernmodul erforscht verschachtelte Routen im React Router 6, die zur Erstellung komplexer und hierarchischer Routenstrukturen innerhalb von React-Anwendungen verwendet werden.

Das ist alles enthalten

1 Aufgabe23 Plug-ins

1 AufgabeInsgesamt 20 Minuten

React Router Abschnitt 2 Bewertete Aufgabenstellung20 Minuten

23 Plug-insInsgesamt 126 Minuten

Verschachtelte Routen Intro9 Minuten
Fixieren der Navigationsleiste mit einer Layout-Route5 Minuten
Fixieren der Navigationsleiste mit einer Layout-Route Teil 28 Minuten
Bootstrap der Hostseiten4 Minuten
Verschachtelung der /host-Routen4 Minuten
Erstellen des Host-Layouts6 Minuten
Relative Pfade4 Minuten
Index-Routen4 Minuten
Nisten oder nicht nisten?5 Minuten
Quiz über verschachtelte Pfade5 Minuten
Fußzeile hinzufügen3 Minuten
NavLink7 Minuten
Active Link Styling mit NavLink4 Minuten
Aktives Link-Styling mit NavLink - Teil 25 Minuten
Hinzufügen von Host Vans-Routen5 Minuten
🔀 Optionale Nebenaufgabe - Erstellen der Liste der Host Vans und der Detailseiten3 Minuten
Aufbau der Host Van Detail Seite9 Minuten
Relative Links7 Minuten
Zurück zu allen Transportern5 Minuten
Verschachtelte Routen /host/vans/:id hinzufügen8 Minuten
Fügen Sie die endgültige Navigationsleiste hinzu!7 Minuten
Auslass-Kontext6 Minuten
Aktualisieren Sie die bereitgestellte Version auf Netlify!3 Minuten

Dieses Modul taucht in die Verwendung von Suchparametern und Links in React Router 6 ein und ermöglicht es Entwicklern, die Navigation mit Abfrageparametern in ihren React-Anwendungen zu implementieren.

Das ist alles enthalten

1 Aufgabe23 Plug-ins

1 AufgabeInsgesamt 15 Minuten

React Router Abschnitt 3 Bewertete Aufgabenstellung15 Minuten

23 Plug-insInsgesamt 96 Minuten

Suche Params Intro7 Minuten
useSearchParams4 Minuten
Herausforderung: Einrichten von Suchparametern in VanLife5 Minuten
Das Array mit dem Suchparameter filtern5 Minuten
Herausforderung: Filtern Sie die Lieferwagen in VanLife2 Minuten
Links zum Hinzufügen von Suchparametern verwenden3 Minuten
Herausforderung: Filtern Sie die Lieferwagen mit Links3 Minuten
Verwendung der Funktion search params setter4 Minuten
Herausforderung: Filtern Sie die Lieferwagen mit einer Setter-Funktion3 Minuten
Vorbehalte gegen das Setzen von Parametern2 Minuten
Zusammenführung von Suchparametern mit Links6 Minuten
Zusammenführen von Suchparametern mit der Funktion setSearchParams5 Minuten
Herausforderung: Praxis des bedingten Renderns5 Minuten
Verbleibende absolute Pfade korrigieren2 Minuten
Zurück zu allen Transportern2 Minuten
Link-Status6 Minuten
useLocation8 Minuten
Herausforderung: Bedingtes Rendern des Textes der Zurück-Schaltfläche3 Minuten
404 Seite6 Minuten
"Happy Path" vs. "Sad Path"3 Minuten
Schnelles Update unseres Codes zum Abrufen3 Minuten
Kodierung des traurigen Pfades - Ladezustand4 Minuten
Kodierung des traurigen Pfades - Fehlerbehandlung5 Minuten

Dieses Modul befasst sich mit Loadern und Fehlern in React Router 6, die zur Handhabung von Lastzuständen und Fehlerbehandlung innerhalb der Routing-Komponenten ihrer Anwendungen verwendet werden.

Das ist alles enthalten

1 Aufgabe12 Plug-ins

1 AufgabeInsgesamt 10 Minuten

React Router Abschnitt 4 Bewertete Aufgabenstellung10 Minuten

12 Plug-insInsgesamt 40 Minuten

Intro der Lader4 Minuten
createBrowserRouter6 Minuten
Einrichten des Datenrouters3 Minuten
Loader-Funktion3 Minuten
Herausforderung: Transporter-Liste Lader1 Minute
useLoaderData2 Minuten
Herausforderung: useLoaderData auf der Seite Vans List2 Minuten
Verwenden Sie die Loader-Daten anstelle der useEffect4 Minuten
Lader-Quiz3 Minuten
Umgang mit Fehlern3 Minuten
ErrorElement zur Transporterroute hinzufügen3 Minuten
useRouteError6 Minuten

Erkunden Sie Aktionen und geschützte Routen in React Router 6,. Lernen Sie, Authentifizierung und Autorisierung zu implementieren, indem Sie Routen schützen und Aktionen auf der Basis von Benutzerrollen oder Berechtigungen durchführen.

Das ist alles enthalten

1 Aufgabe40 Plug-ins

1 AufgabeInsgesamt 30 Minuten

React Router Abschnitt 5 Bewertete Aufgabenstellung30 Minuten

40 Plug-insInsgesamt 164 Minuten

Erstes Anmeldeformular2 Minuten
Hinweis aus der Zukunft: Import von Bildmaterial in Vite3 Minuten
Geschützte Routen Intro6 Minuten
Geschützte Routen - AuthRequired Layout Route4 Minuten
Geschützte Routen - Bedingte Weiterleitung zur /login-Seite4 Minuten
Quiz über geschützte Routen2 Minuten
Geschützte Routen - mit Lader5 Minuten
Geschützte Routen mit Lader4 Minuten
Parallele Lader Demo4 Minuten
Herausforderung: Geschützte Routen mit Lader1 Minute
Herausforderung: Geschützte Routen in VanLife - Teil 12 Minuten
Nebenbei bemerkt: Verlagerung der restlichen Abrufe auf Lader - Teil 16 Minuten
Nebenbei bemerkt: Verlagerung der restlichen Abrufe auf Lader - Teil 24 Minuten
Herausforderung: Geschützte Routen in VanLife - Teil 28 Minuten
Prompt für Login-Nachricht an Login-Seite senden3 Minuten
Nachricht vom Suchparameter auf der Anmeldeseite konsumieren8 Minuten
Nachricht an die Login-Seite weiterleiten8 Minuten
🌶️ Nehmen Sie: Formulare in React sind schlecht2 Minuten
Einrichten für die Authentifizierung - Happy Path5 Minuten
Einrichten für die Authentifizierung - trauriger Pfad8 Minuten
useNavigate()4 Minuten
React Router-Formular-Komponente3 Minuten
Einrichten der Funktion Aktion4 Minuten
Formular und Aktion zu VanLife hinzufügen2 Minuten
Aktionsfunktion - Parameter2 Minuten
Aktionsfunktion - Anfrage3 Minuten
Abrufen von Formulardaten in VanLife2 Minuten
Daten in Aktion verwenden, um sich anzumelden3 Minuten
Bessere (aber immer noch gefälschte) Zulassung4 Minuten
Herausforderung: Benutzer nach dem Einloggen zur /host-Route schicken3 Minuten
Formular ersetzen5 Minuten
useActionData4 Minuten
Aktion Fehlerbehandlung3 Minuten
Aktionsfehlerbehandlung in VanLife3 Minuten
useNavigation()4 Minuten
useNavigation in VanLife4 Minuten
den Pfadnamen der vorherigen Route abrufen7 Minuten
redirectTo - Teil 14 Minuten
redirectTo - Teil 26 Minuten
redirectTo in VanLife5 Minuten

Dieses Modul befasst sich mit zeitversetzten Daten in React Router 6, die es Entwicklern ermöglichen, Daten effizient zu laden und bei Bedarf für bestimmte Routen anzuzeigen, was die Leistung und Benutzererfahrung verbessert.

Das ist alles enthalten

1 Aufgabe18 Plug-ins

1 AufgabeInsgesamt 30 Minuten

React Router Abschnitt 6 Bewertete Aufgabenstellung30 Minuten

18 Plug-insInsgesamt 73 Minuten

Aufschieben von Daten3 Minuten
Promises und defer()6 Minuten
aufschieben getVans()2 Minuten
Komponente "Await7 Minuten
Warten Sie in Vans Route5 Minuten
Refactoring von Vans abwarten2 Minuten
React Suspense5 Minuten
Suspense in VanLife3 Minuten
Alles zusammengenommen - Aufschieben, Warten, Suspense in HostVans5 Minuten
errorElements in den verbleibenden Last-Seiten3 Minuten
Die Platzhalter sind weg! 🎉2 Minuten
Cloud Firestore Einrichtung 🔥6 Minuten
Cloud Firestore Code Einrichtung3 Minuten
Sammlungsbezug und Funktion getVans()7 Minuten
Funktion getVan() erstellen5 Minuten
Refactoring der Funktion getHostVans4 Minuten
Letzte lose Enden2 Minuten
Outro3 Minuten

Erwerben Sie ein Karrierezertifikat.

Fügen Sie dieses Zeugnis Ihrem LinkedIn-Profil, Lebenslauf oder CV hinzu. Teilen Sie sie in Social Media und in Ihrer Leistungsbeurteilung.

Dozent

Lehrkraftbewertungen

(8 Bewertungen)

Bob Ziroll

Scrimba

14 Kurse54.820 Lernende

von

Scrimba

Mehr von Mobile und Web-Entwicklung entdecken

Packt
Applied React – Projects, Routing & State
Kurs
Status: Kostenloser Testzeitraum
Kategorie: Credits angeboten
Scrimba
Learn React
Kurs
Status: Kostenloser Testzeitraum
Kategorie: Credits angeboten
Packt
Mastering React and Advanced Concepts
Kurs
Status: Kostenloser Testzeitraum
Kategorie: Credits angeboten
Scrimba
Learn Advanced React
Kurs
Status: Kostenloser Testzeitraum
Kategorie: Credits angeboten

Warum entscheiden sich Menschen für Coursera für ihre Karriere?

Felipe M.

Lernender seit 2018

„Es ist eine großartige Erfahrung, in meinem eigenen Tempo zu lernen. Ich kann lernen, wenn ich Zeit und Nerven dazu habe.“

Jennifer J.

Lernender seit 2020

„Bei einem spannenden neuen Projekt konnte ich die neuen Kenntnisse und Kompetenzen aus den Kursen direkt bei der Arbeit anwenden.“

Larry W.

Lernender seit 2021

„Wenn mir Kurse zu Themen fehlen, die meine Universität nicht anbietet, ist Coursera mit die beste Alternative.“

Chaitanya A.

„Man lernt nicht nur, um bei der Arbeit besser zu werden. Es geht noch um viel mehr. Bei Coursera kann ich ohne Grenzen lernen.“

Bewertungen von Lernenden

5 stars
81,25 %
4 stars
18,75 %
3 stars
0 %
2 stars
0 %
1 star
0 %

Zeigt 3 von 16 an

Geprüft am 4. Dez. 2023

This course is fantastic throughout and it teaches you way more than the name specifies. Perfect for slow but detailed learners like myself!

Geprüft am 20. Feb. 2025

good course,but working with Firebase was not easy..

Geprüft am 2. Nov. 2024

Extremely well thought out course. Great teaching style

Weitere Bewertungen anzeigen

Neue Karrieremöglichkeiten mit Coursera Plus

Unbegrenzter Zugang zu 10,000+ Weltklasse-Kursen, praktischen Projekten und berufsqualifizierenden Zertifikatsprogrammen - alles in Ihrem Abonnement enthalten

Mehr erfahren

Bringen Sie Ihre Karriere mit einem Online-Abschluss voran.

Erwerben Sie einen Abschluss von erstklassigen Universitäten – 100 % online

Erkunden Sie die Abschlüsse

Schließen Sie sich mehr als 3.400 Unternehmen in aller Welt an, die sich für Coursera for Business entschieden haben.

Schulen Sie Ihre Mitarbeiter*innen, um sich in der digitalen Wirtschaft zu behaupten.

Mehr erfahren

Häufig gestellte Fragen

Um Zugang zu den Kursmaterialien und Aufgaben zu erhalten und um ein Zertifikat zu erwerben, müssen Sie die Zertifikatserfahrung erwerben, wenn Sie sich für einen Kurs anmelden. Sie können stattdessen eine kostenlose Testversion ausprobieren oder finanzielle Unterstützung beantragen. Der Kurs kann stattdessen die Option "Vollständiger Kurs, kein Zertifikat" anbieten. Mit dieser Option können Sie alle Kursmaterialien einsehen, die erforderlichen Bewertungen abgeben und eine Abschlussnote erhalten. Dies bedeutet auch, dass Sie kein Zertifikat erwerben können.

Wenn Sie sich für den Kurs einschreiben, erhalten Sie Zugang zu allen Kursen der Spezialisierung, und Sie erhalten ein Zertifikat, wenn Sie die Arbeit abgeschlossen haben. Ihr elektronisches Zertifikat wird Ihrer Seite "Leistungen" hinzugefügt - von dort aus können Sie Ihr Zertifikat ausdrucken oder Ihrem LinkedIn-Profil hinzufügen.

Ja. Für ausgewählte Lernprogramme können Sie finanzielle Unterstützung oder ein Stipendium beantragen, wenn Sie die Einschreibegebühr nicht aufbringen können. Wenn für das von Ihnen gewählte Lernprogramm eine finanzielle Unterstützung oder ein Stipendium verfügbar ist, finden Sie auf der Beschreibungsseite einen Link zur Beantragung.