Frontend Academy · Lektion

Branching: branch, checkout, merge

Erstellen Sie Feature-Branches, wechseln Sie zwischen ihnen, führen Sie Branches wieder in main zusammen und lösen Sie einfache Merge-Konflikte.

Branching: branch, checkout, merge ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Warum Branches?

Branches ermöglichen die parallele Entwicklung mehrerer Features und Fehlerbehebungen, ohne dass sie sich gegenseitig beeinflussen. main (oder master) bleibt stabil, während sich laufende Arbeiten in Feature-Branches befinden.

Branches auflisten und erstellen

git branch listet Branches auf. git branch name erstellt einen neuen Branch. Der neue Branch beginnt beim aktuellen Commit.

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

Branches wechseln

git checkout branchname wechselt zu einem vorhandenen Branch. git checkout -b branchname erstellt einen Branch und wechselt in einem Schritt zu ihm. Das moderne Äquivalent ist 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

Typischer Branch-Workflow

1) Zu main wechseln. 2) Neueste Änderungen abrufen. 3) Einen Feature-Branch erstellen. 4) Commits erstellen. 5) Zurück in main mergen. 6) Den Feature-Branch löschen.

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 übernimmt die Änderungen aus dem angegebenen Branch in den aktuellen Branch. Git versucht, den Merge automatisch durchzuführen. Ein Fast-Forward-Merge erfolgt, wenn die Historie ohne Konflikte fortgeführt werden kann.

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

Merge-Commits

Wenn die beiden Branches auseinanderentwickelt sind, erstellt Git einen Merge-Commit mit zwei übergeordneten Commits. Dadurch bleibt die vollständige Historie beider Entwicklungslinien erhalten.

Merge-Konflikte

Wenn dieselbe Datei in beiden Branches geändert wurde, kann Git sie nicht automatisch mergen und markiert den Konflikt. Sie bearbeiten die Datei, um ihn zu lösen, und erstellen anschließend einen 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 — Lineare Historie

git rebase main spielt die Commits Ihres Branches auf dem neuesten Stand von main erneut ab und erstellt dadurch eine lineare Historie ohne Merge-Commits. Verwenden Sie dies für Feature-Branches vor dem Mergen; vermeiden Sie Rebases bei gemeinsam verwendeten Branches.

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

HEAD — Ihre aktuelle Position

HEAD ist ein Zeiger auf die Spitze des aktuellen Branches (oder auf einen bestimmten Commit im Zustand detached HEAD). git log zeigt die Position von HEAD. HEAD~1 ist der vorherige Commit, HEAD~3 liegt drei Commits zurück.

Nicht abgeschlossene Arbeit stashen

git stash speichert nicht committete Änderungen und setzt den Arbeitsbaum auf einen sauberen Zustand zurück. Verwenden Sie den Befehl, wenn Sie den Branch wechseln müssen, ohne unvollständige Arbeit zu committen. git stash pop stellt die Änderungen wieder her.

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

Konventionen für Branch-Namen

Häufige Muster sind: feature/feature-name, fix/bug-description, hotfix/critical-fix, chore/dependency-update. Eine einheitliche Benennung macht die Branch-Liste übersichtlich.

Schnelltest

Welcher Befehl erstellt einen neuen Branch und wechselt in einem Schritt zu ihm?

Zusammenfassung: Git-Branching

git branch erstellt Branches. git checkout/switch dient zum Wechseln zwischen ihnen. git merge integriert Änderungen. Lösen Sie Konflikte, indem Sie die Marker-Blöcke bearbeiten. git stash speichert nicht abgeschlossene Arbeit. git rebase erstellt eine lineare Historie. Verwenden Sie für jede neue Arbeit Feature-Branches und halten Sie main stabil. Löschen Sie gemergte Branches, damit die Liste übersichtlich bleibt.

Häufig gestellte Fragen

Ist die Lektion „Branching: branch, checkout, merge“ kostenlos?

Ja — der vollständige Text von „Branching: branch, checkout, merge“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Branching: branch, checkout, merge“?

Erstellen Sie Feature-Branches, wechseln Sie zwischen ihnen, führen Sie Branches wieder in main zusammen und lösen Sie einfache Merge-Konflikte. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Branching: branch, checkout, merge“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Frontend Academy