DEV Community: shahabbukhari

React Custom Hooks Simplified

shahabbukhari — Fri, 22 Apr 2022 23:57:03 +0000

When you build any application Hooks are the most commonly utilized thing, Hooks like useState, useEffect, or useRef are the most common ones but sometimes they are not enough you need to write your own custom hooks

A Bit of History:

Not a long before everything in react was classes and It has been approximately one year since React v16.8 was released, marking the introduction of Hooks. They let you use state and other React features without writing a class.

Hooks make React so much better because you have simpler code that implements similar functionalities faster and more effectively. You can also implement React state and lifecycle methods without writing classes.

Let’s see the comparison of class-based components vs functional components.

// Class Based
import "./styles.css";
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  clickHandler = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>Click To Count</button>
        {this.state.count}
      </div>
    );
  }
}

export default App;

// functional components
import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

After React v16.8 one thing was clear now we won’t have to write more classes functions are the future.

Custom Hooks:

In simple words, the custom hook is just a functional running inside a component. they use other hooks based on the type of functionality they are providing. custom hooks are so powerful and help you minimize the complexity by creating a level of abstraction and making your code much cleaner and reusable.

In this blog/tutorial we will be creating a progress bar with the custom hook of useCounter.

Note: using **use** before a hook is a convention. after all it's just a function Its name should always start with use so that you can tell at a glance that the rules of Hooks apply to it.

Progress Bar:

Let's see I wanted to build a progress bar component that will get completed in a specified amount of time. for that, I will need some sort of a variable whose value increase after every second and stops after a specified.

Counter Custom Hook:

Let’s first create a counter hook that will return a value that will get updated after every second.

// 📁 Timer.js
import { useState, useEffect } from "react";

function useCounter(start, end) {
  const [reach, setReach] = useState(start);

  useEffect(() => {
    let myInterval = setInterval(() => {
      setReach((prev) => {
        if (prev === end) clearInterval(myInterval);
        return ++prev;
      });
    }, 1000);
  }, []);

  return reach;
}

export default useCounter;

As a said before hooks are just the fancy name for javascript functions. In the above code first, we have created a reach state which tells us where the counter has reached or at which value it's at. and then we have useEffectit runs only one’s and run a setInterval function which takes a callback as a parameter inside we have our setReach function which increments a previous value after each second and when it hits the limit it calls the clearInterval function which stops the interval. And in the end, we return the reach variable to use in other components.

More on setInterval here*

How to use a Custom Hook:

We can use our useCounter hook the same as any other hook inside our react application. for the progress bar, we will use HTML's own progress tag to represent the progress.

More on progress tag here

// 📁 App.js
import useCounter from "./Timer";

export default function App() {
  let count = useCounter(0, 60);

  return (
    <progress value={count} max="60">
      {" "}
    </progress>
  );
}

useCounter requires two parameters one for the initial value where to start and one is for where to end.

Conclusion

That's pretty much it's about creating your own custom hooks in react custom hooks are just functions and they are easier than you think. Custom React hooks can give us the tools to fix our own problems when third-party libraries fall short.

Also, react-use is also a very useful library that provides bundles of custom hooks that you can use in your application. Right out of the box you get so many custom hooks ready to use. Which has hooks for sensors, UI, animation, states, and many more. do check that out.

I hope this guide helps you in some way. If it did leave a comment follow my profile for more content like this or you read some of my other articles and if you have any confusion ping me on Linkedin.

THANKS FOR READING

React Pre-Requisite: JS Must Know Concepts Before Learning React

shahabbukhari — Tue, 19 Apr 2022 23:06:14 +0000

Many of you learned javascript and wanted to learn to react to the most popular library for javascript in the market as well as in the community right now. and according to the Stack Overflows 2021 survey React is the most wanted and desired library by one in four developers.

Must-Know Javascript Concepts:
- Let and Const
- Template Literals
- Destructing
- Spread Operator
- THIS
- Arrow Functions
- Modules
Basic of Functional Programming:
- Immutability
- Higher-Order Functions
- Pure Functions
- Recursion

Must-Know Javascript Concepts:

React makes it painless to create interactive UIs user interface-based components. But. But. Before building a complex skyscraper with the help of React we should dig deeper in the daunting caves of javascript to build a foundation to build these complex web apps.
As a famous saying is “don’t reinvent the wheel” There's certainly truth there, but I think it's a bit dangerous if taken too literally for me the reinvented version of the quote will be “Don't Reinvent The Wheel Unless You Plan on Learning More About Wheels”.
Before getting emersed in the world of reacting there are some pre-requisites or core concepts and different styles of programming in javascript and you should have a better understanding of it before learning to react.

Let and Const:

With ES6 javascript surprise us with the new way to declare variables in javascript with let
and const in contrast to the old way of declaring a variable with var introducing let and cons was issues developers had to face with scoping and hoisting in var.

Let:

let variables are scoped to the immediate enclosing block denoted by {} (hence the block scope). Variables declared with let and const are also hoisted but, unlike var, are not initialized with a default value. An exception will be thrown if a variable declared with let or const is read before it is initialized.

// Hoisting
console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization
// Scope
var name = "Shahab"
console.log(name) // Shahab

function myName() {
    var name = "Ali"
    console.log(name) // Ali
}
myName()
console.log(name) // Shahab

Const:

const declarations share some similarities with let declarations. the only difference is the value assigned with const remains the same within its scope.

const name = "Shahab";
name = "Ali";// error: Assignment to constant variable.

Note: Every const declaration, therefore, must be initialized at the time of declaration.

For More In-depth analysis of scopes, hoisting and Coercion check my other article.

Template Literals:

Template literal provides an easy way to insert multiple variables and expressions into strings allowing for multi-line strings, for string interpolation.

Template literals are enclosed by backtick () characters instead of double (") or single quotes('). And ${...} as a string place holder to insert variables or expressions in it.

let firstName = "Shahab"
let lastName = "Bukhari"
console.log(`My name is ${firstName} ${lastName}`);
// My name is Shahab Bukhari

Destructing:

ES6 comes with Destructuring assignment a new way of unpacking desired values from an array of properties from an object and assigning them into distinct variables.

// Array
let topStudents = ["Jhon Doe", "Alan Turing", "Einstein", "Hawking", "Newton"];
let [firstSTD, secondSTD, thirdSTD] = topStudents
console.log(firstSTD, secondSTD, thirdSTD); 
//Jhon Doe, Alan, Turing Einstein

// Object
let myPhone = {
    model: "Iphone 13 Pro Max",
    year: 2021,
    camera: "12-megapixel",
    price: 1000
}
let {model, price} = myPhone
console.log(`I have ${model} which cost around ${price}$`);
//i have Iphone 13 Pro Max which cost around 1000$

You can also skip some items in an array. What if you only want first and last student in.

let topStudents = ["Jhon Doe", "Alan Turing", "Einstein", "Hawking", "Newton"];
let [firstSTD ,,,, lastSTD] = topStudents
console.log(firstSTD, lastSTD); // Jhon Doe, Newton

The comma separator is used to skip values in an array. So if you want to skip an item in an array, just use a comma.

Spread Operator:

The Spread Operator is three dots (...) that is used to perform several tasks. The spread operator allows us to quickly copy all or part of an existing array or object into another array or object. As a name suggests it spreads the elements of an array or object in another array or objects.

let oddNum = [1,3,5,7,9]
let evenNum = [2,4,6,8]
let numbers = [...evenNum, ...oddNum].sort()
//[  1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Ok, cool why do we need it. The spread operator helps us deal with the problem of immutability(which we will be covering in the Functional Programming Section extensively).

THIS:

In JavaScript, this keyword refers to an object. Which object depends on how this is being invoked (used or called).

For the sake of simplicity, let's discuss the two main Cases.

When used in a normal function:

When this is used in a normal function it refers to the window object or global in node.

function hello() {
    let a = 'hello'
    console.log(this)
}
hello()
// Window {window: Window, self: Window, document: document, name: '', location: Location, …}

When used as a method in an object:

When this is used as a method in an object it refers to the object from which its executing.

const ohh = {
    name: "shahab",
    say: function() {
        console.log(this)
    }
}
ohh.say()
// {name: 'shahab', say: ƒ}

Arrow Functions:

Arrow functions are a useful new feature of ES6 An arrow function expression is a compact alternative to a traditional function expression, but arrow functions are limited and can't be used in all situations.

Let's write a function that returns a square of any number.

// Old Way
const square = function(a) {
    return a * a
}
// Modern Way
const square = (a) => {
    return a * a;
}
console.log(square(2)); // 4

It can get shorter. If a function is only accepting one argument then you can remove the ( parenthesis and if the function has only one statement you can also remove the { braces and the function returns the statement by default. Now, let's rewrite the function.

const square = a => a * a;

Note: Remember I said, “Arrow Functions are limited and can't be used in all situations.” one of the places where you should not use the arrow function is with this keyword. And can cause difficult to track errors. the reason behind this is Arrow functions do not bind their own this
, instead, they inherit the one from the parent scope.
Let's take an example where the arrow function is used as a method in an object.

const myObject = {
  myMethod: () => {
    console.log(this);
  }
};
myObject.myMethod() // window or global object

Weird! remember as we discussed arrow functions do not bind their own this they inherit it from the parent which in this case is the window or global object.

Modules:

When you are working in react or any complex type of application you split your code into multiple files called modules or components in react.js.

A Module is just a reusable code/file that performs a certain task that we have isolated from the rest of our code for managing the complexity of the application. Before ES6 the only way to work with modular javascript was external libraries but now things have been changed ES6 itself supports modules.

Export: export can be used to make something visible outside the module/file.

// 📁 Info.js
// In-Line Individually
export const name = "Shahab";
export const course = "Computer Science";
// All at once at bottom
export {name, course}

If you are only exporting one variable you can use export default.

// 📁 Info.js
let fullName = `${name} Bukhari`
export default fullName // only one variable can be default exported

both export and export default can be used in the same file.

Import: import can be used to import exported variables from a module/file to use in a current file.
```
// 📁 main.js
import { name, course } from './Info.js'
import fullName from './Info.js'
```
Multiple modules exported with export keyword can be accessed through object destructing and any module exported with export default keyword can be imported as a single variable. and now you can use these variables in your current file/module.
```
// 📁 main.js
console.log(name, course) // Shahab, Computer Science
console.log(fullName) // Shahab Bukhari
```

Basic of Functional Programming:

Functional Programming is a programming paradigm or you can say it's a way of thinking in which we try to build programs by composing pure functions(We will get back to pure functions). Understanding the basic concepts of functional programming is a valuable skill for any react developer.

In javascript functions are first-class citizens which means you can store functions in variables, pass them to other functions as arguments, and return them from other functions as values. you declare a function with var, let, or const keyword as you declare any other variable.

Functional programming is a part of a larger programming paradigm: declarative programming. Declarative programming is a style of programming where applications are structured in a way that prioritizes describing what should happen over defining how it should happen.

Now let's discuss some core concepts of functional programming.

Immutability:

In a literal sense, Immutability means unchangeable. In a paradigm of functional programming, after initializing an object we do not change its values or its state. Think of immutability as “save as” because you know it returns a newly changed object while traditional in-place mutation would be like “save” which means updating the original and letting go of an earlier state.

Immutability gives stricter control over your data immediately making your code safer and more predictable.

before this let's understand the problem of why we need immutability. There are two types of data in javascript primitive (pass by value) and non-primitive(pass by reference).
Javascript has 5 data types that are passed by value: Boolean, null, undefined, String, and Number. We’ll call these primitive types.

Javascript has 3 data types that are passed by reference: Array, Function, and Object. These are all technically Objects, so we’ll refer to them collectively as Objects.

Primitive types are easier to make immutable because when you assign a primitive data type to another variable it stores its value.

let myName = "shahab"
let newName = myName
newName = "shahab bukhari"

console.log(myName) // shahab
console.log(newName) // shahab bukhari

but in terms of non-primitive type data is passed as a reference that's because when variables that are assigned a non-primitive value are given a reference to that value. That reference points to the object’s location in memory. The variables don’t actually contain the value.

let even1to10 = [2,4,6,8,10]
let even1to20 = even1to10
even1to20.push(12)
even1to20.push(14)
even1to20.push(16)
even1to20.push(18)
even1to20.push(20)

console.log(even1to10) // [2,4,6,8,10,12,14,16,18,20]
console.log(even1to20) // [2,4,6,8,10,12,14,16,18,20]

Both of the arrays have the same values. because array even1to20 store the reference to the same location array even1to10 pointing and save the changes on that. That's the classic example of why immutability is important.

luckily we can solve this issue with the spread operator.

let even1to10 = [2,4,6,8,10]
let even1to20 = [...even1to10]
even1to20.push(12)
even1to20.push(14)
even1to20.push(16)
even1to20.push(18)
even1to20.push(20)

console.log(even1to10) // [2,4,6,8,10]
console.log(even1to20) // [2,4,6,8,10,12,14,16,18,20]

That's how we store the values/state of an object/array in a new object/array and then modify it to ensure immutability.

Higher-Order Functions:

Higher-order functions are functions that can manipulate other functions. They can
take functions as arguments, return functions, or both.
Some of the built-in higher-order functions in javascript are. Array.map, Array.filter, and Array.reduce all take functions as arguments.

function calculate(operation, initialValue, numbers) {
  let total = initialValue;
  for (const number of numbers) {
    total = operation(total, number);
  }
  return total;
}
function sum(n1, n2) {
  return n1 + n2;
}
function multiply(n1, n2) {
  return n1 * n2;
}
calculate(sum, 0, [1, 2, 4]);      // 7
calculate(multiply, 1, [1, 2, 4]); // 8

Here calculate(operation, initialValue, numbers) is a higher-order function because it accepts a function as the first argument.

calculate(operation, initialValue, numbers) accepts the first argument a function that describes the operation, the second argument is the initial value, and finally, the third argument is the array of numbers. and then returns the results.

Pure Functions:

A pure function is a function that returns a value that is computed based on its argu‐
ments. Pure functions take at least one argument and always return a value or
another function. They do not cause side effects, set global variables, or change any‐
the thing about the application state. They treat their arguments as immutable data.

A function is only pure if, given the same input, it will always produce the same output. When testing a pure function, you control the arguments, and thus you can estimate the outcome.

function highpass (cutoff, value) { 
    return value >= cutoff
};

highpass(5, 123); // true
highpass(5, 1);   // false
highpass(5, 3);   // false
highpass(5, 6);   // true

Recursion:

Recursion happens when a function calls itself. Code using recursion is usually shorter and more elegant. Sequence generation is cleaner with recursion than with iteration.

There are two components of recursion.

**Recursive Case:** where function calls itself with different arguments if the arguments are the same then it will get stuck in an infinite state. y
Base Case: The last component of a useful recursive function is the base case. The base case is a condition in which a function can return the result without another call to itself

The classic example of recursion where recursion is the best solution: is the Fibonacci sequence.

function Fibonacci(num) {
    if(num <= 1) return num
    return Fibonacci(num-2) + Fibonacci(num-1)
}
console.log(Fibonacci(8)) // 21

Congratulations🥳🥳:

Thanks for reading if you stick till the end and I hope this helped you understand core concepts of javascript which will 100% help you learn react more effectively. If not, try reading it again, and again… until you reach your base case!
For more articles like this you can follow me on dev.to and connect with me on LinkedIn:

Javascript the Confusing Parts: Part 1 Coercion, Let vs Const vs var

shahabbukhari — Tue, 15 Feb 2022 22:26:04 +0000

Javascript is one of the most popular languages on the internet. According to the StackOverflow, 2021 survey javascript is the most popular programming/scripting language in 2021.

Some People say javascript is a weird programming language sometimes it's true. In particular, because JavaScript has C/C++/Java-like syntax, which causes such developers to assume that it has similar semantics as well. When this turns out not to be the case, such developers often feel confused and frustrated. That said, for a person who is new to development, without prior experience in some other programming language, I don’t think JavaScript would seem stranger than most other languages that person might look at.

In this series of articles, we will dive deep into the weird parts of javascript and try to understand how javascript actually works under the hood.

Javascript is not a terribly written language it just abstracts you away from how computer or browser that you will be using to run javascript. For this, we need to understand how these tools work. you may say you don’t need to understand these concepts for working with javascript but as we go along you will understand these fundamental concepts will help you have a concrete understanding of the concept and surely you will have some aha moments. and understanding these fundamental parts differentiate between good and average developers.

Coercion:

Starting from the meme. Coercion refers to the process of automatic or implicit conversion of values from one data type to another.

How on earth 0 == "0" when 0 is an int and “0” is string. Welcome to the javascript world. In the world of javascript when you compare two values with == one value may go through coercion. JavaScript is a weakly-typed language, values can also be converted between different types automatically, and it is called implicit type coercion

This just didn't stop here arrays(which is non-primitive in nature) also coerce into a string (primitive type). Since [] is an empty array hence it gets converted into an empty string.

But But But if 0 == "0" is true and 0 == [] is true then why "0" == [] is false. thsi part will make sense if you understood the first two parts.
"0" is a string and [] is an object(that is another story why) then if your convert [] to string it will become "" an empty string. So "0" == "" is false.

2. Let Vs Const Vs Var:

With ES6 javascript surprise us with the new way to declaring variable in javascript with let and const in contrast to the old way of decllearing a variable with var.

Before starting a war between let, const and var first you need to understand two concpets Scope and Hoisting ?

Scope:

I would say that scope is the ‘environment’ in which a variable is accessible and visible and can be used. there are three type of scopes in javascript.

Global Scope:

When we declare a variable on our file, out of any function this is the global scope, so the variable is global, it is accessible and visible everywhere and it becomes property of the global object, e.g. window.
```
var myVar = 'Hello World'
```
Local Scope:

Local variables are variables that are declared inside a function and they live and die when this function is executed.They are not available/accessible/visible outside of the function that it is created. For that reason, we can have many local variables with the same name without having any impact on the rest code.
```
var name = "Shahab"
console.log(name) // Shahab

function myName() {
    var name = "Ali"
    console.log(name) // Ali
}
myName()
console.log(name) // Shahab
```

Block Scope:

Local Variables are crreated inside function block level variables live and die inside a bock of code, like {}.

Variables decleared with let and constare block scoped.

function sayHello(flag){
  var name='shahab'; // local variable
  if(flag){
    const city = 'karachi'; // block scope variable, only accessible inside this if
    return `My name is ${name}, its cold in ${city}`;
  }

  return `My name is ${name}, its cold in ${city}`; // 
}

sayHello(true); // "My name is shahab, its cold in karachi"
sayHello(false); // Uncaught ReferenceError: city is not defined

Hoisting:

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope within the scope regardless of where they are decleared, prior to execution of the code. Hoisting allows functions to be safely used in code before they are declared.

Now back to the original disccussion of let vs const vs var. lets compare them one by one.

Var

Variables declared by var keyword are scoped to the immediate function body (hence the function/local scope) and the varibles decleared with var are hoisted top of the program and can be used before initalizing.

console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
var num; // Declaration
num = 6; // Initialization
console.log(num); // Returns 6 after the line with initialization is executed.

Let:

console.log(num); // Throws ReferenceError exception as the variable value is uninitialized
let num = 6; // Initialization

Const:

constdeclarations share some similarities with letdeclarations. the only differnce is the value assigned with const remains same within its scope.

const name = "Shahab";
name = "Ali";// error: Assignment to constant variable.

Every const declaration, therefore, must be initialized at the time of declaration.

Note: I said values assigned with const cannot be changed. in case of array and object(which are same we will learn in upcoming lectures) can be updated because object decleared with const does not store a values it stores a memory address(pointer) of those values any changes we make will on a memory address.

But why let and const existed...

The reason why let and const keyword was introduced to the language because of two main reason.

Function/Local scope is confusing and was one of the main sources of bugs in JavaScript.
Hoisting in JavaScript cause unexpected results.

Issue Caused by local scope:

for (var i = 0; i < 5; i++) { 
  for (var i = 0; i < 3; i++) { 
    console.log("hello world"); 
  } 
}
// hello world
// hello world
// hello world
// hello world
// hello world
// <repeats infinitely>

you can solve this issue by just using let. which will convert iinto block scope and the refrence will be different in both for loops.

for (let i = 0; i < 5; i++) { 
  for (let i = 0; i < 3; i++) { 
    console.log("hello world"); 
  }
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world
// hello world

Unexpected Results Cause By Hoisting:

The tricky part is that only the declaration of the variable will be hoisted. If the variable is also initialized, the variable will be set to undefined when it is hoisted to the top. The variable value is changed from undefined to its initialized value when the execution reaches the variable.

var firstName = "Shahab";
console.log(firstName + ' ' + lastName);
var lastName = "Bukhari";

// Shahab Undefined

This will not through an error but rendered it as default value of undefined that is even worse. to avoid this we use let or const.

let firstName = "Jennifer";
console.log(firstName + ' ' + lastName);
let lastName = "Bland";

//Cannot access 'lastName' before initialization

This will help you to avoid errors before publishing your code publicaly.

Thanks of Reading:

If you read this so far surely you find this intresting and if you learn something consider following me. I will be continoning this series of Javacript the confusing parts follow me not to miss any future updates. Thanks

Git Simplified: Working Collaboratively with Git/Github

shahabbukhari — Tue, 12 Oct 2021 17:18:12 +0000

This is the follow-up article of Git Simplified: A Beginner guide to git and GitHub
. In that article, I have explained basic git terminologies, workflow, and some basic git commands from initializing a project on your computer/laptop to publishing to Github. If you are a beginner I will highly recommend you to do check it first.

Working Collaboratively:

Working in a team and maintaining a code base and tracking the changes of each and everyone manually is hard(and a terrible choice). This is just one of many ways to collaborate on a project using GitHub. But it’s one I would suggest if you’re just starting out working with a team and haven’t established a git-flow yet or know where to start in establishing one.

Get a copy:

Most of the time if you working on a large-scale/open-source project you don't have write access to the code. for working on your desired project first you have to fork the project into your remote repository.

Now first fork a project. what it does is create a copy of the original project into your repositories.

Setup a local copy:

Now clone a repository into your local machine.

git clone <remote repo link>

And if you forked the repository and you don't have write permission there is another step you have taken.

git remote add <remote name for source repo> <source repository clone link>

Update a local copy:

When you are working in a team you are required to update your local copy with the changes your partners/colleagues have made.

git pull <remote name> <branch name>

git pull is a Git command used to update the local version of a repository from a remote. git pull is a combination command, equal to git fetch + git merge.

Fetch the changes from remote repositories and store them in your local repository.
Marge those changes store in your local repository with your working directory

You can achieve the same result in two different steps with!

git fetch <remote name> <branch name>
git merge <remote>/<branch>

Compare changes:

As we know git tracks all the changes you have made. If you want to compare your changes in working directory with staging area, local repository or even you can compare your changes with two different branches in git with git diff command.
Let's take an example from our previous task when we fetched the data from the remote repository in our local repository.
For this purpose, I have made a repository git-test in my GitHub and cloned that repo in my local machine.

git clone https://github.com/shahabbukhari/git-test.git

After that, I made some changes in README. MD file remotely. now i will fetch the changes

git fetch origin master

Now I have a change from remote repo in my local repo (repo aka repository). Now, let's compare those changes.

git diff origin/master

I know it looks scary but let's only focus on the first and the last two lines.

In 1st line diff --git a/README.MD b/README.md where a/README.md and b/README.md are the versions of the file in which changes are made a/README.md is the version of README. MD file present in your working directory and b/README.md is the version of README. MD file present in your Local repository.
In the last two lines starting with + and - . Which usually means + line is added - line is removed but as we are comparing a/README.md (working directory version) with b/README.md (local directory version). Now it's showing we have removed -# git-test -This I have made this repository to show the implementation of git diff method. lines because they are present in the local repository but not in the working repository.

PS: git diff is a multi-use Git command that when executed runs a diff function on Git data sources. These data sources can be commits, branches, files, and more. for complete understanding check this Guide.

Update Remote:

After adding and reviewing changes now it's time to submit your code back to your own repository(which is a copy of the original repository).

git push <remote name> <branch name>

Make a pull request

After Creating changes to your remote repository now you need to create a pull request to be able to merge your code with the source repository where the maintainer/owner will merge your code with the original repository after reviewing it.

Congratulation🥳:

Congratulations, if you read the complete article and stick till the end. For practice used my git-test repository. fork, clone, make changes, push and create a pull request

Thanks for reading.

Feel free to connect with me on LinkedIn. If you wanted to check what I am working follow me on Github and Follow my blog for more beginner's centric content(because I am not an expert).

Git Simplified: A Beginner guide to git and GitHub

shahabbukhari — Mon, 20 Sep 2021 11:16:31 +0000

What git actually is?

Git is the most used tool for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development.

Umm... But why do i need Git.?

So here is why

When you are working in a team. you have different task every person is responsible for different task but everyone's work is dependent on each others work.
You have to send files to each-other when ever you changed something you have to send it back to back and maintaining those files becomes a tedious task.

Here comes the git. Git tracks changes in your files and save different version of files. if you make any crap in your current version you can easily go back to your previous stable version.
if you are working in a team and something goes wrong. It will help you to identity who made the change and where he/she made the change and when they made a change

Prerequisites:

Before we start working on git there are some prerequisites:

[x] Install Git:
- Mac Users click here
- Windows Users click here
- Linux Users click here
[x] Github Account:
- If you don't already have one, you can make one

Git Basics:

Before we start working with there are some things you need to know.

Git repository:

Git repository aka repo is like a normal folder but with some Super powers. It saves every change you make in it.

Git Workflow:

If your file is in current working directory(folder). it can be in three states:

Working Directory: Working directory is the area where you are currently working. where your files resides. it is also called Working Tree or Untracked Area. every change you make here is not tracked by git.
Staging Area: Staging area is when git starts tracking and saving changes occur in file. after saving changes when you make another change in the file git will know where you made a change. with git add filename you can move file from working directory(Untracked Stage) to Staging Area(Tracked Stage).
Local Repo: local repository is the place where you save your changes before sending them on remote repository. you can save changes from staging area with git commit -m "message" filename)" .
Remote Repo: Remote repository is a place where you Push your code or Pull to update the local version of a repository from a remote repository. its usually Github or any other hosting service for version control.

Git Basic Commands:

Now, Its time to get our hands dirty on git commands. Lets Git.

Initilizing Local Repository:

Before you can use any Git super powers first you need a repository(Super Folder). Either you can connect your existing project folder to your git repository. or you can clone one from github.

Clone a repository from github:

First create a repository on github with new button from repository section.

Now add required details Repository name, Description and so on. then create a repository.

After creating a repository copy HTTP or SSH Address.

Now clone your repository into your local machine.

git clone address_of_your_repository

Connect Existing project with remote repo:

If you want to connect your existing project to your git repository you can use this.
First initialize a git repository in that folder.

git init

Now connect your existing repository with remote repository.

git remote add remote_name address_of_your_repository

At remote_name you can specify any name you want to specify for your remote repository. usually it's origin.

Add Changes to stage:

To add changes from your working directory to staging area.

git add /path/to/file

You can add all changes at one(if you are lazy like me).

git add .

Commit changes

Now commit(save) the changes you added to your staging area:

git commit -m "Commit Message"

The message in " " is given so that the other users can read the message and see what changes you made.

Check Status of Files:

You can check the status of the files in working directory and the staging area. which files are in staging area and which files or not tracked yet.

git status

Same as git status you can also check how many commits you have made in your git local repository(all the commits made to a repository).

git log

Push Code:

To upload your local repository content to a remote repository(Github). we use.

git push remote_name branch_name

remote_name: usually its origin but in start if you initialize your existing project to git repository you may have added a remote_ name in git remote add remote_name address_of_your_repository.
branch_name: its a branch where you want to submit your code. usually its master or main. you can check your branches with git branch it will list all the branches. the one with * before name is your your current branch.

Note: git maintain history of your project when your local repo history doesn't match with remote repo you cannot push your code. It may happen because of some files changes made by you/teammate in remote repository which are not present in local repository.
So when you are working in team/collaborative project you may want to pull changes in to your local working directory.

git pull remote_name branch_name

git pull update the local version of a repository from a remote repository.
Now Push your changes to remote repository.

Congratulations🥳

Congratulations, you made your first push to your remote repository.

Conclusion:

In this article we have learned what git is, why we need git, some basic git terminologies and some basic git commands.
Stay tuned for the next article on how to work collaboratively on git in a team.

Thanks for reading.

Feel free to connect with me on LinkedIn. If you wanted to check what i am working follow me on Github and Follow my blog for more beginner's centric content(bcz i am not an expert).