Werden Sie Ein React-Entwickler
Intermediate
4.8
8 reviews
39 Learners
Updated 11/2025
Beherrschen Sie die Kunst, dynamische und interaktive Benutzeroberflächen für Webanwendungen als erfahrener React-Entwickler zu erstellen. Wenn Sie Ja…
142
Chapters
22
Learning hours
98
Assignments
AI Assistant
Shareable Certificate
Ergebnisse
Ergebnisse
Track content
Related courses and projects
Erfahrungsberichte
Funktionen
Preise
Ergebnisse
Ergebnisse
Track content
Related courses and projects
Erfahrungsberichte
Funktionen
Preise
Was Sie lernen werden
Building reusable UI components with React
Navigating apps using React Router
Setting up and deploying Next.js projects
Styling React apps with CSS and inline styles
Handling state with Redux Toolkit
Fetching and displaying data in Next.js
Managing state with React Hooks and Context
Developing apps with Next.js framework
Implementing authentication in Next.js
Learning track content
Erhalten Sie ein Verständnis für die Kernprinzipien von React. Sie lernen JSX (JavaScript XML), den Aufbau wiederverwendbarer UI-Komponenten und das Rendern von Elementen kennen. Zusätzlich erfahren Sie mehr über die Bedeutung der Datenerfassung und der bedingten Darstellung in React-Anwendungen. Am Ende dieses Abschnitts verfügen Sie über ein solides Fundament der wesentlichen Konzepte von React, das Sie auf die weiterführenden Themen in den folgenden Abschnitten vorbereitet.
Was ist React und warum sollte man es verwenden?
Vergleich von SPAs und MPAs in der Webentwicklung
Wie React mit dem Virtuellen DOM Arbeitet
Einführung in JSX zur Erstellung von HTML in JavaScript
Erstellung Komplexer Benutzeroberflächen Mit JSX
Elemente in React Rendern
Herausforderung: Ein Element in React Rendern
Verständnis von React-Komponenten
Datenübergabe mit Props in React
Herausforderung: Funktionale Komponenten Erstellen
Bedingte Darstellung in React
Herausforderung: Implementierung der Bedingten Darstellung – Chat-Benachrichtigung
Herausforderung: Implementierung der Bedingten Darstellung – Bankbenachrichtigung
Sammlungen von Daten in React Rendern
Herausforderung: Anzeigen von Datensammlungen in React
Zusammenfassung Der React-Grundlagen
Untersuchen Sie die verschiedenen Methoden zur Hinzufügung von Styles in React-Anwendungen. Sie lernen, wie Sie Styles auf einzelne Komponenten anwenden, dynamische Styles nutzen und einen skalierbaren sowie wartbaren Styling-Ansatz in Ihren Projekten beibehalten.
Einführung in das Styling in React
Verwendung von Inline-Stilen in React
Praktische Anwendung von Inline-Stilen
Herausforderung: Verwendung von Inline-Stilen in Einer React-Komponente
Styling von React-Komponenten mit externer CSS
Praktische Anwendung von Externem CSS
Herausforderung: Externe CSS in Einer React-App Anwenden
Verwendung von CSS-Modulen für Gekapseltes Styling in React
Organisation von Datei- und Ordnerstrukturen für Styles
Herausforderung: Verwendung von CSS-Modulen in React
Abschluss der Styling-Techniken in React
Leistungsstarke Funktionen in der modernen React-Entwicklung. Hooks revolutionieren die Entwicklung von Funktionskomponenten, indem sie eine prägnante und intuitive Möglichkeit zur Verwaltung von Zustand und zur Ausführung von Seiteneffekten bieten. Im Gegensatz dazu ermöglicht Context das Teilen von Daten durch den Komponentenbaum, ohne Props weiterreichen zu müssen. Die Kombination von Hooks und Context ermöglicht ein effizientes Zustandsmanagement und eine vereinfachte Datenweitergabe in React-Anwendungen.
Einführung in React-Hooks und Context
Verwaltung von Zustand mit dem UseState-Hook
Herausforderung: Sichtbarkeit mit useState Umschalten
Arbeiten mit Referenzen unter Verwendung des UseRef-Hooks
Herausforderung: Erstellen Einer Kontrollierten Formular-Komponente
Umgang mit Seiteneffekten mit dem UseEffect-Hook
Herausforderung: Daten mit UseEffect Abrufen und Anzeigen
Leistungsoptimierung mit dem useMemo-Hook
Herausforderung: Implementierung Eines Auto-Listenfilters Mit useMemo
Zustandsteilung Über Komponenten Hinweg Mit Context
Verwendung von Context in einem Praxisnahen Szenario
Herausforderung: Entwicklung Einer Astronomie-App Mit Context
Zusammenfassung: React-Hooks und Context
Schritt-für-Schritt-Anleitung zum Start eines praxisnahen React-Projekts. Von der Einrichtung der Entwicklungsumgebung über das Verständnis der Projektorganisation bis hin zu wichtigen Tools – Sie erwerben das Wissen und die Sicherheit, um Ihre React-Reise zu beginnen.
Erlernen der theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verständnis der Bedeutung von Routing in Webanwendungen und der Notwendigkeit der React-Router-Bibliothek.
Erfahren Sie, wie eine vollständige React-Anwendung von Grund auf erstellt wird, mit der Möglichkeit, Inhalte anzuzeigen, die sich anhand der URL mithilfe der React-Router-Funktionalität anpassen.
Überblick Über Die Mehrseitige Website
Installation Von React Router
Aktivierung des Routings in einer React-App
Definieren von Routen für die Navigation
Zusammenfassung: Erste Schritte in React Router
Optimierung von Imports Durch Lazy Loading
Implementierung Einer Fallback-Komponente
Zusammenfassung: Zweite Schritte in React Router
Erstellung und Verwaltung der Navigation
Die Vollständige Logik von React Router Erkunden
Zusammenfassung der Grundlagen von React Router
Erkunden Sie die Verwendung von Query-Strings zur gemeinsamen Nutzung und Verwaltung des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Query-Parametern und nutzen Sie React Router für Navigation und Effekte basierend auf URL-Änderungen.
Erkunden Sie die grundlegenden Konzepte des State Managements und erfahren Sie, wie Sie die Leistungsfähigkeit des Redux Toolkit nutzen können. Wir führen Sie durch den Installationsprozess und unterstützen Sie bei der Erstellung Ihres ersten React-Projekts mit Redux Toolkit. Zusätzlich erwartet Sie eine Herausforderung, um Ihr Verständnis und Ihre Fähigkeiten zu testen.
Untersuchung der Integration von Redux in React-Anwendungen unter Berücksichtigung zentraler Konzepte: Actions, Reducer und der Redux Store. Enthält praxisnahe Beispiele und Code-Erklärungen zur Konfiguration eines Stores, Erstellung von Reducern und Verbindung von React-Komponenten über Hooks wie useSelector und useDispatch.
Was Erwartet Sie
Verständnis des Projektcodes und der Dateistruktur
Erstellen des Redux-Stores
Integration des Redux-Stores in die React-Anwendung
Überprüfung des Stores in der React-Anwendung
Verstehen von Actions und Action Creators
Verständnis der Rolle von Reducern
Überprüfung von Actions und Reducern in Redux
Redux mit React-Komponenten Verbinden
Abschließen Der Anwendung
Verbessern Sie Ihre Fähigkeiten im State Management. In diesem praxisorientierten Workshop bearbeiten Sie reale Herausforderungen und sammeln praktische Erfahrungen mit dem Redux Toolkit für eine nahtlose Anwendungsentwicklung.
Wir besprechen die erforderlichen Vorkenntnisse für die Arbeit mit dem Next.js-Framework, die Kursinhalte sowie die zu entwickelnden Projekte.
Wir richten das Projekt ein, untersuchen Möglichkeiten zur Einbindung von Styling in unsere Anwendung und behandeln visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts.
Einrichtung Des Next.js-Projekts
Verstehen der Projektdatei- und Ordnerstruktur
Styling-Methoden in Next.js
Hinzufügen Der Globalen CSS-Datei
Verwendung von Tailwind CSS für das Styling
Arbeiten mit CSS-Modulen
Bedingte Anwendung von Styles
Hinzufügen Benutzerdefinierter Google Fonts
Herausforderung: Implementierung Einer Benutzerdefinierten Google-Schriftart
Umgang mit Bildern in Next.js
Erfahren Sie, wie Sie mühelos eine neue Ansicht für Ihre Anwendung erstellen und verwalten sowie mit einem integrierten Routingsystem nahtlos durch alle Seiten navigieren.
Bereitstellung der Next.js-App mit GitHub- und Vercel-Konten. Zusätzlich Einrichtung einer Datenbank zur Bereitstellung der erforderlichen Daten für die App.
Überlegungen zum klaren und effizienten Abrufen sowie zur Darstellung von Daten für den Benutzer.
Datenabruf in Next.js
Arbeiten mit der Dashboard-Seite
Herausforderung: Daten Abrufen und Anzeigen
Dynamisches vs. Statisches Rendering in Next.js
Verstehen von Loaders
Implementierung Spezifischer Teil-Loader
Herausforderung: Erstellung Eines Skeleton Loaders
Optimierung von Ladeprozessen durch Komponenten-Gruppierung
Erfahren Sie, wie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und weitere implementiert werden.
Erstellung Der Rechnungsseite
Entwicklung der Suchfunktionalität
Hinzufügen von Paginierung zu einer Next.js-App
Verwendung von Serveraktionen in Next.js
Erstellen eines neuen Elements in der Datenbank
Aktualisierung eines Elements in der Datenbank
Löschen eines Elements in der Datenbank
Herausforderung: Implementierung der Formularvalidierung
Implementierung der Authentifizierung in Next.js.
Verständnis von Authentifizierung
Einrichten der Login-Route
Verwendung von NextAuth.js für Authentifizierung
Authentifizierung Konfigurieren und Routen Schützen
Passwörter-Hashing und Verwaltung von Zugangsdaten
Implementierung der Anmeldefunktionalität
Verbindung der Benutzeroberfläche mit der Authentifizierungslogik
Implementierung der Logout-Funktionalität
Abschließende Gedanken und Nächste Schritte
Steigere deine Tech-Fähigkeiten!
mit bis zu 55% Rabatt
Features:
*Tracks not included in Pro plan
500+ Top-bewertete KurseFortschrittlicher KI-Copilot
Personalisierte Lernpfade40+ praxisnahe Projekte
Ohne Kündigung, bevor der ausgewählte Rabattplan endet, akzeptiere ich, dass Codefinity automatisch belastet $104 alle 3 Monate bis ich kündige. Erfahren Sie mehr über die Stornierungs- und Rückerstattungsrichtlinien in Abonnementbedingungen.
Recommended Courses and Projects
kurs
TEST COURSE WITH QUESTIONSs
-----
1 Stunde
5 KapitelAnfänger
179 JETZT STUDIEREN
kurs
Expert React
Unlock the full potential of React and become a proficient Frontend developer with this course. Whether you're a beginner or an experienced developer looking to level up your skills, this hands-on course will take you on an exciting journey through the core concepts of React and its ecosystem, considering such valuable topics as React Router, Redux Toolkit, Formik, and Jest.
6 Stunden 51 KapitelMittelstufe
kurs
Introduction to React
In this course, we will learn how to use the JavaScript React library for making front-end applications. This course will help you understand the structure of a React application, how to add it to an existing website, and how to set up a React app from scratch. You will learn how to easily create React applications and expand them further for more advanced purposes. This course is intended for beginners though basic knowledge of JavaScript is required.
5 Stunden 37 KapitelMittelstufe
kurs
Grundlagen von React Native
Erkunden Sie die Welt der mobilen App-Entwicklung mit React Native. Lernen Sie grundlegende Konzepte und fortgeschrittene Techniken, um plattformübergreifende mobile Anwendungen effizient zu erstellen.
5 Stunden 29 KapitelFortgeschritten
kurs
Introduction to Redux
In this course, the user will learn how to use Redux and React to create powerful applications.
5 Stunden 29 KapitelFortgeschritten
kurs
TypeScript Essentials for React
Strengthen your React development skills by applying TypeScript to components, events, hooks, and async logic. Use the TypeScript features that matter most in real React applications to write safer, clearer, and more maintainable UI code. Build confidence with typed props, state, API calls, custom hooks, and advanced React patterns.
2 Stunden 24 KapitelAnfänger
kurs
Animations in React with Framer Motion
Master UI animation techniques in React using Framer Motion. Build animated components, control motion through state and variants, implement interactive gestures, and optimize animations for performance and accessibility. Apply animation patterns that scale across real application interfaces and navigation flows.
1 Stunde 13 KapitelAnfänger
kurs
Auth0 Authentication and Authorization in React Apps
Implement secure authentication and authorization in React applications using Auth0. Configure login flows, protect routes, manage user sessions, and customize authentication experiences. Apply advanced Auth0 features such as roles, permissions, and secure API access in production React apps.
1 Stunde 11 KapitelMittelstufe
kurs
Axios for React Applications
Learn how to integrate Axios into React applications for reliable data fetching and API communication. Practice performing HTTP requests, handling responses and errors, configuring Axios globally, and managing requests efficiently. Gain practical experience structuring API logic for scalable and maintainable React projects.
1 Stunde 10 KapitelMittelstufe
kurs
Building UI Systems in React with Storybook
Develop, document, and test React UI components using Storybook. Create structured stories, configure addons for documentation and testing, and scale component libraries for team workflows. Integrate Storybook into collaborative development and automated delivery pipelines.
1 Stunde 12 KapitelAnfänger
kurs
Clerk Authentication in React Apps
Implement user authentication in React applications using Clerk. Integrate Clerk into React, manage user sessions and profile data, customize authentication flows, and control authentication state.
Apply secure authentication practices and troubleshoot common authentication issues.
1 Stunde 10 KapitelMittelstufe
kurs
Data Visualization in React with Recharts
Build powerful, interactive data visualizations in React using Recharts. Learn how to integrate Recharts into React projects, render essential chart types, customize design and behavior, work with dynamic real-world data, and apply best practices for performance, accessibility, and scalability.
2 Stunden 14 KapitelMittelstufe
Discover more Learning Tracks
Spur
TEST TRACK 12
1 Kurs
1 Projekt
0 TaskAnfänger
4.0
(18013)
Spur
Full Stack Webentwicklung
7 Kurse424 AufgabenAnfänger
4.5
(53)
Spur
Beherrschung der Datenvisualisierung
5 Kurse146 AufgabenMittelstufe
4.4
(9)
Spur
SQL von Null bis Held
7 Kurse249 AufgabenAnfänger
4.6
(113)
Spur
C++ Grundlagen
6 Kurse124 AufgabenAnfänger
3.9
(31)
Spur
Python von Null bis Held
6 Kurse215 AufgabenAnfänger
4.6
(337)
Spur
Beherrschung des Maschinellen Lernens
7 Kurse182 AufgabenMittelstufe
4.5
(6)
Spur
Python Über das Mittlere Niveau Hinaus
2 Kurse1 Projekt62 AufgabenAnfänger
5.0
(2)
Spur
Java-Grundlagen
11 Kurse459 AufgabenAnfänger
4.5
(16)
Spur
Spielentwicklung Mit Unity
4 Kurse164 AufgabenAnfänger
4.4
(8)
Spur
Become a Django Developer
5 Kurse178 AufgabenFortgeschritten
4.5
(33)
Warum Menschen Codefinity wählen
Web Developer
Kwizera Mugisha
The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.
Senior Business Analyst
Sherry Barnes-Fox
My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.
Accounts Payable Specialist
Bill Wagner
I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.
IT Support Specialist
Daniel Chinea
I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.
Technology Project Manager
Steve Bruening
The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.
Project Manager
Stephanie Chan
As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.
Step-by-Step to Stellar Results
Interaktive Programmierumgebung
Tauche in unsere interaktive Umgebung ein: Schreibe und führe deinen Code mit Echtzeit-Feedback und Erfolgsmetriken aus—lerne bei jedem Schritt durch Praxis.
KI-gestützte Unterstützung
Nutze den integrierten KI-Assistenten, um Fehler zu erklären, Korrekturen vorzuschlagen oder Fragen zu deinem Code zu beantworten—so bleibst du produktiv und kommst nie ins Stocken.
Check your progress
Schließe jedes Modul mit einem kurzen Quiz ab, das sofortiges Feedback liefert, deinen Fortschritt verfolgt und sicherstellt, dass du die wichtigsten Konzepte beherrschst.
Promote your expertise
Erhalte dein branchenanerkanntes Zertifikat nach Abschluss und teile es mit einem Klick auf LinkedIn—lass dein Netzwerk sehen, was du kannst.
Vertraut von Mitarbeitern führender Unternehmen
und Studenten führender Universitäten
Zugriff auf den gesamten Katalog
Ein Abonnement eröffnet Ihnen diesen Kurs und unseren gesamten Katalog von Projekten und Fähigkeiten.Features:
500+ Top-bewertete KurseFortschrittlicher KI-Copilot
Personalisierte Lernpfade40+ praxisnahe Projekte
Ohne Kündigung, bevor der ausgewählte Rabattplan endet, akzeptiere ich, dass Codefinity automatisch belastet $104 alle 3 Monate bis ich kündige. Erfahren Sie mehr über die Stornierungs- und Rückerstattungsrichtlinien in Abonnementbedingungen.
Probiere Codefinity mit Vertrauen aus – 30-Tage-Geld-zurück-Garantie inklusive
Um dich bei Codefinity willkommen zu heißen, bieten wir bis zu 64% Rabatt auf unsere Kurse. Außerdem haben wir eine 30-Tage-Geld-zurück-Garantie, damit du uns risikofrei ausprobieren kannst.Wir freuen uns wirklich darauf, dich auf unserer Plattform willkommen zu heißen und sind bestrebt, dein Lernerlebnis einfach, interaktiv und unterhaltsam zu gestalten.
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
to kickstart your career
500+ Top-Rated courses
Completion certificates
Early access to new courses
40+ hands-on Real-world projects
Personalized study tracks
Unlimited workspaces
Sofortiger Zugriff auf 500+ Kurse
Unbegrenztes Lernen, sofortiger ZugriffErhalte vollen Zugriff auf alle Kurse und Tracks, einschließlich Videoinhalten, Quiz und ausführlichen Materialien—beginne jederzeit mit dem Lernen.
Branchenanerkannte ZertifikateErhalte Zertifikate, die deine Expertise bestätigen und deine Karriere in Tech, KI, Daten, Marketing und darüber hinaus fördern.
KI-unterstütztes LernenErhalte personalisierte Hinweise, Echtzeit-Feedback und KI-gestützte Erklärungen, um deinen Fortschritt zu beschleunigen.
Ständig wachsend: Neue Kurse & KarrierepfadeBleibe mit ständig aktualisierten Kursen, Karriereplänen, Herausforderungen und praktischen Tests auf dem neuesten Stand.
Baue relevante Fähigkeiten aufMeistere gefragte Fähigkeiten mit Kursen in KI, Datenwissenschaft, Programmierung, Marketing, Automatisierung, Webentwicklung und mehr.
Interaktives & nahtloses LernenBeteilige dich an praxisnahen Projekten, realen Übungen und einem intuitiven Lernerlebnis — keine zusätzlichen Werkzeuge erforderlich.
