React SME Cookbook
All FAQs

Search Documentation

Search across all documentation pages

gitversion-controlfundamentals

Essential Git Commands

The daily-driver commands every developer uses — staging, committing, branching, and inspecting history.

Recipe

Quick-reference recipe card — copy-paste ready.

# Initialize a new repo
git init
 
# Check current status
git status
 
# Stage specific files
git add file1.tsx file2.tsx
 
# Stage all changes
git add .
 
# Commit with message
git commit -m "feat: add user profile component"
 
# View commit history
git log --oneline --graph
 
# Create and switch to a new branch
git checkout -b feature/new-component
 
# Switch to existing branch
git checkout main
# or (modern)
git switch main

When to reach for this: Every time you write code. These commands are the foundation of all Git workflows.

Working Example

# Typical feature development workflow
git checkout -b feature/auth-page
# ... write code ...
git status
git add src/app/auth/page.tsx src/app/auth/layout.tsx
git commit -m "feat: add authentication page with login form"
git push -u origin feature/auth-page

What this demonstrates:

  • Create a feature branch from your current branch
  • Stage only the files you intend to commit (avoid git add . when possible)
  • Write a descriptive commit message with a conventional prefix
  • Push and set the upstream tracking branch in one command

Deep Dive

Staging Area (Index)

The staging area is Git's unique intermediate step between your working directory and the repository.

# Stage specific files
git add src/components/Button.tsx
 
# Stage parts of a file (interactive hunk selection)
git add -p src/components/Button.tsx
 
# Unstage a file (keep changes in working directory)
git restore --staged src/components/Button.tsx
 
# Discard changes in working directory
git restore src/components/Button.tsx

Commit Best Practices

# Conventional commit prefixes
git commit -m "feat: add dark mode toggle"
git commit -m "fix: resolve hydration mismatch in sidebar"
git commit -m "refactor: extract shared form validation logic"
git commit -m "docs: update API route documentation"
git commit -m "chore: upgrade next to 15.1.0"
git commit -m "test: add integration tests for checkout flow"
 
# Multi-line commit message
git commit -m "feat: add user dashboard
 
- Add profile summary card
- Add recent activity feed
- Add quick action buttons"

Inspecting History

# Compact log with graph
git log --oneline --graph --all
 
# Show changes in a specific commit
git show abc1234
 
# Show who last modified each line
git blame src/app/layout.tsx
 
# Search commit messages
git log --grep="auth" --oneline
 
# Show commits that changed a specific file
git log --oneline -- src/app/auth/page.tsx
 
# Show diff between branches
git diff main..feature/auth-page

Branching

# List all branches (local)
git branch
 
# List all branches (including remote)
git branch -a
 
# Create a branch without switching
git branch feature/sidebar
 
# Delete a merged branch
git branch -d feature/sidebar
 
# Delete an unmerged branch (force)
git branch -D feature/abandoned
 
# Rename current branch
git branch -m new-name

Gotchas

Things that will bite you. Each gotcha includes what goes wrong, why it happens, and the fix.

  • Committing to the wrong branch — You write code on main instead of a feature branch. Fix: git stash, then git checkout -b feature/correct-branch, then git stash pop.

  • Forgetting to pull before pushing — Push is rejected because remote has new commits. Fix: git pull --rebase to replay your commits on top of the latest remote changes.

  • Accidentally staging secrets.env or credentials get added to staging. Fix: git restore --staged .env before committing. Add .env to .gitignore immediately.

  • Detached HEAD state — You checked out a commit hash instead of a branch name. Fix: git checkout -b my-branch to create a branch at that commit, or git checkout main to go back.

  • Large files bloating the repo — Committing node_modules or build artifacts. Fix: Add them to .gitignore before the first commit. If already committed, use git rm -r --cached node_modules.

Alternatives

Other ways to solve the same problem — and when each is the better choice.

AlternativeUse WhenDon't Use When
git switch / git restoreModern Git (2.23+) — clearer intent than checkoutOlder Git versions or muscle memory
git stashQuick context switch without committing WIPYou want a permanent record of the WIP state
git worktreeWorking on two branches simultaneouslySimple single-branch workflows

FAQs

What is the difference between git add . and git add file.tsx?
  • git add . stages all changes in the current directory and subdirectories
  • git add file.tsx stages only that specific file
  • Prefer staging specific files to avoid accidentally committing unwanted changes (e.g., .env files)
When should I use git switch instead of git checkout?
  • git switch was introduced in Git 2.23+ to clarify branch-switching intent
  • git checkout is overloaded: it switches branches AND restores files
  • Use git switch for branches, git restore for files, if your Git version supports them
How do I undo the last commit but keep my changes?
git reset --soft HEAD~1
  • --soft keeps changes staged
  • --mixed (default) keeps changes but unstages them
  • --hard discards changes entirely (dangerous)
What are conventional commit prefixes, and why use them?
  • Prefixes like feat:, fix:, refactor:, docs:, chore:, test: categorize changes
  • They enable automated changelog generation and semantic versioning
  • Teams can quickly scan history to understand what each commit does
How do I see what changed in a specific commit?
git show abc1234
  • Shows the commit message, author, date, and the full diff
  • Add --stat for a summary of changed files instead of the full diff
What happens if I accidentally commit secrets like .env?
  • The secret is now in Git history even if you delete the file in a new commit
  • Immediately rotate the exposed credentials
  • Use git filter-branch or git filter-repo to remove the file from history
  • Add .env to .gitignore to prevent future accidents
Gotcha: Why does git add -p sometimes skip new files entirely?
  • git add -p only works on tracked files (files already known to Git)
  • New untracked files must first be staged with git add file.tsx, then you can use -p on subsequent changes
How do I delete a local branch that has been merged?
git branch -d feature/my-branch
  • -d only deletes if the branch has been merged
  • -D force-deletes even unmerged branches (use with caution)
What does detached HEAD mean, and how do I fix it?
  • Detached HEAD means you checked out a commit hash instead of a branch name
  • Any new commits you make are not on any branch and can be lost
  • Fix: git checkout -b my-new-branch to create a branch at the current commit
How do I search commit messages for a keyword?
git log --grep="auth" --oneline
  • --grep filters by commit message content
  • Add --all to search across all branches
In a TypeScript project, should I commit tsconfig.tsbuildinfo?
  • No. It is a build cache file generated by TypeScript's incremental compilation
  • Add *.tsbuildinfo to your .gitignore
How can I type-check staged TypeScript files before committing?
npx tsc --noEmit
  • Combine this with a pre-commit hook (e.g., Husky + lint-staged) to automate it
  • --noEmit checks types without producing output files