This article explains how git works internally. We will focus on the .git folder, git objects, and how git keep tracks of our changes.

How Git Works Internally (The Big Picture)

At its core, Git is not just a set of commands - it is a database for our project.

Instead of storing “changes between files,” Git stores:

• Snapshots of project state

• Indexed by hashes

• Connected through objects

Every commit, branch, and tag is simply a reference to objects inside the .git directory.

If you understand the .git folder, you understand Git.

Understanding the .git Folder

The .git directory is the entire Git repository. Your working directory is just files. .git is where Git stores everything it knows about the project.

If the .git folder is deleted, the project instantly loses all version control history.

Key Responsibilities of .git

• Store all versions of tracked files

• Maintain commit history

• Track branches and tags

Simplified .git Directory Structure

.git/
├── objects/     # All Git objects (data store)
├── refs/        # Branch and tag pointers
├── HEAD         # Pointer to current branch
├── index        # Staging area
├── config       # Repository configuration

Commit — A Snapshot in Time

A commit ties everything together.

A commit contains:

• A reference to a tree (project snapshot)

• Author and timestamp

• Commit message

• Reference to parent commit(s)

A commit is not a diff.
It is a complete snapshot of the project state.

How Git Tracks Changes

Git does not track changes line-by-line like traditional version control systems.

Instead:

1. Git stores snapshots

2. Unchanged files reuse existing blobs

3. Only new content creates new objects

What Happens Internally During git add

When you run:

git add index.html

Internally:

1. Git reads index.html

2. Creates a file from its content

3. Stores the file in .git/objects

4. Updates the index (staging area):

Key Insight

git add does not create a commit.
It updates the staging snapshot.

What Happens Internally During git commit

When you run:

git commit -m "Initial commit"

Internally:

1. Git reads the index

2. Builds a tree representing the directory structure

3. Creates a commit pointing to that tree

4. Updates the current branch pointer

5. Moves HEAD to the new commit

Why This Understanding Matters

When you understand Git internally:

• Merge conflicts become logical

• Rebasing stops feeling dangerous

• Detached HEAD is no longer confusing

• Git errors become debuggable, not scary

You stop memorizing commands—and start reasoning about state.

Introduction

Git is one of the most essential tools for developers today. Whether you're working alone or with a team, Git helps you track changes, collaborate efficiently, and maintain a clean history of your project.

If you're new to Git, this guide will walk you through the basics and the most important commands you need to get started.

Why Use Git?

Here’s why Git is so powerful:

• Track every change in your code

• Collaborate with multiple developers

• Roll back to previous versions

• Experiment safely using branches

• Backup your work using remote repositories

Installing Git

Windows

Download Git from: https://git-scm.com/download/win

macOS

brew install git

Install Git on Linux

Install Git using apt:

sudo apt install git

Verify Installation

git --version

Basic Git Concepts

Here are a few basic terminologies you will use frequently while working with Git:

• Repository
  A project that Git tracks. It contains all your files, folders, and the complete history of changes.

• Commit
  A snapshot of your project at a specific point in time. Each commit saves the current state of your files, accompanied by a message that describes the change.

• Branch
  A separate line of development. Branches allow you to work on new features or fixes without affecting the main codebase.

• Working Directory
  The current folder on your system where you modify files before tracking them with Git.

• Staging Area
  An intermediate area where files are prepared before creating a commit. Files must be staged using git add before committing.

Essential Git Commands

Initialize a Repository

git init

Check Repository Status

git status

Stage all Changes

git add .

Commit Changes

git commit -m "Initial commit"

View Commit History

git log

Create a Branch

git branch branch-name

Switch Branch

git checkout branch-name

Merge a Branch

git merge branch-name

Pull Latest Changes

git pull origin main

Basic Git Workflow

1. Modify files

2. Stage changes using git add

3. Commit changes using git commit

4. Push to the remote repository using git push

This cycle repeats throughout the development.

Common Beginner Mistakes

• Forgetting to commit changes

• Writing unclear commit messages

• Working directly on the main branch

• Not pulling the latest changes before pushing

Best Practices

• Write meaningful commit messages

• Commit small and very frequently

• Use branches for new features

• Review changes before committing

Conclusion

Git is an essential skill for every developer. While it may feel overwhelming at first, mastering the basics will significantly improve your workflow and confidence.

The best way to learn Git is by using it daily — experiment, make mistakes, and explore!

Happy coding! 🚀

Array Methods

// 'fruits' array created using array literal notation.
const fruits = ["Apple", "Banana"];
console.log(fruits.length);
// 2

• JavaScript provides a variety of powerful array methods such as map, filter, and reduce that are commonly used in React development.

  • The map method allows you to iterate over an array and perform operations on each item, returning a new array.

  • Filtering arrays can be done using the filter method that creates a new array with elements that pass a given condition.

  • The reduce method is used for aggregating array elements into a single value by applying a function to each element.

Normal Functions

• Understanding normal functions in JavaScript is crucial for React development.

  • Normal functions are defined using the function keyword followed by the function name and parameters.

     let square = function(x){
          return (x*x);
        };
        console.log(square(9));

• These functions are executed by calling the function name followed by parentheses.

• They can have return values and can be reused throughout your code.

Spread Operators

• The spread operator in JavaScript is a useful feature for React development.

    // spread operator doing the concat job
    let arr = [1, 2, 3];
    let arr2 = [4, 5];
  
    arr = [...arr, ...arr2];
    console.log(arr); // [ 1, 2, 3, 4, 5 ]
  

  • It allows you to expand an iterable object, like an array or string, into individual elements.

  • The spread operator is denoted by three consecutive dots (...) followed by the object you want to spread.

Function Expressions

let calMul = function Mul(x, y) {
    let z = x * y;
    return z;
}

console.log("Multiplication : " + calMul(7, 4));

• Function expressions are another important concept to grasp when working with React.

  • Function expressions involve assigning a function to a variable.

  • They can be anonymous or named and can be utilized as regular functions.

Default Imports

• Understanding default imports is essential to working with React modules.

  • Default imports refer to the exported items that are set as the default in a module.

  • You can import default exports using the import keyword followed by the module name and assign it to a variable.

Handling Events

• React heavily relies on event handling to create dynamic and interactive user interfaces.

  • You can attach event handlers to different elements in your React components.

  • Event handlers are functions that are executed when a specific event, such as a button click, occurs.

  • These event handlers can be defined within the component and make use of JavaScript's event object.

Lexical Scoping

• Having a grasp of lexical scoping is important for understanding how variables are accessed in React.

  • Lexical scoping refers to the location of where a variable is defined within your code.

  • Variables defined inside a function are scoped to that function and cannot be accessed outside of it.

String Methods

• JavaScript provides various string methods that are beneficial for React development.

  • String methods like split, replace, and substring allow you to manipulate strings easily.

  • The split method splits a string into an array of substrings based on a specified delimiter.

  • By using the replace method, you can replace specified substrings within a string with a new value.

  • Using the substring method, you can extract a portion of a string based on start and end indexes.

Named Imports

• Named imports are an important aspect of utilizing modules in React.

  • When you have multiple exports within a module, you can import specific items by their names.

  • Named imports are denoted by curly braces {} and specified item names within the import statement.

Async Await

• Asynchronous JavaScript is often necessary when dealing with data fetching or API integrations.

    const getData = async () => {
        let y = await "Hello World";
        console.log(y);
    }
    console.log(1);
    getData();
    console.log(2);
  

  • The async and await keywords provide a clean and structured way to deal with asynchronous tasks.

  • The async keyword is used to define a function that returns a promise and allows the usage of await.

  • The await keyword is used within an async function to pause its execution until a promise is resolved.

Destructuring

• Destructuring is a powerful feature that can simplify code and improve readability in React.

    var names = ["alpha", "beta", "gamma", "delta"];
    var [firstName, secondName] = names;
  
    console.log(firstName);//"alpha"
    console.log(secondName);//"beta"
  
    //Both of the procedure are same
    var [firstName, secondName] = ["alpha", "beta", "gamma", "delta"];    
    console.log(firstName);//"alpha"
    console.log(secondName);//"beta
  

  • It allows you to extract specific values from arrays or objects and assign them to variables.

  • Array destructuring enables you to extract values based on their position in the array.

  • Object destructuring allows you to extract values based on their property names.

Loops

• Having a solid understanding of loops in JavaScript is beneficial for working with React.

  • Traditional for loops and newer loop options like forEach, for...of, and for...in are frequently used.

  • for loops provide full control over iterating through arrays or performing repetitive tasks for a set number of times.

  • The forEach method allows you to iterate through each element of an array and perform operations.

Promises

• Promises play a significant role in modern JavaScript and are frequently used with React.

  • Promises are objects that represent the eventual completion or failure of an asynchronous operation.

  • They provide a cleaner alternative to dealing with callback hell and allow better control flow.

  • You can create promises using the Promise constructor and handle resolved or rejected states with .then() and .catch().

Callbacks

• Understanding callbacks is crucial for working with asynchronous operations in React.

  • Callbacks are functions that are passed as arguments to other functions.

  • They are commonly used to handle asynchronous operations, like fetching data from an API.

  • Callback functions are executed once the asynchronous operation is completed.

Variables and Scopes

• Properly understanding variables and scopes is essential when working with React.

  • JavaScript variables are used to store data temporarily for future use.

  • Variables can be declared using var, let, or const, each having specific behaviors and scope.

  • Scopes in JavaScript determine the accessibility and visibility of variables within a specific context.

Working with Objects

• React involves working with objects to represent components, state, and props.

  • JavaScript's object-oriented nature is utilized to create reusable and organized code.

  • Objects in JavaScript allow you to define properties and methods within a single entity.

  • You can access and modify object properties using dot notation or bracket notation.

Asynchronous JavaScript

• Asynchronous JavaScript is a fundamental concept in React development.

  • React often requires asynchronous operations, such as data fetching or API requests.

  • By utilizing techniques like promises, async/await, or callbacks, you can handle asynchronous tasks effectively.

  • Understanding concepts like event loop and how JavaScript handles asynchronous operations is beneficial.

Conclusion

Having a solid grasp of JavaScript fundamentals is crucial to effectively utilize React. This article provided an overview of various JavaScript concepts, such as array methods, normal functions, spread operators, function expressions, default imports, event handling, lexical scoping, string methods, named imports, async/await, destructuring, loops, promises, callbacks, variables, scopes, working with objects, and asynchronous JavaScript. Mastering these concepts will enable you to build powerful and interactive web applications with React.