Everything you need as a full stack developer

Reverting Changes and Undoing Commits

- Posted in Junior Developer by

TL;DR As a fullstack developer, reverting changes and undoing commits is a crucial skill to correct mistakes and maintain a clean Git history. Using git restore and git reset, you can easily revert changes and undo commits. Remember to use git status frequently to track your changes and git log to review your commit history.

Reverting Changes and Undoing Commits: A Guide for Fullstack Developers

As fullstack developers, we've all been there - you make a change to your code, only to realize that it was a mistake. Maybe you accidentally deleted an important file or introduced a bug that breaks the entire application. Whatever the reason, being able to revert changes and undo commits is a crucial skill for any developer.

In this article, we'll explore the basics of reverting changes and undoing commits in Git, using simple examples to illustrate each concept.

Understanding Git Commits

Before we dive into reverting changes and undoing commits, let's quickly review what happens when you make a commit. When you run git commit, Git creates a snapshot of your code at that particular moment in time. This snapshot is stored in the .git directory, along with metadata about the commit, such as the author, date, and commit message.

Each commit is assigned a unique identifier, known as a SHA (Secure Hash Algorithm). The SHA is used to identify each commit and create a history of changes made to your codebase.

Reverting Changes

Let's say you've made some changes to your code, but you realize that they're not what you intended. You can use git restore to revert those changes. Here's an example:

Suppose you have a file called hello.txt with the contents "Hello World!". You make a change to the file, adding an exclamation mark at the end:

echo "Hello World!!" > hello.txt

If you run git status, you'll see that Git has detected the changes:

$ git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   hello.txt

no changes added to commit (use "git add" and/or "git commit -a")

To revert the changes, you can use git restore:

$ git restore hello.txt

If you run git status again, you'll see that the changes have been reverted:

$ git status
On branch main
nothing to commit, working tree clean

The file hello.txt now has its original contents: "Hello World!".

Undoing Commits

Now, let's say you've made a commit, but you realize that it was a mistake. You can use git reset to undo the commit. Here's an example:

Suppose you make a commit with a message "Added new feature":

$ echo "Hello World!!" > hello.txt
$ git add .
$ git commit -m "Added new feature"

If you run git log, you'll see that the commit has been added to your Git history:

$ git log
commit 3456789abc (HEAD -> main)
Author: Your Name <your.email@example.com>
Date:   Fri Mar 12 14:30:00 2023 +0000

    Added new feature

To undo the commit, you can use git reset with the --soft option:

$ git reset --soft HEAD~1

The HEAD~1 syntax tells Git to move the current branch (main) back one commit. The --soft option means that Git will keep your changes in the working directory.

If you run git status, you'll see that the changes are still there:

$ git status
On branch main
Changes to be committed:
  (use "git restore <file>..." to discard changes in working directory)
        modified:   hello.txt

To completely undo the commit, you can use git reset with the --hard option:

$ git reset --hard HEAD~1

This will remove the commit from your Git history and discard any changes.

Conclusion

Reverting changes and undoing commits are essential skills for fullstack developers. With git restore and git reset, you can easily correct mistakes and maintain a clean Git history. Remember to use git status frequently to track your changes and git log to review your commit history.

By mastering these basic concepts, you'll be well on your way to becoming a Git expert, and avoiding those pesky "oops" moments that can cost hours of productivity.

Key Use Case

Here's a workflow or use-case example:

Scenario: You're working on a new feature for an e-commerce website, and you've made some changes to the product listing page. However, after testing, you realize that the changes have introduced a bug that breaks the entire page.

Step 1: Run git status to see the changes you've made:

$ git status
On branch main
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   product-listing.html

no changes added to commit (use "git add" and/or "git commit -a")

Step 2: Use git restore to revert the changes:

$ git restore product-listing.html

Step 3: Run git status again to confirm the changes have been reverted:

$ git status
On branch main
nothing to commit, working tree clean

The product listing page is now back to its original state.

Alternative Scenario: Suppose you've already committed the changes with a message "Added new feature" and pushed it to the remote repository. You realize that the commit was a mistake and want to undo it.

Step 1: Run git log to see your commit history:

$ git log
commit 3456789abc (HEAD -> main)
Author: Your Name <your.email@example.com>
Date:   Fri Mar 12 14:30:00 2023 +0000

    Added new feature

Step 2: Use git reset with the --soft option to undo the commit:

$ git reset --soft HEAD~1

Step 3: Run git status to see that the changes are still in your working directory:

$ git status
On branch main
Changes to be committed:
  (use "git restore <file>..." to discard changes in working directory)
        modified:   product-listing.html

Step 4: Use git reset with the --hard option to completely undo the commit and discard the changes:

$ git reset --hard HEAD~1

The commit is now removed from your Git history, and the product listing page is back to its original state.

Finally

When working on a project, it's easy to get caught up in the excitement of making progress, only to realize later that a particular change or commit was a mistake. This is where reverting changes and undoing commits come into play - allowing us to correct our mistakes and maintain a clean Git history. By having the ability to effortlessly revert back to a previous state, we can avoid the frustration and wasted time that comes with trying to fix a broken application.

Recommended Books

• "Code Complete" by Steve McConnell: A comprehensive guide to writing better code. • "Clean Code" by Robert C. Martin: Best practices for writing clean, maintainable code. • "The Pragmatic Programmer" by Andrew Hunt and David Thomas: Timeless wisdom on software development best practices.

Fullstackist aims to provide immersive and explanatory content for full stack developers Fullstackist aims to provide immersive and explanatory content for full stack developers
Backend Developer 103 Being a Fullstack Developer 107 CSS 109 Devops and Cloud 70 Flask 108 Frontend Developer 357 Fullstack Testing 99 HTML 171 Intermediate Developer 105 JavaScript 206 Junior Developer 124 Laravel 221 React 110 Senior Lead Developer 124 VCS Version Control Systems 99 Vue.js 108

Recent Posts

Web development learning resources and communities for beginners...

TL;DR As a beginner in web development, navigating the vast expanse of online resources can be daunting but with the right resources and communities by your side, you'll be well-equipped to tackle any challenge that comes your way. Unlocking the World of Web Development: Essential Learning Resources and Communities for Beginners As a beginner in web development, navigating the vast expanse of online resources can be daunting. With so many tutorials, courses, and communities vying for attention, it's easy to get lost in the sea of information. But fear not! In this article, we'll guide you through the most valuable learning resources and communities that will help you kickstart your web development journey.

Read more

Understanding component-based architecture for UI development...

Component-based architecture breaks down complex user interfaces into smaller, reusable components, improving modularity, reusability, maintenance, and collaboration in UI development. It allows developers to build, maintain, and update large-scale applications more efficiently by creating independent units that can be used across multiple pages or even applications.

Read more

What is a Single Page Application (SPA) vs a multi-page site?...

Single Page Applications (SPAs) load a single HTML file initially, handling navigation and interactions dynamically with JavaScript, while Multi-Page Sites (MPS) load multiple pages in sequence from the server. SPAs are often preferred for complex applications requiring dynamic updates and real-time data exchange, but MPS may be suitable for simple websites with minimal user interactions.

Read more