Læringsspor Bliv En React-Udvikler - Online-undervisning med certifikat

Bliv En React-Udvikler

Intermediate

4.3

117 reviews

5.7k+ Learners

Bliv mester i at bygge dynamiske og interaktive brugergrænseflader til webapplikationer som en dygtig React Developer. Hvis du forstår JavaScript godt…

142

Chapters

Learning hours

Assignments

AI Assistant

Shareable Certificate

Resultater

Track content

Related courses and projects

Udtalelser

Funktioner

Priser

Resultater

Track content

Related courses and projects

Udtalelser

Funktioner

Priser

Hvad du vil lære

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

Opnå forståelse for de centrale principper i React. Du vil lære om JSX (JavaScript XML), opbygning af genanvendelige UI-komponenter og rendering af elementer. Derudover vil du udforske vigtigheden af datainhentning og betinget rendering i React-applikationer. Ved afslutningen af dette afsnit vil du have et solidt fundament i Reacts væsentlige begreber, hvilket forbereder dig til succes med de mere avancerede emner i de følgende afsnit.

Hvad Er React, og Hvorfor Bruge Det?

Sammenligning af SPA'er og MPA'er i Webudvikling

Hvordan React Fungerer Med Det Virtuelle DOM

Introduktion til JSX til at skrive HTML i JavaScript

Opbygning af Komplekse Brugergrænseflader med JSX

Rendering af Elementer i React

Udfordring: Gengiv Et Element i React

Forståelse af React-Komponenter

Videregivelse af Data med Props i React

Udfordring: Opret Funktionelle Komponenter

Betinget Rendering i React

Udfordring: Implementer Betinget Rendering – Chatnotifikation

Udfordring: Implementer Betinget Rendering – Bankadvarsel

Gengivelse af Datasamlinger i React

Udfordring: Vis Datasamlinger i React

Opsummering af React-Grundlæggende

Undersøg de forskellige metoder til at tilføje styles til React-applikationer. Du vil lære, hvordan man anvender styles på individuelle komponenter, bruger dynamiske styles og opretholder en skalerbar og vedligeholdelsesvenlig stylingtilgang i projekter.

Introduktion til Styling i React

Brug af Inline-Stilarter i React

Anvendelse af Inline-Stilarter i Praksis

Udfordring: Brug Inline-Stilarter i en React-Komponent

Styling Af React-Komponenter Med Ekstern CSS

Anvendelse af Ekstern CSS i Praksis

Udfordring: Anvend Ekstern CSS på en React-app

Brug af CSS-moduler til afgrænset styling i React

Organisering af Fil- og Mappestrukturer til Styles

Udfordring: Brug CSS-moduler i React

Afslutning på Stylingteknikker i React

Kraftfulde funktioner i moderne React-udvikling. Hooks revolutionerer måden, vi skriver funktionelle komponenter på, ved at tilbyde en kortfattet og intuitiv metode til at håndtere tilstand og udføre sideeffekter. Omvendt gør Context det muligt at dele data gennem komponenttræet uden prop drilling. Kombinationen af hooks og Context muliggør effektiv tilstandshåndtering og forenklet datadeling i React-applikationer.

Introduktion til React Hooks og Context

Håndtering af Tilstand med useState-Hooket

Udfordring: Skift Synlighed med useState

Arbejde med Referencer ved Hjælp af useRef-Hooket

Udfordring: Opbyg en Kontrolleret Formular-Komponent

Håndtering af Sideeffekter med useEffect-Hooket

Udfordring: Hent og Vis Data med useEffect

Optimering af Ydeevne med useMemo-Hooket

Udfordring: Implementer Et Bilfilter Med useMemo

Deling af Tilstand på Tværs af Komponenter med Context

Brug af Context i et Virkeligt Scenarie

Udfordring: Opbyg En Astronomiapplikation Med Context

Opsummering af React Hooks og Context

Trinvis vejledning i, hvordan man starter et virkeligt React-projekt. Fra opsætning af udviklingsmiljø til forståelse af projektorganisering og vigtige værktøjer opnås viden og selvtillid til at påbegynde arbejdet med React.

Opsætning af Dit React-Udviklingsmiljø

Valg af Kodeeditor til React-Udvikling

Organisering af Projektmappe-Strukturen

Arbejde med Terminalen i React-Udvikling

Starte og Køre et React-Projekt med Vite

Opsummering af Opsætning af React-Projekt

Lær de teoretiske grundprincipper for begreber som URL, domæne, protokol, forespørgselsparametre og mere. Forstå betydningen af routing i webapplikationer, og hvorfor vi har brug for React Router-biblioteket.

Introduktion til Routing i Webapplikationer

Hvad Er React Router?

Forståelse af URL-Struktur

Undersøgelse af URL'er i Praksis

Quiz: Kernekoncepter i React Router og URL'er

Lær at oprette en komplet React-applikation fra bunden med mulighed for at vise indhold, der tilpasses baseret på URL'en ved hjælp af React Router-funktionalitet.

Oversigt Over Multi-Side Hjemmesiden

Installation af React Router

Aktivering af Routing i en React-app

Definering Af Ruter Til Navigation

Opsummering: Første Trin i React Router

Optimering af Importer med Lazy Loading

Implementering af en Fallback-Komponent

Opsummering: Næste Trin i React Router

Oprettelse og Håndtering af Navigation

Undersøgelse af React Routers Fuldstændige Logik

Opsummering af React Router-Grundlæggende

Undersøg brugen af forespørgselsstrenge til deling og håndtering af applikationstilstand via URL'er, arbejd med forskellige datatyper i forespørgselsparametre, og udnyt React Router til navigation og effekter baseret på URL-ændringer.

Oversigt

Forståelse af Forespørgselsstrenge i URL'er

Opsætning af en React-Komponent

Inspektion af Nylige Ændringer

Arbejde med Forespørgselsparametre

Integration af UseSearchParams-Hooken

Endelig App

Opsummering af React Router-kursus

Udforsk de grundlæggende koncepter inden for state management og lær, hvordan du udnytter Redux Toolkit. Vi guider dig gennem installationsprocessen og hjælper dig med at oprette dit første React Redux Toolkit-projekt. Derudover møder du en udfordring, der tester din forståelse og dine færdigheder.

Hvad Du Vil Lære I Dette Kursus

Introduktion til Tilstandshåndtering

Forståelse af Redux Toolkit

Installation af Redux Toolkit

Oprettelse af Dit Første React Redux Toolkit-Projekt

Udfordring: Installer Redux Toolkit

Yderligere Software

Undersøgelse af Redux-integration med React-applikationer, med fokus på kernekoncepter: actions, reducers og Redux store. Indeholder praktiske eksempler og kodeforklaringer til konfiguration af en store, oprettelse af reducers og tilkobling af React-komponenter via hooks som useSelector og useDispatch.

Hvad Venter

Forståelse af Projektets Kode og Filstruktur

Oprettelse af Redux Store

Integration af Redux Store i React-Appen

Inspektion af Store i React-applikationen

Forståelse af Actions og Action Creators

Forståelse af Reduceres Rolle

Inspektion af Actions og Reducers i Redux

Forbinder Redux med React-Komponenter

Færdiggørelse af Appen

Styrk dine færdigheder inden for state management. I denne praktiske workshop arbejder du med virkelighedsnære udfordringer og opnår praktisk erfaring med Redux Toolkit til effektiv applikationsudvikling.

Oversigt Over Udfordringen

Retningslinjer og Regler for Udfordringen

Udfordring: Opsætning af Redux Store

Udfordring: Opret Redux-handlinger

Udfordring: Implementer Reduceren

Udfordring: Forbind Redux med React

Redux Toolkit Sammenfatning

Vi gennemgår, hvad du bør have kendskab til, før du går i gang med Next.js-rammeværket, hvad du kan forvente af dette kursus, og hvilke projekter du kommer til at bygge.

Velkommen til Kurset

Projektoversigt

Kursusforudsætninger

Hvordan Dette Kursus Er Struktureret

Vi opsætter projektet, undersøger metoder til at tilføje styling til vores app og dækker visuelle aspekter såsom billeder, skrifttyper, sider og layouts.

Opsætning af Next.js-Projektet

Forståelse af Projektets Fil- og Mappestruktur

Stylingmetoder i Next.js

Tilføjelse af den Globale CSS-fil

Brug af Tailwind CSS til Styling

Arbejde med CSS-moduler

Anvendelse af Betingede Stilarter

Tilføjelse af Brugerdefinerede Google Fonts

Udfordring: Implementering af en Brugerdefineret Google-Font

Håndtering af Billeder i Next.js

Lær, hvordan du nemt opretter og administrerer et nyt view til din app og navigerer problemfrit gennem alle sider med et integreret routing-system.

Sådan Fungerer Next.js-Routing

Udfordring: Opret en Ny Side

Opbygning af en Fælles Layoutkomponent

Optimering af Navigation i Next.js

Oprettelse og Håndtering af Aktive Links

Udrul Next.js-appen ved hjælp af GitHub- og Vercel-konti. Etabler desuden en database for at forsyne appen med de nødvendige data.

Opsætning af GitHub- og Vercel-konti

Udrulning af Next.js-appen til Vercel

Opsætning af et Projekt-Database

Udfyldning af Databasen med Initiale Data

Overvej, hvordan data kan indhentes og vises for brugeren på en klar og effektiv måde.

Sådan Hentes Data i Next.js

Arbejde med Dashboard-siden

Udfordring: Hent og Vis Data

Dynamisk vs. Statisk Rendering i Next.js

Forståelse af Loaders

Implementering af Specifikke Delindlæsere

Udfordring: Opret en Skeletindlæser

Optimering af Indlæsere med Komponentgruppering

Opdag, hvordan moderne webfunktioner som paginering, CRUD-operationer, global søgning, formularvalidering og mere implementeres.

Opbygning af Fakturasiden

Udvikling af Søgefunktionalitet

Tilføjelse af Paginering til en Next.js-App

Brug af Serverhandlinger i Next.js

Oprettelse af Et Nyt Element i Databasen

Opdatering af et Element i Databasen

Sletning af et Element i Databasen

Udfordring: Implementering af Formularvalidering

Implementering af autentificering i Next.js.

Forståelse af Godkendelse

Opsætning af Login-Ruten

Brug af NextAuth.js til Godkendelse

Konfiguration af Godkendelse og Beskyttelse af Ruter

Hashing af Adgangskoder og Håndtering af Legitimationsoplysninger

Implementering af Sign-In Funktionalitet

Forbinder Brugergrænsefladen med Autentificeringslogik

Implementering af Logout-Funktionalitet

Afsluttende Bemærkninger og Næste Skridt

Boost dine Tech Færdigheder!

med op til 55% rabat

Features:

*Tracks not included in Pro plan

500+ Topbedømte kurserBanebrydende AI Copilot

Personlige studieveje40+ praktiske virkelige projekter

Uden afbestilling, før den valgte rabatplan udløber, accepterer jeg, at Codefinity automatisk opkræver $104 hver 3. måned indtil jeg annullerer. Læs mere om afbestillings- og refunderingspolitikken på Abonnementsvilkår.

Recommended Courses and Projects

TanStack Query Server State Management in React

Manage server state in React applications using TanStack Query. Fetch, cache, and synchronize remote data, handle mutations and optimistic updates, and implement advanced query patterns for dynamic data flows. Optimize queries for performance, scalability, and maintainability in production React applications.

MUI Essentials for React Applications

Build modern, responsive, and visually polished React applications using Material UI. Learn to structure interfaces with core components, design flexible layouts, manage forms, and apply responsive behavior. Customize themes, refine visual styles, and develop practical features through focused, real-world mini projects. Gain the confidence to create clean, accessible, production-ready UIs with MUI.

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.

State Management in React with Zustand

Manage application state in React using Zustand. Create and update stores, derive and organize state, handle asynchronous logic, and apply middleware for extended behavior. Structure Zustand stores effectively and evaluate when Zustand is an appropriate state management solution.

Testing React Apps with Jest and React Testing Library

Test React applications using Jest and React Testing Library. Write unit and integration tests, validate component behavior through user interactions, and debug test failures effectively.

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.

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.

End to End Testing React Apps with Playwright

Test React applications end to end using Playwright. Write reliable browser tests, interact with UI elements, handle asynchronous behavior, and validate navigation and network behavior. Apply advanced testing strategies to build scalable, maintainable test suites for production React applications.

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.

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.

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.

Interactive Mapping in React with Leaflet

Build interactive maps in React using Leaflet. Render maps, customize layers and markers, handle user interactions, and visualize dynamic geospatial data. Optimize map performance and ensure accessibility across responsive, map-driven interfaces.

Discover more Learning Tracks

spor

Webudvikling Med C#

Begynder

SQL fra Begynder til Ekspert

Begynder

C++ Grundlæggende

Begynder

Spiludvikling med Unity

Begynder

Java Essentials

Begynder

Full Stack Webudvikling

Begynder

Frontend Udviklingsgrundlag

Begynder

Mestring af Datavisualisering

Mellemniveau

Maskinlæring Mestring

Mellemniveau

C++ Mastery

Avanceret

Java Web

Avanceret

Hvorfor Folk Vælger 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

Interaktivt kodningsmiljø

Dyk ned i vores interaktive miljø: skriv og kør din kode med feedback i realtid og succesmålinger—lær ved at gøre på hvert trin.

AI-drevet support

Udnyt den indbyggede AI-assistent til at forklare fejl, foreslå rettelser eller besvare spørgsmål om din kode—så du forbliver produktiv og aldrig går i stå.

Check your progress

Afslut hvert modul med en hurtig quiz, der giver øjeblikkelig feedback, sporer din fremgang og sikrer, at du har mestret nøglekoncepter.

Promote your expertise

Tjen dit brancheanerkendte certifikat ved afslutning og del det på LinkedIn med ét klik—lad dit netværk se, hvad du kan.

Betroet af Medarbejdere fra Ledende Virksomheder
og Studerende fra Topuniversiteter

Fuld adgang til kataloget

Et abonnement åbner dette kursus og hele vores katalog af projekter og færdigheder.

Features:

500+ Topbedømte kurserBanebrydende AI Copilot

Personlige studieveje40+ praktiske virkelige projekter

Prøv Codefinity med tillid – 30-dages pengene-tilbage-garanti inkluderet

For at byde dig velkommen til Codefinity, tilbyder vi op til 64% rabat på vores kurser. Plus, vi har en 30-dages pengene-tilbage-garanti, så du kan prøve os uden risiko.Vi ser virkelig frem til at byde dig velkommen til vores platform og er engagerede i at gøre din læringsoplevelse nem, interaktiv og sjov.

Ready to get started?

Pro

Best intro offer

Ultimate

A complete experience
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å øjeblikkelig adgang til 500+ kurser

Ubegrænset Læring, Øjeblikkelig AdgangFå fuld adgang til alle kurser og spor, inklusive videoindhold, quizzer og dybdegående materialer—start læring når som helst.

Brancheanerkendte CertifikaterTjen certifikater, der validerer din ekspertise og styrker din karriere inden for tech, AI, data, marketing og mere.

KI-assisteret læringFå personlige hints, feedback i realtid og AI-drevne forklaringer for at fremskynde din fremgang.

Konstant Udvidelse: Nye Kurser & KarriereforløbHold dig foran med konstant opdaterede kurser, karriereplaner, udfordringer og praktiske prøver.

Opbyg Færdigheder Der TællerMestre efterspurgte færdigheder med kurser i AI, datavidenskab, programmering, marketing, automatisering, webudvikling og mere.

Interaktiv & Problemfri LæringEngager dig med praktiske projekter, virkelige øvelser og en intuitiv læringsoplevelse — ingen ekstra værktøjer nødvendige.

Hvad du vil lære

Webudvikling Med C#

SQL fra Begynder til Ekspert

C++ Grundlæggende

Spiludvikling med Unity

Java Essentials

Full Stack Webudvikling

Frontend Udviklingsgrundlag

Mestring af Datavisualisering

Maskinlæring Mestring

C++ Mastery

Java Web

Hvorfor Folk Vælger Codefinity

Betroet af Medarbejdere fra Ledende Virksomheder og Studerende fra Topuniversiteter

Fuld adgang til kataloget

Prøv Codefinity med tillid – 30-dages pengene-tilbage-garanti inkluderet

Få øjeblikkelig adgang til 500+ kurser

Betroet af Medarbejdere fra Ledende Virksomheder
og Studerende fra Topuniversiteter