Bli en React-Utvecklare
Intermediate
4.8
8 reviews
39 Learners
Updated 11/2025
Bemästra konsten att bygga dynamiska och interaktiva användargränssnitt för webbapplikationer som en skicklig React Developer. Om du förstår JavaScrip…
142
Chapters
22
Learning hours
98
Assignments
AI Assistant
Shareable Certificate
Resultat
Resultat
Track content
Related courses and projects
Omdömen
Funktioner
Priser
Resultat
Resultat
Track content
Related courses and projects
Omdömen
Funktioner
Priser
Vad du kommer att lära dig
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
Få en förståelse för de grundläggande principerna i React. Du kommer att lära dig om JSX (JavaScript XML), att bygga återanvändbara UI-komponenter och rendera element. Dessutom kommer du att utforska vikten av datainsamling och villkorlig rendering i React-applikationer. Efter denna sektion har du en solid grund i Reacts centrala koncept, vilket förbereder dig för mer avancerade ämnen i de kommande sektionerna.
Vad är React och varför använda det?
Jämförelse Mellan SPA och MPA Inom Webbutveckling
Hur React Fungerar Med Den Virtuella DOM:en
Introduktion till JSX för att skriva HTML i JavaScript
Bygga Komplexa Användargränssnitt Med JSX
Rendering av element i React
Utmaning: Rendera ett Element i React
Förståelse av React-Komponenter
Överföra Data med Props i React
Utmaning: Skapa Funktionella Komponenter
Villkorlig Rendering i React
Utmaning: Implementera Villkorlig Rendering – Chattavisering
Utmaning: Implementera Villkorlig Rendering – Bankvarning
Rendering av Datakollektioner i React
Utmaning: Visa Datainsamlingar i React
Sammanfattning av React-Grunderna
Utforska olika metoder för att lägga till stilar i React-applikationer. Du kommer att lära dig hur man applicerar stilar på enskilda komponenter, använder dynamiska stilar och upprätthåller en skalbar och underhållbar stilhantering i dina projekt.
Introduktion till Styling i React
Använda Inline-Stilar i React
Tillämpning av Inline-Stilar i Praktiken
Utmaning: Använd Inline-Stilar i en React-Komponent
Styla React-Komponenter med Extern CSS
Tillämpning av Extern CSS i Praktiken
Utmaning: Tillämpa Extern CSS på en React-App
Använda CSS-moduler för Avgränsad Styling i React
Organisering av Fil- och Mappstrukturer för Stilar
Utmaning: Använd CSS-moduler i React
Sammanfattning av Stylingtekniker i React
Kraftfulla funktioner inom modern React-utveckling. Hooks revolutionerar hur vi skriver funktionella komponenter genom att erbjuda ett koncist och intuitivt sätt att hantera tillstånd och utföra bieffekter. Context möjliggör delning av data genom komponentträdet utan prop-drilling. Kombinationen av hooks och Context möjliggör effektiv tillståndshantering och förenklad datadelning i React-applikationer.
Introduktion till React Hooks och Context
Hantering av Tillstånd med UseState-Hooken
Utmaning: Växla Synlighet med useState
Arbeta med Referenser med Hjälp av useRef-Hooken
Utmaning: Bygg en Kontrollerad Formulärkomponent
Hantering av Sidverkningar med useEffect-Hooken
Utmaning: Hämta och Visa Data med useEffect
Optimera Prestanda med useMemo-Hooken
Utmaning: Implementera Ett Billistfilter Med useMemo
Dela Tillstånd Mellan Komponenter Med Context
Använda Context i Ett Verkligt Scenario
Utmaning: Bygg en Värld av Astronomi-App med Context
Sammanfattning av React Hooks och Context
Steg-för-steg-guide om hur du startar ett verkligt React-projekt. Från att konfigurera din utvecklingsmiljö till att förstå projektorganisation och viktiga verktyg får du kunskap och självförtroende att påbörja din React-resa.
Lär dig de teoretiska grunderna för begrepp som URL, domän, protokoll, frågeparametrar och mer. Förstå betydelsen av routing i webbapplikationer och varför vi behöver React Router-biblioteket.
Lär dig hur du skapar en komplett React-applikation från grunden, med möjlighet att visa innehåll som anpassas baserat på URL med hjälp av React Router-funktionalitet.
Översikt av Webbplatsen med Flera Sidor
Installera React Router
Aktivering av Routing i en React-App
Definiera Rutter för Navigering
Sammanfattning: Första Stegen i React Router
Optimering av Importer med Lazy Loading
Implementering av en Reservkomponent
Sammanfattning: Andra Steg i React Router
Skapa och Hantera Navigering
Utforskning av React Routers Fullständiga Logik
Sammanfattning av Grunderna i React Router
Utforska användning av frågesträngar för att dela och hantera applikationstillstånd via URL:er, arbeta med olika datatyper i frågeparametrar och utnyttja React Router för navigering och effekter baserade på URL-förändringar.
Utforska de grundläggande koncepten inom tillståndshantering och lär dig hur du kan utnyttja kraften i Redux Toolkit. Vi vägleder dig genom installationsprocessen och hjälper dig att skapa ditt första React Redux Toolkit-projekt. Dessutom får du möta en utmaning för att testa din förståelse och dina färdigheter.
Undersök Redux-integrering med React-applikationer och täck grundläggande koncept: actions, reducers och Redux store. Inkluderar praktiska exempel och kodförklaringar för att konfigurera en store, skapa reducers och koppla React-komponenter via hooks som useSelector och useDispatch.
Vad Väntar
Förståelse av Projektets Kod och Filstruktur
Skapa Redux-Butiken
Integrering av Redux-butiken i React-appen
Inspektera butiken i React-appen
Förståelse av Actions och Action Creators
Förståelse för Reducerarnas Roll
Inspektera Actions och Reducers i Redux
Ansluta Redux till React-Komponenter
Slutföra Appen
Förbättra dina färdigheter inom tillståndshantering. I denna praktiska workshop hanterar du verkliga utmaningar och får praktisk erfarenhet av att använda Redux Toolkit för smidig applikationsutveckling.
Vi diskuterar vad du behöver kunna innan du börjar med Next.js-ramverket, vad du kan förvänta dig av denna kurs och vad du kommer att bygga.
Vi kommer att konfigurera projektet, undersöka olika sätt att lägga till styling i vår app och behandla visuella aspekter såsom bilder, typsnitt, sidor och layouter.
Konfigurera Next.js-Projektet
Förståelse av Projektets Fil- och Mappstruktur
Stilmöjligheter i Next.js
Lägga Till Den Globala CSS-Filen
Använda Tailwind CSS för Styling
Arbete med CSS-moduler
Tillämpa Stilar Villkorligt
Lägga till Anpassade Google-Teckensnitt
Utmaning: Implementera ett Anpassat Google-Teckensnitt
Hantering av Bilder i Next.js
Lär dig att enkelt skapa och hantera en ny vy för din applikation samt navigera mellan alla sidor smidigt med ett inbyggt routingsystem.
Distribuera Next.js-appen med hjälp av GitHub- och Vercel-konton. Upprätta dessutom en databas för att förse appen med nödvändig data.
Överväg hur data kan erhållas och presenteras för användaren på ett tydligt och effektivt sätt.
Utforska hur moderna webbtekniker som paginering, CRUD-operationer, global sökning, formulärvalidering och mer implementeras.
Implementering av autentisering i Next.js.
Förståelse av Autentisering
Konfigurera Inloggningsrutt
Använda NextAuth.js för Autentisering
Konfigurera Autentisering och Skydda Rutter
Hashning av Lösenord och Hantering av Autentiseringsuppgifter
Implementering av Inloggningsfunktionalitet
Koppla Användargränssnittet till Autentiseringslogik
Implementering av Utloggningsfunktionalitet
Slutliga Tankar och Nästa Steg
Förbättra dina tekniska färdigheter!
med upp till 55% rabatt
Features:
*Tracks not included in Pro plan
500+ topprankade kurserBanbrytande AI Copilot
Personliga studieplaner40+ praktiska verkliga projekt
Ingen avbokning, innan den valda rabatterade planen är slut, godkänner jag att Codefinity automatiskt debiterar $104 var 3:e månad tills jag avbokar. Läs mer om avboknings- och återbetalningspolicyn på Prenumerationsvillkor.
Recommended Courses and Projects
kurs
TEST COURSE WITH QUESTIONSs
-----
1 timme
5 kapitelNybörjare
173 STUDERAR NU
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 timmar 51 kapitelMedelnivå
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 timmar 37 kapitelMedelnivå
kurs
Foundations of React Native
Explore the world of mobile app development with React Native. Learn fundamental concepts and advanced techniques to create cross-platform mobile applications efficiently.
5 timmar 29 kapitelAvancerad
kurs
Introduction to Redux
In this course, the user will learn how to use Redux and React to create powerful applications.
5 timmar 29 kapitelAvancerad
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 timmar 24 kapitelNybörjare
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 timme 13 kapitelNybörjare
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 timme 11 kapitelMedelnivå
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 timme 10 kapitelMedelnivå
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 timme 12 kapitelNybörjare
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 timme 10 kapitelMedelnivå
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 timmar 14 kapitelMedelnivå
Discover more Learning Tracks
spår
TEST TRACK 12
1 Kurs
1 Projekt
0 TaskNybörjare
4.0
(17984)
spår
Fullstack Webbutveckling
7 Kurser424 UppgifterNybörjare
4.5
(53)
spår
Bemästra Datavisualisering
5 Kurser146 UppgifterMedelnivå
4.4
(9)
spår
SQL från Nybörjare till Expert
7 Kurser249 UppgifterNybörjare
4.6
(113)
spår
C++-Grunder
6 Kurser124 UppgifterNybörjare
3.9
(31)
spår
Python från Noll till Hjälte
6 Kurser215 UppgifterNybörjare
4.6
(337)
spår
Maskininlärning Mästerskap
7 Kurser182 UppgifterMedelnivå
4.5
(6)
spår
Python Bortom Mellanliggande
2 Kurser1 Projekt62 UppgifterNybörjare
5.0
(2)
spår
Java-Grunder
11 Kurser459 UppgifterNybörjare
4.5
(16)
spår
Spelutveckling med Unity
4 Kurser164 UppgifterNybörjare
4.4
(8)
spår
Become a Django Developer
5 Kurser178 UppgifterAvancerad
4.5
(33)
Varför folk väljer Codefinity
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
Interaktiv kodningsmiljö
Hoppa in i vår interaktiva miljö: skriv och kör din kod med feedback i realtid och framgångsmått—lär dig genom att göra vid varje steg.
AI-driven support
Använd den inbyggda AI-assistenten för att förklara fel, föreslå lösningar eller svara på frågor om din kod—så att du förblir produktiv och aldrig fastnar.
Check your progress
Avsluta varje modul med ett snabbt quiz som ger omedelbar feedback, spårar din framsteg och säkerställer att du har bemästrat viktiga koncept.
Promote your expertise
Få ditt branschigenkända certifikat vid slutförandet och dela det på LinkedIn med ett klick—låt ditt nätverk se vad du kan göra.
Betrodd av anställda på ledande företag
och studenter från toppuniversitet
Full tillgång till katalogen
Ett abonnemang öppnar denna kurs och hela vår katalog av projekt och färdigheter.Features:
500+ topprankade kurserBanbrytande AI Copilot
Personliga studieplaner40+ praktiska verkliga projekt
Ingen avbokning, innan den valda rabatterade planen är slut, godkänner jag att Codefinity automatiskt debiterar $104 var 3:e månad tills jag avbokar. Läs mer om avboknings- och återbetalningspolicyn på Prenumerationsvillkor.
Prova Codefinity med förtroende – 30-dagars pengarna-tillbaka-garanti ingår
För att välkomna dig till Codefinity erbjuder vi upp till 64% rabatt på våra kurser. Dessutom har vi en 30-dagars pengarna-tillbaka-garanti, så att du kan prova oss riskfritt.Vi ser verkligen fram emot att välkomna dig till vår plattform och är engagerade i att göra din lärandeupplevelse enkel, interaktiv och rolig.
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
Få omedelbar tillgång till 500+ kurser
Obegränsat lärande, omedelbar tillgångFå full tillgång till alla kurser och spår, inklusive videoinnehåll, quiz och djupgående material—börja lära när som helst.
Branschigenkända certifikatFå certifikat som bekräftar din expertis och stärker din karriär inom teknik, AI, data, marknadsföring och mer.
AI-assisterat lärandeFå personliga tips, feedback i realtid och AI-drivna förklaringar för att påskynda din framsteg.
Ständigt expanderande: Nya kurser och karriärspårHåll dig före med ständigt uppdaterade kurser, karriärkartor, utmaningar och praktiska övningstester.
Bygg färdigheter som räknasBehärska efterfrågade färdigheter med kurser i AI, datavetenskap, programmering, marknadsföring, automation, webbutveckling och mer.
Interaktivt och sömlöst lärandeEngagera dig med praktiska projekt, verkliga övningar och en intuitiv lärandeupplevelse — inga extra verktyg behövs.
