Bli en React-Utvikler
Intermediate
4.8
8 reviews
39 Learners
Updated 11/2025
Bli en mester i å bygge dynamiske og interaktive brukergrensesnitt for webapplikasjoner som en dyktig React-utvikler. Hvis du har god forståelse for J…
142
Chapters
22
Learning hours
98
Assignments
AI Assistant
Shareable Certificate
Resultater
Resultater
Track content
Related courses and projects
Attester
Funksjoner
Priser
Resultater
Resultater
Track content
Related courses and projects
Attester
Funksjoner
Priser
Hva 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
Få en forståelse av de grunnleggende prinsippene i React. Du vil lære om JSX (JavaScript XML), bygging av gjenbrukbare UI-komponenter og rendering av elementer. I tillegg vil du utforske viktigheten av datainnsamling og betinget rendering i React-applikasjoner. Etter denne delen vil du ha et solid grunnlag i Reacts essensielle konsepter, noe som forbereder deg på mer avanserte emner i de følgende delene.
Hva er React og hvorfor bruke det?
Sammenligning av SPA og MPA i Webutvikling
Hvordan React Fungerer med Det Virtuelle DOM-et
Introduksjon til JSX for å skrive HTML i JavaScript
Bygge Komplekse Brukergrensesnitt Med JSX
Gjengivelse av Elementer i React
Utfordring: Gjengi Et Element I React
Forståelse av React-komponenter
Overføring av Data med Props i React
Utfordring: Lage Funksjonelle Komponenter
Betinget Rendering i React
Utfordring: Implementer Betinget Rendering – Chatvarsling
Utfordring: Implementer Betinget Rendering – Bankvarsel
Gjengivelse av Datasamlinger i React
Utfordring: Vise Datasamlinger i React
Oppsummering av React-Grunnleggende
Utforsk ulike metoder for å legge til stil i React-applikasjoner. Du vil lære hvordan du anvender stil på individuelle komponenter, bruker dynamiske stiler og opprettholder en skalerbar og vedlikeholdbar tilnærming til styling i prosjektene dine.
Introduksjon til Styling i React
Bruk av Inline-Stiler i React
Praktisk Bruk av Inline-Stiler
Utfordring: Bruk Inline-Stiler i en React-Komponent
Stiler React-Komponenter med Ekstern CSS
Praktisk Bruk av Ekstern CSS
Utfordring: Bruk Ekstern CSS i en React-App
Bruk av CSS-moduler for Avgrenset Styling i React
Organisering av Fil- og Mappestrukturer for Stiler
Utfordring: Bruk CSS-moduler i React
Oppsummering av Stylingteknikker i React
Kraftige funksjoner i moderne React-utvikling. Hooks revolusjonerer måten vi skriver funksjonelle komponenter på, og gir en konsis og intuitiv måte å håndtere tilstand og utføre sideeffekter. Context gjør det mulig å dele data gjennom komponenttreet uten prop drilling. Ved å kombinere hooks og Context oppnås effektiv tilstandshåndtering og forenklet datadeling i React-applikasjoner.
Introduksjon til React Hooks og Context
Håndtering av Tilstand med useState-Hooken
Utfordring: Veksle Synlighet med useState
Arbeide med Referanser ved Bruk av useRef-Hooken
Utfordring: Bygg en Kontrollert Skjemakomponent
Håndtering av Sideeffekter med useEffect-Hooken
Utfordring: Hent og Vis Data med useEffect
Optimalisering av Ytelse med useMemo-Hooken
Utfordring: Implementer Et Bilfilter Med useMemo
Dele Tilstand Mellom Komponenter Med Context
Bruk av Context i et Reelt Scenario
Utfordring: Bygg en Astronomiapp med Context
Oppsummering av React Hooks og Context
Trinnvis veiledning for hvordan man starter et reelt React-prosjekt. Fra oppsett av utviklingsmiljø til forståelse av prosjektorganisering og sentrale verktøy, gir dette deg kunnskapen og selvtilliten til å starte din React-reise.
Lær de teoretiske grunnprinsippene for konsepter som URL, domene, protokoll, spørringsparametere og mer. Forstå betydningen av ruting i webapplikasjoner og hvorfor vi trenger React Router-biblioteket.
Lær hvordan du kan lage en komplett React-applikasjon fra bunnen av, med mulighet til å vise innhold som tilpasses basert på URL ved hjelp av React Router-funksjonalitet.
Oversikt over Flerside-nettstedet
Installasjon av React Router
Aktivere Routing i en React-app
Definere Ruter for Navigasjon
Oppsummering: Første Steg i React Router
Optimalisering av Importer med Lazy Loading
Implementering av en Reservekomponent
Oppsummering: Andre Steg i React Router
Oppretting og Håndtering av Navigasjon
Utforskning av React Routers Fullstendige Logikk
Oppsummering av Grunnleggende React Router
Utforsk bruk av spørringsstrenger for deling og håndtering av applikasjonstilstand via URL-er, arbeid med ulike datatyper i spørringsparametere, og utnytt React Router for navigasjon og effekter basert på endringer i URL.
Utforsk de grunnleggende konseptene innen tilstandshåndtering og lær hvordan du kan utnytte kraften i Redux Toolkit. Vi veileder deg gjennom installasjonsprosessen og hjelper deg med å opprette ditt første React Redux Toolkit-prosjekt. I tillegg får du en utfordring for å teste din forståelse og ferdigheter.
Undersøk integrasjon av Redux med React-applikasjoner, med fokus på kjernebegreper: actions, reducers og Redux store. Inkluderer praktiske eksempler og kodeforklaringer for konfigurasjon av store, opprettelse av reducers og tilkobling av React-komponenter via hooks som useSelector og useDispatch.
Hva Venter
Forståelse av Prosjektkoden og Filstrukturen
Oppretting av Redux-butikken
Integrering av Redux Store i React-appen
Inspisere Store i React-appen
Forståelse av Actions og Action Creators
Forstå Rollen til Reducers
Inspeksjon av Actions og Reducers i Redux
Koble Redux til React-Komponenter
Fullføre Appen
Styrk ferdighetene dine innen tilstandshåndtering. I dette praktiske verkstedet løser du reelle utfordringer og får praktisk erfaring med å bruke Redux Toolkit for smidig applikasjonsutvikling.
Vi skal diskutere hva du bør kunne før du begynner med Next.js-rammeverket, hva du kan forvente av dette kurset, og hva du kommer til å bygge.
Vi setter opp prosjektet, undersøker måter å legge til styling i appen vår på, og dekker visuelle aspekter som bilder, fonter, sider og oppsett.
Oppsett Av Next.Js-Prosjektet
Forståelse av Prosjektets Fil- og Mappestruktur
Stiltilnærminger i Next.js
Legge Til Den Globale CSS-Filen
Bruk av Tailwind CSS for Styling
Arbeide med CSS-moduler
Betinget Bruk av Stiler
Legge til Egendefinerte Google Fonts
Utfordring: Implementere en Tilpasset Google-font
Håndtering av Bilder i Next.js
Lær hvordan du enkelt kan opprette og administrere et nytt visningsbilde for applikasjonen din, samt navigere sømløst mellom alle sider med et integrert rutingsystem.
Distribuer Next.js-appen ved hjelp av GitHub- og Vercel-kontoer. Etabler i tillegg en database for å levere nødvendig data til appen.
Vurder hvordan data kan hentes og vises for brukeren på en tydelig og effektiv måte.
Lær hvordan du implementerer moderne nettfunksjoner som paginering, CRUD-operasjoner, globalt søk, skjemavalidering og mer.
Implementering av autentisering i Next.js.
Forståelse av Autentisering
Oppsett av Innloggingsrute
Bruk av Nextauth.js for Autentisering
Konfigurering av Autentisering og Beskyttelse av Ruter
Hashing av passord og håndtering av legitimasjon
Implementering av Innloggingsfunksjonalitet
Koble Brukergrensesnittet til Autentiseringslogikk
Implementering av Utloggingsfunksjonalitet
Avsluttende Tanker og Neste Steg
Forbedre dine tekniske ferdigheter!
med opptil 55% rabatt
Features:
*Tracks not included in Pro plan
500+ topprangerte kursBanebrytende AI Copilot
Personlige studieløp40+ praktiske prosjekter fra virkeligheten
Uten oppsigelse, før den valgte rabatterte planen utløper, godtar jeg at Codefinity automatisk belaster $104 hver 3. måned til jeg kansellerer. Les mer om oppsigelses- og refusjonspolicy på Abonnementsvilkår.
Recommended Courses and Projects
kurs
TEST COURSE WITH QUESTIONSs
-----
1 time
5 kapitlerNybegynner
165 STUDERER NÅ
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 timer 51 kapitlerMiddelsnivå
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 timer 37 kapitlerMiddelsnivå
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 timer 29 kapitlerAvansert
kurs
Introduction to Redux
In this course, the user will learn how to use Redux and React to create powerful applications.
5 timer 29 kapitlerAvansert
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 timer 24 kapitlerNybegynner
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 time 13 kapitlerNybegynner
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 time 11 kapitlerMiddelsnivå
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 time 10 kapitlerMiddelsnivå
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 time 12 kapitlerNybegynner
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 time 10 kapitlerMiddelsnivå
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 timer 14 kapitlerMiddelsnivå
Discover more Learning Tracks
spor
TEST TRACK 12
1 Kurs
1 Prosjekt
0 TaskNybegynner
4.0
(18024)
spor
Full Stack Webutvikling
7 Kurs424 OppgaverNybegynner
4.5
(53)
spor
Mestring av Datavisualisering
5 Kurs146 OppgaverMiddelsnivå
4.4
(9)
spor
SQL fra Nybegynner til Ekspert
7 Kurs249 OppgaverNybegynner
4.6
(113)
spor
C++-Grunnleggende
6 Kurs124 OppgaverNybegynner
3.9
(31)
spor
Python fra Null til Helt
6 Kurs215 OppgaverNybegynner
4.6
(337)
spor
Maskinlæring – Fordypning
7 Kurs182 OppgaverMiddelsnivå
4.5
(6)
spor
Python Utover Mellomnivå
2 Kurs1 Prosjekt62 OppgaverNybegynner
5.0
(2)
spor
Java Essensielt
11 Kurs459 OppgaverNybegynner
4.5
(16)
spor
Spillutvikling med Unity
4 Kurs164 OppgaverNybegynner
4.4
(8)
spor
Become a Django Developer
5 Kurs178 OppgaverAvansert
4.5
(33)
Hvorfor folk velger 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 kodemiljø
Dykk inn i vårt interaktive miljø: skriv og kjør koden din med sanntids tilbakemelding og suksessmålinger—lær ved å gjøre på hvert trinn.
AI-drevet støtte
Bruk den innebygde AI-assistenten til å forklare feil, foreslå løsninger eller svare på spørsmål om koden din—slik at du forblir produktiv og aldri står fast.
Check your progress
Avslutt hver modul med en rask quiz som gir umiddelbar tilbakemelding, sporer fremgangen din og sikrer at du har mestret viktige konsepter.
Promote your expertise
Tjen ditt bransjeanerkjente sertifikat ved fullføring og del det på LinkedIn med ett klikk—la nettverket ditt se hva du kan gjøre.
Stolte på av ansatte i ledende selskaper
og studenter fra toppuniversiteter
Full tilgang til katalogen
Et abonnement gir tilgang til dette kurset og hele katalogen vår av prosjekter og ferdigheter.Features:
500+ topprangerte kursBanebrytende AI Copilot
Personlige studieløp40+ praktiske prosjekter fra virkeligheten
Uten oppsigelse, før den valgte rabatterte planen utløper, godtar jeg at Codefinity automatisk belaster $104 hver 3. måned til jeg kansellerer. Les mer om oppsigelses- og refusjonspolicy på Abonnementsvilkår.
Prøv Codefinity med tillit – 30-dagers pengene-tilbake-garanti inkludert
For å ønske deg velkommen til Codefinity, tilbyr vi opptil 64% rabatt på våre kurs. I tillegg har vi en 30-dagers pengene-tilbake-garanti, slik at du kan prøve oss uten risiko.Vi ser virkelig frem til å ønske deg velkommen til vår plattform og er forpliktet til å gjøre din læringsopplevelse enkel, interaktiv og morsom.
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å umiddelbar tilgang til 500+ kurs
Ubegrenset læring, umiddelbar tilgangFå full tilgang til alle kurs og spor, inkludert videoinnhold, quizer og dyptgående materialer—start læringen når som helst.
Bransjeanerkjente sertifikaterTjen sertifikater som bekrefter din ekspertise og styrker karrieren din innen teknologi, AI, data, markedsføring og mer.
KI-assistert læringFå personlige hint, sanntids tilbakemelding og AI-drevne forklaringer for å akselerere fremgangen din.
Stadig utvidelse: Nye kurs og karrieresporHold deg foran med stadig oppdaterte kurs, karriereveikart, utfordringer og praktiske prøver.
Bygg ferdigheter som betyr noeMestre etterspurte ferdigheter med kurs i AI, datavitenskap, programmering, markedsføring, automatisering, webutvikling og mer.
Interaktiv og sømløs læringEngasjer deg med praktiske prosjekter, virkelige øvelser og en intuitiv læringsopplevelse — ingen ekstra verktøy nødvendig.
