Frontend Academy · Les

Branches: branch checkout merge

Maak featurebranches aan, wissel ertussen, voeg branches weer samen met main en los eenvoudige mergeconflicten op.

Les 2 van 413 stappen

Branches: branch checkout merge is een gratis Frontend Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.

Waarom branches?

Met branches kunnen meerdere functies en bugfixes parallel worden ontwikkeld zonder elkaar in de weg te zitten. Main (of master) blijft stabiel, terwijl werk in uitvoering in featurebranches staat.

Branches weergeven en maken

git branch geeft branches weer. git branch name maakt een nieuwe branch. De nieuwe branch begint bij de huidige commit.

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

Van branch wisselen

git checkout branchname schakelt over naar een bestaande branch. git checkout -b branchname maakt een branch en schakelt er in één stap naartoe. Het moderne equivalent is 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

Typische branchworkflow

1) Schakel over naar main. 2) Haal de nieuwste wijzigingen op. 3) Maak een featurebranch. 4) Maak commits. 5) Merge terug naar main. 6) Verwijder de featurebranch.

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

Branches mergen

git merge branchname voegt wijzigingen uit de genoemde branch toe aan de huidige branch. Git probeert automatisch te mergen. Een fast-forward-merge vindt plaats wanneer de geschiedenis geen vertakkingen bevat.

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

Mergecommits

Wanneer beide branches uiteen zijn gegaan, maakt Git een mergecommit met twee oudercommits. Zo blijft de volledige geschiedenis van beide ontwikkellijnen behouden.

Mergeconflicten

Wanneer hetzelfde bestand in beide branches is gewijzigd, kan Git niet automatisch mergen en markeert het conflict. Bewerk het bestand om het op te lossen en maak daarna een 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 — Lineaire geschiedenis

git rebase main speelt de commits van je branch opnieuw af boven op de nieuwste main. Zo ontstaat een lineaire geschiedenis zonder mergecommits. Gebruik dit voor featurebranches voordat je ze mergen; rebase gedeelde branches niet.

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

HEAD — Waar je bent

HEAD is een verwijzing naar het uiteinde van de huidige branch (of naar een specifieke commit in een losgekoppelde HEAD-status). git log toont de positie van HEAD. HEAD~1 is de vorige commit en HEAD~3 staat drie commits terug.

Werk in uitvoering tijdelijk opslaan

git stash slaat niet-vastgelegde wijzigingen op en zet je terug naar een schone werkmap. Gebruik dit wanneer je van branch moet wisselen zonder onaf werk te committen. git stash pop zet de wijzigingen terug.

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

Naamgevingsconventies voor branches

Veelgebruikte patronen zijn: feature/feature-name, fix/bug-description, hotfix/critical-fix, chore/dependency-update. Consistente naamgeving maakt de branchlijst overzichtelijk.

Korte controle

Met welk commando maak je een nieuwe branch en schakel je er in één stap naartoe?

Beantwoord dit in de interactieve les

Samenvatting: Git-branches

git branch maakt branches. git checkout/switch navigeert. git merge integreert. Los conflicten op door markerblokken te bewerken. git stash slaat werk in uitvoering op. Gebruik git rebase voor een lineaire geschiedenis. Gebruik featurebranches voor al het nieuwe werk en houd main stabiel. Verwijder gemergede branches om de lijst overzichtelijk te houden.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 41
Lessen: 163

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Branches: branch checkout merge” gratis?

Ja — de volledige tekst van “Branches: branch checkout merge” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.

Wat leer ik in “Branches: branch checkout merge”?

Maak featurebranches aan, wissel ertussen, voeg branches weer samen met main en los eenvoudige mergeconflicten op. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Frontend Academy te beginnen?

Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Branches: branch checkout merge”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?

Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Frontend Academy