Frontend Academy · Lekcja

git init, add, commit i status

Proszę inicjalizować repozytorium, umieszczać zmiany w przechowalni za pomocą git add, tworzyć commity oraz korzystać z git status i git log, aby zrozumieć historię.

git init, add, commit i status to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego kontrola wersji?

Git śledzi każdą zmianę w kodzie na przestrzeni czasu. Można sprawdzić, co, kiedy i dlaczego się zmieniło. Błędy można naprawić. Wiele osób może pracować nad tą samą bazą kodu. Każdy profesjonalny zespół używa Git.

git init — rozpoczęcie pracy z repozytorium

Uruchomienie git init w dowolnym folderze inicjalizuje repozytorium Git. Git tworzy ukryty katalog .git, w którym przechowywana jest cała historia projektu.

mkdir my-project && cd my-project
git init
# Initialized empty Git repository in ./my-project/.git/

Trzy obszary

Git ma trzy obszary: Katalog roboczy (edytowane pliki), obszar staging (pliki oznaczone do następnego commita) oraz repozytorium (historia commitów). Obszar staging pozwala tworzyć precyzyjne commity.

git status — co się zmieniło?

git status pokazuje, które pliki są nieśledzone, zmodyfikowane lub umieszczone w obszarze staging. Należy często używać tego polecenia podczas pracy, aby rozumieć bieżący stan projektu.

git status
# Output:
# On branch main
# Changes not staged for commit:
#   modified: index.html
# Untracked files:
#   styles.css

git add — przygotowywanie zmian

git add filename dodaje określony plik do obszaru staging. git add . dodaje wszystkie zmiany w bieżącym katalogu. git add -p pozwala interaktywnie dodawać zmiany, fragment po fragmencie.

git add index.html           # stage one file
git add src/                 # stage a directory
git add .                    # stage everything
git add -p                   # interactive staging

git commit — zapisywanie migawki

git commit -m 'message' tworzy trwały zapis zmian znajdujących się w obszarze staging. Komunikat powinien opisywać dlaczego wprowadzono zmianę, a nie co zmieniono. Każdy commit ma unikatowy skrót SHA.

git commit -m 'feat: add user authentication form'
git commit -m 'fix: correct email validation regex'
git commit -m 'refactor: extract validation into helper function'

Konwencjonalne commity

Wiele zespołów używa formatu Conventional Commits: type(scope): description. Typowe rodzaje to: feat, fix, refactor, test, docs, chore, perf. Umożliwia to automatyczne generowanie changeloga i wersjonowanie semantyczne.

feat(auth): add Google OAuth login
fix(cart): prevent duplicate item addition
docs(api): add rate limit documentation
chore(deps): upgrade React to 18.3

git log — wyświetlanie historii

git log pokazuje historię commitów. git log --oneline wyświetla zwięzły widok, po jednym wierszu na commit. git log --graph rysuje strukturę gałęzi.

git log --oneline --graph
# * a1b2c3d feat: add dark mode toggle
# * d4e5f6g fix: resolve mobile nav overflow
# * 7h8i9j0 refactor: extract theme hook

git diff — sprawdzanie zmian

git diff pokazuje zmiany, które nie zostały dodane do obszaru staging. git diff --staged pokazuje zmiany znajdujące się w obszarze staging. git diff HEAD pokazuje wszystkie zmiany od ostatniego commita.

Plik .gitignore

W pliku .gitignore należy umieścić pliki i katalogi wykluczone z kontroli wersji. Zawsze należy ignorować katalogi node_modules, .env, dist i build. GitHub udostępnia szablony gitignore dla każdego języka i frameworka.

# .gitignore
node_modules/
dist/
.env
.env.local
*.log
.DS_Store
coverage/

git restore — cofanie zmian spoza obszaru staging

git restore filename odrzuca zmiany w pliku znajdującym się w katalogu roboczym, przywracając jego ostatnią zatwierdzoną wersję. Jest to operacja destrukcyjna — zmiany zostaną utracone.

git restore index.html        # discard unstaged changes
git restore --staged file.js  # unstage without losing changes

Szybkie sprawdzenie

Co robi polecenie git add .?

Podsumowanie: podstawowe polecenia Git

git init rozpoczyna pracę z repozytorium. git status pokazuje bieżący stan. git add dodaje pliki do obszaru staging. git commit zapisuje migawkę z komunikatem. git log pokazuje historię. git diff pokazuje zmiany. .gitignore wyklucza pliki. Należy zawsze pisać zrozumiałe komunikaty commitów, które wyjaśniają dlaczego, a nie co zmieniono.

Często zadawane pytania

Czy lekcja „git init, add, commit i status” jest bezpłatna?

Tak — pełny tekst „git init, add, commit i status” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „git init, add, commit i status”?

Proszę inicjalizować repozytorium, umieszczać zmiany w przechowalni za pomocą git add, tworzyć commity oraz korzystać z git status i git log, aby zrozumieć historię. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „git init, add, commit i status”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Frontend Academy