Bli en React-Utvikler
Intermediate
4.3
117 reviews
5.7k+ Learners
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
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.
2 timer
14 kapitlerMiddelsnivå
4 STUDERER NÅ
kurs
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.
3 timer 22 kapitlerMiddelsnivå
1 STUDERER NÅ
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
2 STUDERER NÅ
kurs
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.
1 time 11 kapitlerMiddelsnivå
2 STUDERER NÅ
kurs
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.
2 timer 12 kapitlerMiddelsnivå
2 STUDERER NÅ
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
1 STUDERER NÅ
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å
1 STUDERER NÅ
kurs
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.
2 timer 15 kapitlerMiddelsnivå
1 STUDERER NÅ
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å
1 STUDERER NÅ
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å
1 STUDERER NÅ
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å
1 STUDERER NÅ
kurs
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.
2 timer 15 kapitlerMiddelsnivå
1 STUDERER NÅ
Discover more Learning Tracks
spor
Webutvikling med C#
10 Kurs
439 OppgaverNybegynner
4.7
(3555)
spor
SQL fra Nybegynner til Ekspert
7 Kurs249 OppgaverNybegynner
4.7
(3756)
spor
C++-Grunnleggende
6 Kurs124 OppgaverNybegynner
4.3
(1178)
spor
Spillutvikling med Unity
4 Kurs164 OppgaverNybegynner
4.4
(246)
spor
Java Essensielt
11 Kurs459 OppgaverNybegynner
4.5
(521)
spor
Full Stack Webutvikling
7 Kurs424 OppgaverNybegynner
4.6
(1393)
spor
Grunnleggende Innen Frontend-Utvikling
6 Kurs387 OppgaverNybegynner
4.6
(1328)
spor
Mestring av Datavisualisering
5 Kurs146 OppgaverMiddelsnivå
4.6
(1012)
spor
Maskinlæring – Fordypning
7 Kurs182 OppgaverMiddelsnivå
4.5
(252)
spor
C++ Mastery
4 Kurs85 OppgaverAvansert
4.5
(87)
spor
Java Web
7 Kurs279 OppgaverAvansert
4.6
(1791)
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.
