Frontend Academy · leksjon

Branching: branch, checkout og merge

Opprett feature-brancher, bytt mellom dem, slå brancher sammen med main, og løs enkle merge-konflikter.

Leksjon 2 av 413 trinn

Branching: branch, checkout og merge er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hvorfor bruke grener

Grener gjør det mulig å utvikle flere funksjoner og feilrettinger parallelt uten at de påvirker hverandre. Main (eller master) forblir stabil, mens arbeid under utvikling ligger i feature-grener.

Vise og opprette grener

git branch viser grener. git branch name oppretter en ny gren. Den nye grenen tar utgangspunkt i gjeldende commit.

git branch             # list all branches
git branch feature/auth # create a new branch
git branch -d feature/auth # delete merged branch

Bytte grener

git checkout branchname bytter til en eksisterende gren. git checkout -b branchname oppretter en gren og bytter til den i ett trinn. Den moderne tilsvarende kommandoen er git switch.

git checkout main           # switch to main
git checkout feature/auth   # switch to existing branch
git checkout -b hotfix/nav  # create + switch

# Modern (git 2.23+):
git switch main
git switch -c feature/auth

Vanlig arbeidsflyt for grener

1) Bytt til main. 2) Hent de nyeste endringene. 3) Opprett en feature-gren. 4) Gjør commits. 5) Slå sammen tilbake til main. 6) Slett feature-grenen.

git switch main
git pull
git switch -c feature/dark-mode
# ... make commits ...
git switch main
git merge feature/dark-mode
git branch -d feature/dark-mode

Slå sammen grener

git merge branchname integrerer endringer fra den navngitte grenen i gjeldende gren. Git forsøker å slå sammen automatisk. En fast-forward-merge skjer når historikken er uten konflikter.

git switch main
git merge feature/auth
# Fast-forward: no merge commit if history is linear

Merge-commits

Når begge grenene har gått hver sin vei, oppretter Git en merge-commit med to foreldrecommits. Dette bevarer hele historikken til begge utviklingslinjene.

Sammenslåingskonflikter

Når den samme filen er endret i begge grenene, kan ikke Git slå dem sammen automatisk og markerer konflikten. Du redigerer filen for å løse den og gjør deretter en commit.

<<<<<<< HEAD
const COLOR = 'blue';
=======
const COLOR = 'red';
>>>>>>> feature/theming

// After resolving:
const COLOR = 'navy'; // your decision

git add styles.css
git commit

git rebase — Lineær historikk

git rebase main spiller commitene fra grenen din på toppen av den nyeste main og oppretter en lineær historikk uten merge-commits. Bruk dette for feature-grener før sammenslåing, og unngå å rebase delte grener.

git switch feature/auth
git rebase main  # replay commits on top of current main

HEAD — Hvor du er

HEAD er en peker til toppen av gjeldende gren (eller til en bestemt commit i detached HEAD-tilstand). git log viser hvor HEAD befinner seg. HEAD~1 er den forrige commiten, og HEAD~3 er tre commits tilbake.

Lagre arbeid under utvikling

git stash lagrer endringer som ikke er committet og tilbakestiller til et rent arbeidsområde. Bruk den når du må bytte gren uten å commite uferdig arbeid. git stash pop gjenoppretter endringene.

git stash           # save WIP
git switch hotfix/urgent
# ... fix and commit ...
git switch feature/auth
git stash pop       # restore WIP

Navnekonvensjoner for grener

Vanlige mønstre: feature/feature-name, fix/bug-description, hotfix/critical-fix, chore/dependency-update. Konsekvent navngivning gjør grenlisten oversiktlig.

Hurtigsjekk

Hvilken kommando oppretter en ny gren og bytter til den i ett trinn?

Besvar den i den interaktive leksjonen

Oppsummering: Git-grener

git branch oppretter. git checkout/switch navigerer. git merge integrerer. Løs konflikter ved å redigere markeringsblokkene. git stash lagrer WIP. Bruk git rebase for lineær historikk. Bruk feature-grener for alt nytt arbeid, og hold main stabil. Slett sammenslåtte grener for å holde listen ryddig.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Branching: branch, checkout og merge» gratis?

Ja – hele teksten i «Branching: branch, checkout og merge» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Branching: branch, checkout og merge»?

Opprett feature-brancher, bytt mellom dem, slå brancher sammen med main, og løs enkle merge-konflikter. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Branching: branch, checkout og merge»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?

Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Frontend Academy