

Unsicher, wo
anfangen?
Track
Zertifikat
Werden Sie Ein React-Entwickler
4.8+
★★★★★
★★★★★
5 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?Preview
- SPAs vs. MPAs in der WebentwicklungPreview
- Wie React mit dem Virtuellen DOM ArbeitetPreview
- Einführung in JSX in ReactPreview
- Erstellen Komplexer JSX-ElementePreview
- Elemente in React RendernPreview
- Herausforderung: Rendering-ElementPreview
- React-KomponentePreview
- Props in ReactPreview
- Herausforderung: Funktionale KomponentenPreview
- Bedingte DarstellungPreview
- Herausforderung: Bedingte Darstellung - Chat-BenachrichtigungPreview
- Herausforderung: Bedingte Darstellung - BankalarmPreview
- Rendern Einer DatensammlungPreview
- Herausforderung: Rendern Einer DatensammlungPreview
- Zusammenfassung des Abschnitts Einführung in ReactPreview
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 ReactPreview
- Inline-StilePreview
- Inline-Stile in der PraxisPreview
- Herausforderung: Inline-StilePreview
- Styling mit der CSS-DateiPreview
- Styling mit der CSS-Datei in der PraxisPreview
- Herausforderung: Styling mit der CSS-DateiPreview
- Styling mit CSS-ModulenPreview
- Datei- und Ordnerstruktur-OrganisationPreview
- Herausforderung: CSS-ModulePreview
- Zusammenfassung des Abschnitts Styling in ReactPreview
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 ContextPreview
- UseState-HookPreview
- Herausforderung: Sichtbarkeit UmschaltenPreview
- useRef-HookPreview
- Herausforderung: Erstellen Einer Formular-KomponentePreview
- UseEffect-HookPreview
- Herausforderung: Daten Abrufen und AnzeigenPreview
- useMemo-HookPreview
- Herausforderung: AutolistenfilteringPreview
- KontextPreview
- Kontext in der PraxisPreview
- Herausforderung: Welt der Astronomie AppPreview
- Zusammenfassung des Abschnitts React Hooks und ContextPreview
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.
- ÜbersichtPreview
- Installation von React RouterPreview
- Aktivierung Der Routing-FunktionalitätPreview
- Routen DefinierenPreview
- Erste Schritte ZusammenfassungPreview
- Komponenten Mit Lazy Loading ImportierenPreview
- Implementierung Einer Fallback-KomponentePreview
- Zweite Schritte ZusammenfassungPreview
- Navigation ErstellenPreview
- Die Vollständige React Router Logik ErkundenPreview
- Zusammenfassung der Grundlagen von React RouterPreview
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 ErwartetPreview
- Anfangscode des Projekts und DateistrukturPreview
- Erstellen Eines Redux StoresPreview
- Integration des Redux Stores in die AppPreview
- Store-Inspektion in der AppPreview
- Aktionen und Action CreatorsPreview
- Rolle der ReducerPreview
- Inspektion von Aktionen und ReducersPreview
- Redux und React VerbindenPreview
- Abschluss des App-CodesPreview
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.
- ProjekteinrichtungPreview
- Projektdatei-OrdnerstrukturPreview
- StilansätzePreview
- Hinzufügen der Globalen CSS-DateiPreview
- Tailwind StylingPreview
- CSS-ModulePreview
- Bedingtes Anwenden von StilenPreview
- Benutzerdefinierte Google-SchriftartenPreview
- Herausforderung: Hinzufügen Einer Benutzerdefinierten Google-SchriftartPreview
- BilderPreview
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.
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 ProjektsPreview
- React Native KomponentenPreview
- Ansichts- und TextkomponentenPreview
- BildkomponentePreview
- StilgestaltungPreview
- Herausforderung: Stile HinzufügenPreview
- TouchableOpacity-KomponentePreview
- ScrollView-KomponentePreview
- Datenlisten RendernPreview
- Herausforderung: Interaktive ResortlistePreview
- QuizPreview
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
1 Kurs
1 Projekt
0 Task
Nur für Ultimate
7 Kurse
326 Aufgaben
Nur für Ultimate
5 Kurse
150 Aufgaben
Nur für Ultimate
4 Kurse
115 Aufgaben
Nur für Ultimate
6 Kurse
101 Aufgaben
Nur für Ultimate
6 Kurse
169 Aufgaben
Nur für Ultimate
5 Kurse
132 Aufgaben
Nur für Ultimate
2 Kurse
1 Projekt
57 Aufgaben
Nur für Ultimate
6 Kurse
307 Aufgaben
Nur für Ultimate
4 Kurse
143 Aufgaben
Nur für Ultimate
5 Kurse
170 Aufgaben
Nur für Ultimate
5 Kurse
155 Aufgaben
Nur für Ultimate
6 Kurse
286 Aufgaben
Nur für Ultimate
6 Kurse
226 Aufgaben
Nur für Ultimate
8 Kurse
2 Projekte
176 Aufgaben
Nur für Ultimate
2 Kurse
77 Aufgaben
Nur für Ultimate
7 Kurse
293 Aufgaben
Nur für Ultimate
1 Projekt
0 Task
Nur für Ultimate
2 Kurse
21 Aufgaben
Nur für Ultimate
5 Kurse
112 Aufgaben
Nur für Ultimate
2 Kurse
0 Task
Nur für Ultimate
3 Kurse
39 Aufgaben
Nur für Ultimate
13 Kurse
543 Aufgaben
Nur für Ultimate
13 Kurse
543 Aufgaben
Nur für Ultimate
1 Kurs
0 Task
Nur für Ultimate
0 Task
Nur für Ultimate
5 Kurse
143 Aufgaben
Nur für Ultimate
3 Kurse
79 Aufgaben
Nur für Ultimate
7 Kurse
272 Aufgaben
Nur für Ultimate
5 Kurse
217 Aufgaben
Nur für Ultimate
3 Kurse
104 Aufgaben
Nur für Ultimate
2 Kurse
13 Aufgaben
Nur für Ultimate
3 Kurse
119 Aufgaben
Nur für Ultimate
1 Kurs
15 Aufgaben
Nur für Ultimate
3 Kurse
75 Aufgaben
Nur für Ultimate
3 Kurse
31 Aufgaben
Nur für Ultimate
2 Kurse
151 Aufgaben
Nur für Ultimate
3 Kurse
49 Aufgaben
Nur für Ultimate
2 Kurse
1 Projekt
38 Aufgaben
Nur für Ultimate
3 Kurse
36 Aufgaben
Nur für Ultimate
2 Kurse
1 Projekt
38 Aufgaben
Learning tracks
Spur
TEST TRACK 12
Anfänger
4.0
(5934)
Spur
Full Stack Webentwicklung
Anfänger
4.5
(57)
Spur
Beherrschung der Datenvisualisierung
Mittelstufe
4.6
(7)
Spur
SQL von Null bis Held
Anfänger
4.7
(91)
Spur
C++ Grundlagen
Anfänger
4.4
(17)
Spur
Python von Null bis Held
Anfänger
4.7
(284)
Spur
Überwachtes Maschinelles Lernen
Mittelstufe
4.9
(7)
Spur
Python Über Fortgeschritten
Anfänger
5.0
(1)
Spur
Java-Grundlagen
Anfänger
4.3
(9)
Spur
Spielentwicklung Mit Unity
Anfänger
4.6
(7)
Spur
Become a Django Developer
Fortgeschritten
4.4
(27)
Spur
Flask for Dummies
Mittelstufe
4.5
(31)
Spur
Grundlagen der Frontend-Entwicklung
Anfänger
4.6
(52)
Spur
Web Developer from Zero to Hero
Anfänger
4.6
(56)
Spur
Preparation for Data Science
Mittelstufe
4.5
(11)
Spur
Deep Learning Odyssey
Fortgeschritten
5.0
(3)
Spur
Webentwicklung mit C#
Anfänger
4.8
(97)
Spur
TEST E2E TRACK BEGINNER
Anfänger
Spur
Test Track
Begginer
4.7
(3)
Spur
Skilled Python BackEnd Developer
Fortgeschritten
4.7
(261)
Spur
Test Recalculate
Anfänger
Spur
Excel-Grundlagen
Anfänger
4.5
(33)
Spur
Full-Stack .NET Developer Journey
Mittelstufe
4.8
(128)
Spur
Full-Stack .NET Developer Journey
Mittelstufe
4.8
(128)
Spur
Test track with rating
Fortgeschritten
4.0
(4)
Spur
TEST TEST TRACK
Anfänger
Spur
Data Analyst Foundation
Anfänger
4.7
(110)
Spur
C++ Meisterschaft
Fortgeschritten
Spur
Java Web
Fortgeschritten
4.5
(30)
Spur
Werden Sie QA-Ingenieur
Anfänger
4.5
(43)
Spur
Videoproduktion mit Adobe
Anfänger
Spur
Digital Marketing Essentials
Anfänger
Spur
Ui/ux-Design-Tools
Anfänger
Spur
Test image upload track
Anfänger
Spur
Essential Office Skills
Anfänger
4.6
(24)
Spur
GitHub from Zero to Hero
Anfänger
Spur
No-Code Website Development
Anfänger
Spur
C Programming & Low-Level Development
Anfänger
Spur
testes
Anfänger
4.7
(3)
Spur
Testübersetzungskurs
Mittelstufe
Spur
Test CMS Track
Anfänger
4.7
(3)
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