

Unsicher, wo
anfangen?
Track
Zertifikat
Werden Sie Ein React-Entwickler
4.6+
★★★★★
★★★★★
63 Bewertungen
Intermediate
Beherrschen Sie die Kunst, dynamische und interaktive Benutzeroberflächen für Webanwendungen als erfahrener React-Entwickler zu erstellen. Wenn Sie JavaScript gut verstehen, ist es eine kluge Entscheidung, sich auf die Beherrschung von React zu konzentrieren. Mehr anzeigen
React
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity TeamsWhat you will learn
- Build modern web applications using React, including components, props, and state management
- Navigate between pages seamlessly with React Router and implement dynamic routing
- Manage global state efficiently using Redux Toolkit for scalable applications
- Develop full-stack applications with Next.js 14, including server-side rendering and API routes
- Explore the basics of React Native to build cross-platform mobile applications
- 171 chapters
- 27 hours
- 119 tasks
Trusted by employees of leading companies
Learning track content
Module 1 / React-Meisterschaft
Gewinnen Sie ein Verständnis der Kernprinzipien von React. Sie lernen JSX (JavaScript XML), den Aufbau wiederverwendbarer UI-Komponenten und das Rendern von Elementen kennen. Zusätzlich erkunden Sie die Bedeutung der Datensammlung und der bedingten Darstellung in React-Anwendungen. Am Ende dieses Abschnitts haben Sie ein solides Fundament der wesentlichen Konzepte von React, das Sie für den Erfolg in den fortgeschritteneren Themen der folgenden Abschnitte vorbereitet.
- Was Ist React?Vorschau
- SPAs vs. MPAs in der WebentwicklungVorschau
- Wie React mit dem Virtuellen DOM ArbeitetVorschau
- Einführung in JSX in ReactVorschau
- Erstellen Komplexer JSX-ElementeVorschau
- Elemente in React RendernVorschau
- Herausforderung: Rendering-ElementVorschau
- React-KomponenteVorschau
- Props in ReactVorschau
- Herausforderung: Funktionale KomponentenVorschau
- Bedingte DarstellungVorschau
- Herausforderung: Bedingte Darstellung - Chat-BenachrichtigungVorschau
- Herausforderung: Bedingte Darstellung - BankalarmVorschau
- Rendern Einer DatensammlungVorschau
- Herausforderung: Rendern Einer DatensammlungVorschau
- Zusammenfassung des Abschnitts Einführung in ReactVorschau
Erkunden Sie die verschiedenen Methoden, um Stile zu React-Anwendungen hinzuzufügen. Sie werden lernen, wie man Stile auf einzelne Komponenten anwendet, dynamische Stile verwendet und einen skalierbaren und wartbaren Styling-Ansatz in Ihren Projekten beibehält.
- Einführung in das Styling in ReactVorschau
- Inline-StileVorschau
- Inline-Stile in der PraxisVorschau
- Herausforderung: Inline-StileVorschau
- Styling mit der CSS-DateiVorschau
- Styling mit der CSS-Datei in der PraxisVorschau
- Herausforderung: Styling mit der CSS-DateiVorschau
- Styling mit CSS-ModulenVorschau
- Datei- und Ordnerstruktur-OrganisationVorschau
- Herausforderung: CSS-ModuleVorschau
- Zusammenfassung des Abschnitts Styling in ReactVorschau
Leistungsstarke Funktionen in der modernen React-Entwicklung. Hooks revolutionieren die Art und Weise, wie wir funktionale Komponenten schreiben, indem sie eine prägnante und intuitive Möglichkeit bieten, den Zustand zu verwalten und Nebeneffekte auszuführen. Im Gegensatz dazu ermöglicht Context das Teilen von Daten durch den Komponentenbaum, ohne dass Prop Drilling erforderlich ist. Die Kombination von Hooks und Context ermöglicht ein effizientes Zustandsmanagement und eine vereinfachte Datenfreigabe in React-Anwendungen.
- Einführung: React Hooks und ContextVorschau
- UseState-HookVorschau
- Herausforderung: Sichtbarkeit UmschaltenVorschau
- useRef-HookVorschau
- Herausforderung: Erstellen Einer Formular-KomponenteVorschau
- UseEffect-HookVorschau
- Herausforderung: Daten Abrufen und AnzeigenVorschau
- useMemo-HookVorschau
- Herausforderung: AutolistenfilteringVorschau
- KontextVorschau
- Kontext in der PraxisVorschau
- Herausforderung: Welt der Astronomie AppVorschau
- Zusammenfassung des Abschnitts React Hooks und ContextVorschau
Schritt-für-Schritt-Anleitung, wie man ein reales React-Projekt startet. Vom Einrichten Ihrer Entwicklungsumgebung bis hin zum Verständnis der Projektorganisation und wichtiger Werkzeuge werden Sie das Wissen und das Vertrauen gewinnen, um Ihre React-Reise zu beginnen.
Module 2 / React Router
Lernen Sie die theoretischen Grundlagen von Konzepten wie URL, Domain, Protokoll, Abfrageparametern und mehr. Verstehen Sie die Bedeutung des Routings in Webanwendungen und warum wir die React Router-Bibliothek benötigen.
Entdecken Sie, wie Sie eine komplette React-Anwendung von Grund auf erstellen können, mit der Fähigkeit, Inhalte anzuzeigen, die sich basierend auf der URL mit der React Router-Funktionalität anpassen.
- ÜbersichtVorschau
- Installation von React RouterVorschau
- Aktivierung Der Routing-FunktionalitätVorschau
- Routen DefinierenVorschau
- Erste Schritte ZusammenfassungVorschau
- Komponenten Mit Lazy Loading ImportierenVorschau
- Implementierung Einer Fallback-KomponenteVorschau
- Zweite Schritte ZusammenfassungVorschau
- Navigation ErstellenVorschau
- Die Vollständige React Router Logik ErkundenVorschau
- Zusammenfassung der Grundlagen von React RouterVorschau
Erkunden Sie die Verwendung von Abfragezeichenfolgen zum Teilen und Verwalten des Anwendungszustands über URLs, arbeiten Sie mit verschiedenen Datentypen in Abfrageparametern und nutzen Sie React Router für die Navigation und Effekte basierend auf URL-Änderungen.
Module 3 / Redux Toolkit & React
Erkunden Sie die grundlegenden Konzepte des Zustandsmanagements und zeigen Sie, wie Sie die Leistungsfähigkeit des Redux Toolkits nutzen können. Wir führen Sie durch den Installationsprozess und helfen Ihnen, Ihr erstes React Redux Toolkit-Projekt zu erstellen. Zusätzlich erwartet Sie eine Herausforderung, um Ihr Verständnis und Ihre Fähigkeiten zu testen.
Untersuchen Sie die Integration von Redux in React-Anwendungen und decken Sie dabei die Kernkonzepte ab: Aktionen, Reducer und den Redux-Store. Beinhaltet praktische Beispiele und Codeerklärungen zur Konfiguration eines Stores, zur Erstellung von Reducern und zur Verbindung von React-Komponenten über Hooks wie useSelector und useDispatch.
- Was ErwartetVorschau
- Anfangscode des Projekts und DateistrukturVorschau
- Erstellen Eines Redux StoresVorschau
- Integration des Redux Stores in die AppVorschau
- Store-Inspektion in der AppVorschau
- Aktionen und Action CreatorsVorschau
- Rolle der ReducerVorschau
- Inspektion von Aktionen und ReducersVorschau
- Redux und React VerbindenVorschau
- Abschluss des App-CodesVorschau
Verbessern Sie Ihre Fähigkeiten im Zustandsmanagement. In diesem praxisnahen Workshop bewältigen Sie reale Herausforderungen und sammeln praktische Erfahrungen mit dem Redux Toolkit für eine nahtlose Anwendungsentwicklung.
Module 4 / Next.js 14
Lassen Sie uns besprechen, was Sie lernen müssen, bevor Sie in das Next.js-Framework eintauchen, was Sie von diesem Kurs erwarten können und was Sie bauen werden.
Wir werden das Projekt einrichten, Möglichkeiten zur Hinzufügung von Styling zu unserer App untersuchen und visuelle Aspekte wie Bilder, Schriftarten, Seiten und Layouts behandeln.
- ProjekteinrichtungVorschau
- Projektdatei-OrdnerstrukturVorschau
- StilansätzeVorschau
- Hinzufügen der Globalen CSS-DateiVorschau
- Tailwind StylingVorschau
- CSS-ModuleVorschau
- Bedingtes Anwenden von StilenVorschau
- Benutzerdefinierte Google-SchriftartenVorschau
- Herausforderung: Hinzufügen Einer Benutzerdefinierten Google-SchriftartVorschau
- BilderVorschau
Lernen Sie, wie Sie einfach eine neue Ansicht für Ihre App erstellen und verwalten und nahtlos durch alle Seiten mit einem integrierten Routing-System navigieren können.
Stellen Sie die Next.js-App mit GitHub- und Vercel-Konten bereit. Richten Sie zusätzlich eine Datenbank ein, um die App mit den notwendigen Daten zu versorgen.
Überlegen Sie, wie Sie Daten klar und effizient abrufen und dem Benutzer anzeigen können.
Entdecken Sie, wie Sie moderne Webfunktionen wie Paginierung, CRUD-Operationen, globale Suche, Formularvalidierung und mehr implementieren.
Implementierung der Authentifizierung in Next.js.
- Verständnis Der AuthentifizierungVorschau
- Login RouteVorschau
- NextAuth.jsVorschau
- Authentifizierungskonfiguration & Routen-SchutzVorschau
- Passwort-Hashing & AnmeldeinformationenVorschau
- AnmeldefunktionalitätVorschau
- Verbindung von UI und FunktionalitätVorschau
- AbmeldefunktionVorschau
- Was Kommt als Nächstes?Vorschau
Module 5 / Grundlagen von React Native
Die umfassende Einführung in React Native skizziert die Voraussetzungen und Kursziele und bietet Anleitung zu effizienten Lernpraktiken. Verstehen Sie, was Sie vom Kurs erwarten können und wie Sie den Lernprozess effektiv angehen.
Erkunden Sie die grundlegenden Konzepte von React Native, von der Einrichtung der Entwicklungsumgebung bis hin zum Verständnis der React Native-Komponenten. Sammeln Sie praktische Erfahrungen beim Erstellen einer einfachen App und legen Sie den Grundstein für komplexere Projekte.
- Einrichtung des ProjektsVorschau
- React Native KomponentenVorschau
- Ansichts- und TextkomponentenVorschau
- BildkomponenteVorschau
- StilgestaltungVorschau
- Herausforderung: Stile HinzufügenVorschau
- TouchableOpacity-KomponenteVorschau
- ScrollView-KomponenteVorschau
- Datenlisten RendernVorschau
- Herausforderung: Interaktive ResortlisteVorschau
- QuizVorschau
Lernen Sie die effiziente Verwaltung dynamischer States, Props, Navigation und Hooks, um ausgereifte React Native-Anwendungen zu erstellen.
Erkunden Sie fortgeschrittene Aspekte der React Native-Entwicklung und behandeln Sie wichtige Themen wie Input-Verarbeitung, StatusBar, ActivityIndicators und mehr. Tauchen Sie tief in praktische Techniken zum Erstellen anspruchsvoller mobiler Anwendungen ein.
Requirements
- A computer with a browser - all browsers are supported.
- Your enthusiasm to enhance your tech skills.
- Everything else needed to start learning and practicing is already included in this course.
Over 200,000 5-star ratings and counting
Ruslan Kravchuk
Das Wichtigste ist zu lernen und nicht aufzugeben
Das Material ist gut, es gibt viel zu lernen, alles um besser zu werden und das Wichtigste ist, das zu lernen, was Sie wollen....
Matteo Comune
Dank ihnen lerne ich viel…
Dank ihnen lerne ich viel schneller, weil sie Ihnen helfen, alles von Grund auf zu verstehen. Es ist die beste Website, die Menschen ohne IT-Hintergrund hilft...
Yuliana Cadavid
großartiger Kurs für Anfänger
großartiger Kurs für Anfänger, sie testen Ihr Wissen in jeder Lektion...
Elpunzon
Ich genieße meine Codefinity-Erfahrung…
Ich genieße meine Codefinity-Erfahrung beim Lernen von Python. Die selbstgesteuerte Lernweise ist großartig, weil ich sie in meinen Zeitplan integrieren kann...
Alexandru Alexandru
Es ist schön, von Codefinity zu lernen
Es ist schön, von Codefinity zu lernen. Es ist einfach und hat gute Beispiele für das, was ich hier gelernt habe...
jacob Templet
Easy to follow along with and provides…
Einfach zu folgen und bietet Herausforderungen in meinem täglichen Leben. Die Herausforderung hält mich dazu an, Tag für Tag lernen zu wollen...
Elan
Codefinity ist ein umfassendes Lernwerkzeug…
Codefinity ist ein umfassendes Lernwerkzeug, das Ihnen hilft, Ihre Fähigkeiten als Software-Ingenieur oder Datenwissenschaftler zu entwickeln. Die Übungen machen Spaß und sind eine gute Möglichkeit, Ihre Fähigkeiten zu schärfen...
Thibault
Zum ersten Mal lernen, wie man programmiert
Zum ersten Mal lernen, wie man programmiert und es erfolgreich mit Codefinity tut - danke...
Adrien Morel
Gut gestaltet für totale Anfänger
Gut gestaltet für totale Anfänger, schrittweiser Fortschritt und gibt mir Vertrauen....
_Gracy
es ist einfach perfekt erklärt
es ist einfach perfekt erklärt! bisher habe ich keine Schwierigkeiten erlebt, weil alles so gut organisiert ist...
Ruslan Kravchuk
Das Wichtigste ist zu lernen und nicht aufzugeben
Das Material ist gut, es gibt viel zu lernen, alles um besser zu werden und das Wichtigste ist, das zu lernen, was Sie wollen....
Matteo Comune
Dank ihnen lerne ich viel…
Dank ihnen lerne ich viel schneller, weil sie Ihnen helfen, alles von Grund auf zu verstehen. Es ist die beste Website, die Menschen ohne IT-Hintergrund hilft...
Yuliana Cadavid
großartiger Kurs für Anfänger
großartiger Kurs für Anfänger, sie testen Ihr Wissen in jeder Lektion...
Elpunzon
Ich genieße meine Codefinity-Erfahrung…
Ich genieße meine Codefinity-Erfahrung beim Lernen von Python. Die selbstgesteuerte Lernweise ist großartig, weil ich sie in meinen Zeitplan integrieren kann...
Alexandru Alexandru
Es ist schön, von Codefinity zu lernen
Es ist schön, von Codefinity zu lernen. Es ist einfach und hat gute Beispiele für das, was ich hier gelernt habe...
jacob Templet
Easy to follow along with and provides…
Einfach zu folgen und bietet Herausforderungen in meinem täglichen Leben. Die Herausforderung hält mich dazu an, Tag für Tag lernen zu wollen...
Elan
Codefinity ist ein umfassendes Lernwerkzeug…
Codefinity ist ein umfassendes Lernwerkzeug, das Ihnen hilft, Ihre Fähigkeiten als Software-Ingenieur oder Datenwissenschaftler zu entwickeln. Die Übungen machen Spaß und sind eine gute Möglichkeit, Ihre Fähigkeiten zu schärfen...
Thibault
Zum ersten Mal lernen, wie man programmiert
Zum ersten Mal lernen, wie man programmiert und es erfolgreich mit Codefinity tut - danke...
Adrien Morel
Gut gestaltet für totale Anfänger
Gut gestaltet für totale Anfänger, schrittweiser Fortschritt und gibt mir Vertrauen....
_Gracy
es ist einfach perfekt erklärt
es ist einfach perfekt erklärt! bisher habe ich keine Schwierigkeiten erlebt, weil alles so gut organisiert ist...
Data Engineer
Abschlusszertifikat
Zeigen Sie Ihre neu erworbenen Fähigkeiten. Sie haben es sich verdient.
Discover more
Learning tracks
Nur für Ultimate
7 Kurse
293 Aufgaben
Nur für Ultimate
6 Kurse
168 Aufgaben
Nur für Ultimate
4 Kurse
115 Aufgaben
Nur für Ultimate
6 Kurse
101 Aufgaben
Nur für Ultimate
4 Kurse
143 Aufgaben
Nur für Ultimate
3 Kurse
39 Aufgaben
Nur für Ultimate
4 Kurse
96 Aufgaben
Nur für Ultimate
7 Kurse
376 Aufgaben
Nur für Ultimate
2 Kurse
1 Projekt
65 Aufgaben
Nur für Ultimate
7 Kurse
346 Aufgaben
Nur für Ultimate
6 Kurse
309 Aufgaben
Nur für Ultimate
5 Kurse
146 Aufgaben
Nur für Ultimate
5 Kurse
135 Aufgaben
Nur für Ultimate
3 Kurse
71 Aufgaben
Nur für Ultimate
6 Kurse
239 Aufgaben
Nur für Ultimate
5 Kurse
239 Aufgaben
Nur für Ultimate
4 Kurse
125 Aufgaben
Nur für Ultimate
3 Kurse
119 Aufgaben
Nur für Ultimate
3 Kurse
75 Aufgaben
Learning tracks
Spur
Webentwicklung mit C#
Anfänger
4.8
(2331)
Spur
Python von Null bis Held
Anfänger
4.7
(8265)
Spur
SQL von Null bis Held
Anfänger
4.7
(2569)
Spur
C++ Grundlagen
Anfänger
4.5
(463)
Spur
Spielentwicklung Mit Unity
Anfänger
4.7
(68)
Spur
Excel-Grundlagen
Anfänger
4.7
(277)
Spur
Data Analyst Foundation
Anfänger
4.8
(2458)
Spur
Java-Grundlagen
Anfänger
4.7
(186)
Spur
Python Über Fortgeschritten
Anfänger
4.6
(62)
Spur
Full Stack Webentwicklung
Anfänger
4.7
(840)
Spur
Grundlagen der Frontend-Entwicklung
Anfänger
4.7
(811)
Spur
Beherrschung der Datenvisualisierung
Mittelstufe
4.7
(551)
Spur
Überwachtes Maschinelles Lernen
Mittelstufe
4.6
(123)
Spur
C++ Meisterschaft
Fortgeschritten
4.8
(16)
Spur
Java Web
Fortgeschritten
4.7
(1147)
Spur
Werden Sie QA-Ingenieur
Anfänger
4.7
(706)
Spur
Videoproduktion mit Adobe
Anfänger
5.0
(5)
Spur
Ui/ux-Design-Tools
Anfänger
5.0
(4)
Spur
Essential Office Skills
Anfänger
4.8
(220)
Become a Development expert
Interactive exercises
Learning videos
AI-assistant on all courses
Workspaces for designing your own projects
Ready to get started?
ProBest intro offer | UltimateA complete experience to kickstart your career | |
---|---|---|
85+ Top-Rated courses | ||
Completion certificates | ||
AI-Assistant in all courses | ||
20+ hands-on Real-world projects | ||
Personalized study tracks | ||
Unlimited workspaces | ||
Boost your Tech Skills!
with up to 55% off
What you'll get with our subscription:
Access to 85+ top-rated courses
AI-driven Learning
Workspaces for practicing your skills
Personalized study tracks
Certificates of completion
Training 2 or more people?
Get your team access to Codefinity courses anytime, anywhere.
Try Codefinity Teams