DEV Community: SUCHINTAN DAS

Reach Hooks Beginner to Advanced

SUCHINTAN DAS — Sun, 01 Jun 2025 11:48:49 +0000

Table of Content

📌 Introduction

📌 Need for React Hooks

📌 React Hooks

➡ useState

➡ useEffect

➡ useContext

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and some instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉 Linkedin

Let's Start !

Need for React Hooks

➡ useState

This is one of the most used hooks by developers while working with React. Let's understand the purpose of the hook in React -

React uses a virtual DOM and it doesn't keep a track of all the variables that are declared unlike JavaScript. So, if there is a variable that is declared by the developer which can change based on any some inputs or actions it would re-render the element and make the things reflect back on the user's side. It's important to tell React to keep a track of that variable and that is done by using useState hook.

👉 Structure -

//Functional component
const [state, setState] = useState(initialValue);

setState(newValue);

//Class component
this.state = {
value: initialValue
}

this.state.setState({
value: newValue
});

👉 Example -


//Functional component
function check() {
  const [count, setCount] = useState(0);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(count => count + 1)}>+</button>
    </>
  );
}

//Class component
class Check extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={() => this.setState(
              { count: this.state.count + 1 }
        )}>
          +
        </button>
      </div>
    );
  }
}

➡ useEffect

This is another most used hook in React which most of the React developers use even in small projects. The main purpose of this hook comes into play when you want to use any third-party communication with any API or with Server.

Let's take a peak into an example and understand it in a better way -

👉 Structure -


//Functional component
useEffect(() => {
  //Runs on the first render
  //And any time any dependency value changes

  return () => {
            cleanup
        }
}, [dependency]);

👉 Example -


function App() {
  const [list, setList] = useState([]);
  const [conn, setConn] = useState(false);
  const [call, setCall] = useState(false);

  useEffect(() => {
   fetch('http://localhost:3333/list')
    .then(data => data.json())
     .then(items => {
       if(call) {
         setList(items)
       }
     })
 }, [conn])

  return(
    <>
       Get Data 
       <button onClick={() => { 
                 setCall(true); 
                 conn ? setConn(false) : setConn(true);
}}>Click Me</button>
    </>
  )
}

There are two state variables that are used to make the call to this local server. The first one is to toogle which click on the button so that the call can be made. The second state variable is because of the fact that the the dependency of useEffect get's called initially when the initialization of the value is done.

So, we want to cancel that false call , because of which we used this other state variable and made it true on the first click.

🔴 Note : The reason why we haven't discussed about this hook on Class components is because it get's divided into 3 different functions namely componentDidMount, componentDidUpdate, componentWillUnmount.

I know many of you are thinking will this be covering in this blog ? The answer is YES, I will give you a small description of them as well so that this blog doesn't leave any stone unturned and you get the complete knowledge.

componentDidMount : The function inside this will run after the component has been rendered or mounted in other words so if you want to do any call when the component is rendered then you can use this hook.
componentDidUpdate : The function inside this will run in case of any update on the component like change in states or props.
componentWillUnmount : The function inside this will run in case of component unmounting . It's called immediately after the component is destroyed or unmounted and mostly used for cleanup purpose by developers.

➡ useContext

While using React we know that we can send our data between multiple components through Props right ? But think about a data like the theme of the user ! This data is something that needs to be sent to mostly all the components of the Project. Isn't it messy now as we need to send it through props to each and every single one of them .

The solution that developers earlier used apply for these types of states was Redux but in today's date we have useContext with us which is the Context api of React to solve this issue and it's really useful for most developers who don't want to mess their project or product by applying Redux.

So, now as we are clear of it's purpose , let's discuss it's structure and example so that you can use it on your next project -

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

Most Useful JavaScript functions for Web Developers

SUCHINTAN DAS — Sun, 03 Jul 2022 15:26:14 +0000

Table of Content

📌 Introduction

📌 Most Useful Functions of JavaScript

➡ Map function

➡ Filter function

➡ Promises

➡ Async Await

➡ Logical and Ternary Operator

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and some instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉 Linkedin

Let's Start !

Most Useful Functions of JavaScript

Map function

Map function is one of the most used functions by web developers, mainly all the JavaScript Frameworks have a great use of this function when it comes to iterate through an Array. It returns the updated array and you can store the same. Let's discuss the function in a broader way including all the ways to implement it.

Here's the structure of the Map function -

I think we are now familiar with the structure of the Map function, so let's implement it with some examples.

Examples:




const array1 = [1, 4, 9, 16];

//value for callback function
const map1 = Array.prototype.map.call(array1,
(x) => 
{return x * 2});

//without value of callback
const map2= array1.map(x => x*2);

Output:

It has similar purpose as of for, while and do-while.

Filter function

Do you want to filter some values out of an Array ? Then , this function is the one you should go first ! There are many instances in development where we need to fetch some specific values out of an array. This is where it comes into play.

Filter function is used with Arrays to fetch some values from the Array which satisfies some condition like greater than 7 or something. The return type of the function is the array of those values satisfying the condition.

Let's discuss the structure of the filter function -

I think we are now familiar with the structure of the Map function, so let's implement it with some examples.

Examples:




const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

//value for callback function
const updatearray = Array.prototype.filter.call(numbers,
(element) => {return element > 6});

//without value of callback
const updated = numbers.filter(element => element > 6);

Output:

Promises

Promises are very useful when it comes to web development in terms of making an API call to server to third party services. The Promises have 3 stages namely Pending, Fulfilled, Rejected . To handle the requests without blocking the DOM , promises and async await are used.

Examples:



//example with fetch function of javascript
fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Output:



{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}

Async Await

Promises are very useful and any major project has a good part of it involved. But the syntax is not that clean to be used right ?
The bridge of then and catch is something that becomes problematic when there are 2-3 promises lined up based on the response of the earlier ones.

That's where Async Await comes it play !

The purpose of Async Await is to help writing API Calls without .then and .catch bridges which makes it cleaner to read and the return of the Call is returned by await which can be stored on a variable to access

Let's have a look into it's structure -

Examples:



//example with async and await function of javascript
async function sample () {
    try {
      const resp = await fetch("https://jsonplaceholder.typicode.com/todos/1");
      const data = await resp.json();
      console.log(data);
    }
    catch {
      (err) => {console.log(err)};
    }
}

Output:



{ 
  userId: 1, 
  id: 1, 
  title: "delectus aut autem", 
  completed: false 
}

Logical and Ternary Operators

While working over various projects operators are something that plays a major role in implementing a lot of logic part and maintaining the cleanness of the code. Two most used operators are Ternary ( ? : ) and Logical operators ( && and || ).

Let's discuss it in a broad way so that you can use it efficiently in your next project -

Ternary Operator

Here's an example for your ease in understanding -

Examples:



//example with ternary operator with true output
const value = ( 5 < 7 ) ? "True" : "False" ;

//example with ternary operator with false output
const value = ( 5 > 7 ) ? "True" : "False" ;

Output:



True
False

Logical Operator

Here's an example for your ease in understanding -

Examples:



//example of logical operator with true and false
console.log(0 && 1);
console.log(0 || 1);

//example of logical operator with in-depth understanding
// and operator looks for false so it goes till 7 
console.log(5 && 7);
// or operator looks for true so it goes only till 5
console.log(5 || 7);

Output:

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

React Props complete guide for beginners

SUCHINTAN DAS — Sat, 25 Jun 2022 07:44:55 +0000

Table of Content

📌 Introduction

📌 React Props

📌 Pro Tips

➡ Reduce JSX Redundancy

➡ Communicate between Parent and Child

➡ Triangular communication between Parent and Components

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and so instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉 Linkedin

The whole syntaxes and code are uploaded on this 👉 Repository . If you find it useful , you can star the repository to show a appreciation. Thanks !

React Props

I know most of you can't wait to know what's there on this amazing blog but let's just take a small breath understand a little bit about React Props

It's very similar to inheritance where some properties are passed from parent to child. Yes, in case of props also it's a one-way path.

Pro Tips

Reduce JSX Redundancy

Yes, you heard it write , you can actually send JSX to your child like any card body, section body or headings . Here's a small example of it.

Parent.jsx


import React from "react";
import Children from "./Children";
import "../../stylesheets/Part1/Parent.css"

const Parent = () => {
  const card = (title) => (
    <div className="card">
      <img
        src="https://i2.wp.com/sleepingshouldbeeasy.com/wp-content/uploads/2019/12/gross-motor-activities-for-1-year-olds-3.jpg"
        alt=""
      />
      <button>{title}</button>
    </div>
  );
  return (
    <>
      <div className="container">
        <h1>Showing childrens</h1>
        <br />
        <div className="cards">
        <Children childcard={card("Child")} />
        </div>
      </div>
    </>
  );
};

export default Parent;

Children.jsx


import React from 'react'

const Children1 = (props) => {
  return (
    props.childcard
  )
}

export default Children1

The card is defined in the parent component and it sent it to child component to use , which reduces the reductant code in the first place taking reusable components to another level.

Communicate between Parent and Child

I know most of the people while working over any website comes through a scenario where they want to get changes in parent based on changes on child component. Here's an example, let us take you are building a website with dark and light mode switching and you put the controller on the parent body and the child component section.

The idea here is using pointers !

Yes, you heard it right !

We know that the communication of props is a one-way process so after the props are sent there is no returning back of it even if there are some changes that occurred. To solve this issue we will send our states pointer to the child. Therefore any change in the value would mean change on the pointers address which would help use manipulate parent and child together. YES 😉!

Here's a small code peak -

Parent.jsx


import React, { useState } from "react";
import "../../stylesheets/Part2/Parent.css";
import Children from "./Children";

const Parent = () => {
  const [dark, setdark] = useState(false);

  const tooglemode = () => {
    dark ? setdark(false) : setdark(true);
  };

  const darkmode = (
    <i
      className={
        !dark
          ? "fa-solid fa-moon toogle-active"
          : "fa-solid fa-moon toogle-inactive"
      }
      onClick={tooglemode}
    />
  );

  const lightmode = (
    <i
      className={
        dark
          ? "fa-solid fa-sun toogle-active"
          : "fa-solid fa-sun toogle-inactive"
      }
      onClick={tooglemode}
    />
  );

  return (
    <div className={dark ? "application dark" : "application light"}>
      <div className="buttoncontroller">
        <h1>Website</h1>
        <div className="toogle">
          {darkmode}
          {lightmode}
        </div>
      </div>
      <Children dark tooglemode={tooglemode} />
    </div>
  );
};

export default Parent;

Children.jsx


import React from "react";
import illustrator from "../../assets/images/illustrator.svg";

const Children = ({ dark, tooglemode }) => {
  return (
    <div className="section">
      <img src={illustrator} alt="" />
      <div className="sidebar">
        <h1>Welcome</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
          quod cum quibusdam rerum quis repellat consequuntur nesciunt deserunt.
          Voluptates aut eaque sed rerum dolorem alias quia! Quo magni hic odio
          exercitationem ratione.
        </p>
        {dark ? (
          <button
            onClick={tooglemode}
            className="light"
            style={{ border: "2px solid black" }}
          >
            Dark Mode
          </button>
        ) : (
          <button onClick={tooglemode} className="dark">
            Light Mode
          </button>
        )}
      </div>
    </div>
  );
};

export default Children;

And a short demonstration of the same-

Triangular communication between Parent and Components

Yes I know that's something very exciting. Though the concept would remain same as earlier the only play here is that all the states that needs to be manipulated would be defined on the Parent Component and their pointers would be sent to all the childs. As a change is done on the pointer's address all the components would be accessing the data from the same address result being passed on all the 3 of them.

Let's have our peak on the code -

Parent.jsx


import React, { useState } from "react";
import "../../stylesheets/Part3/Parent.css";
import Children1 from "./Children1";
import Children2 from "./Children2";

const Parent = () => {
  const [show, setshow] = useState(true);
  const [count, setcount] = useState([1]);

  const toogle = () => {
    show ? setshow(false) : setshow(true);
  };

  const maintaincount = (event) => {
    event.target.id === "add"
      ? setcount([...count, count[count.length] + 1])
      : setcount(count.slice(0, -1));
  };

  return (
    <div className="application-container">
      <div className="header">
        <button onClick={maintaincount} id="add">
          Add
        </button>
        <button onClick={maintaincount} id="delete">
          Delete
        </button>
      </div>
      <div className="section-application">
        <Children1 show toogle={toogle} />
        <Children2 count={count} show />
      </div>
    </div>
  );
};

export default Parent;

Children1.jsx


import React from 'react'

const Children1 = ({toogle}) => {

  return (
    <div className="section1">
        <h1>Control Text Visibility</h1>
        <button onClick={toogle}>Toggle</button>
    </div>
  )
}

export default Children1

Children2.jsx


import React from "react";

const Children2 = (props) => {
  console.log(props.show);
  return (
    <div className="section2">
      {props.show ? (
        props.count.map((ele) => {
          return (
            <div className="section2-application" key={ele}>
              <h1>Sample Text</h1>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure,
                ratione necessitatibus officia asperiores quia quaerat
                aspernatur est dignissimos corrupti ullam qui sapiente dolorum
                aliquid!
              </p>
            </div>
          );
        })
      ) : (
        <div>Activate show to view the list</div>
      )}
    </div>
  );
};

export default Children2;

Here's the website -

And a short website breakdown to help you understand the same.

That's all for today. I hope it really helped you to learn new things.

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

JavaScript to TypeScript | Complete Guide with React ⚛️

SUCHINTAN DAS — Sun, 19 Jun 2022 04:30:26 +0000

Table of Content

📌 Introduction

📌 Introduction to TypeScript

➡ Variables

➡ Functions

➡ Multiple Types

➡ Classes

📌 React TypeScript Project Structure

➡ Models

➡ Apis

➡ Components

➡ Pages

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and so instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉 Linkedin

The whole syntaxes and code are uploaded on this 👉 Repository . If you find it useful , you can star the repository to show a appreciation. Thanks !

Introduction to TypeScript

I know most of you guys who are reading this blog are either not familiar with TypeScript or have a little knowledge about TypeScript as a whole. Don't worry in this whole blog we are going to cover every single thing from the start to bottom and even if you are new to TypeScript you can build a good project easily along with React.

Let's first understand some important syntaxes of TypeScript !

I will be explaining the syntaxes considering that you are coming from JavaScript background and have knowledge about the syntaxes of the same !

Variables

JavaScript 🟡


let a = "check";
let b= 2;
let c= {
    h: "element"
};
let d= [1,2,3];
let e= false;
let f= ["check",2]
let g= c.h;
let i=null
let j=undefined
let k= [
    {
        h:"element1"
    }
]

TypeScript 🔵


let a: string = "check";

let b: number = 2;

interface ctype {
    h:string
}
let c: ctype = {
  h: "element",
};

let d: Array<number> = [1, 2, 3];

let e: boolean = false;

let f: [string, number] = ["check", 2]; //tuple

let g: string = c.h;

let h: unknown = "noideaabout"; //a variable whose type is not known it could be a string, object, boolean, undefined, or other types but not number

let i:null=null

let j:undefined=undefined

let k: Array<ctype> = [
    {
        h:"element1"
    }
]

Functions

JavaScript 🟡


let func1= (arg1) => {
    return "str"
}

let func2 = (arg2) => {

}

TypeScript 🔵


const func1 = (arg1: number): string  => {
    return "str";
};


const func2 = (arg1: number): void  => {

};

Multiple Types

JavaScript 🟡


function randomfunc(arg) {
    // ...
  }
  randomfunc({ shape:"check1" });
  randomfunc({ shape:undefined, xPos: 100 });
  randomfunc({ shape:2, yPos: 100 });
  randomfunc({ shape:"check1", xPos: 100, yPos: 100 });

TypeScript 🔵


interface typeOptions {
    shape: string | undefined | number;  //multiple types to same parameter
    xPos?: number;  //optional parameters
    yPos?: number;  //optional parameters
  }
function randomfunc(arg: typeOptions) {
    // ...
  }
  randomfunc({ shape:"check1" });
  randomfunc({ shape:undefined, xPos: 100 });
  randomfunc({ shape:2, yPos: 100 });
  randomfunc({ shape:"check1", xPos: 100, yPos: 100 });

Classes

JavaScript 🟡


class Check {
    a;
    b;
  }

const ch = new Check();
ch.a = 0;
ch.b = "check-string";

TypeScript 🔵


class Check {
    a: number;
    b: string;
  }

const ch = new Check();
ch.a = 0;
ch.b = "check-string";

Now that we are familiar with all the syntaxes of TypeScript we can now dive into React with TypeScript full project setup.

Let's go !

React TypeScript Project Structure

Here's a small peak to the Project :

Let's start the React Project with TypeScript Template using the command


npx create-react-app client --template typescript

Note: To explain the whole structure I will be making a todo list project so that everyone can get an idea how to implement the same on any other project or product.

React TypeScript with Project

Models

ITask.ts


export interface Tasks {
    id: number,
    title: string,
    content: string
}

export interface TaskList extends Array<Tasks>{}

export interface TasksProps {
    d: TaskList | undefined,
    changed: Function
  }

Here's you can see for this project there are 3 interfaces that I used. First interface Tasks is description of elements of the Array of Objects and the second interface TaskList is the declaration of array of the interface Tasks.

Thirdly there is another interface TasksProps which is used here to describe all the props typing while passed between components.

Apis

Task.ts


import axios          from "axios";
import { TaskList, Tasks } from "../../models/ITask";
import { token } from "../../utils/authController";

const baseUrl = "http://localhost:5000";


//receive tasks
export const getTasks = async () => {
    try {
        const response = await axios.get(
            baseUrl + '/tasks/gettasks', { headers: { 'Authorization': `bearer ${token}`, } });
        return response.data as TaskList;
    } catch (e) {
        console.log(e);
    }
};

//add tasks
export const postTasks = async (data:Tasks) => {
    try {
        const response = await axios.post(
            baseUrl + '/tasks/addtasks', data, { headers: { 'Authorization': `bearer ${token}`, } });
        return response.status as number;
    } catch (e) {
        console.log(e);
    }
};

Here I have used axios for making backend calls. The preference can go different for you ! The main idea here is to make a typing of arguements and return types each function would be having so that any developer can make a call in the right syntax and do get the desired form of response body.

Controllers

authController.tsx


export const token=localStorage.getItem("idtoken") as string

Controllers are an essential element for frontend developers. Things which decide the flow of the website , are mostly the controllers of a website. Like here the authentication part is put into the controllers as it would be a flow decider for mostly all the components.

Components

Header.tsx


import React, { useState } from 'react'
import './Header.css'

const Header = () => {
  return (
    <nav>
      <h1>Todo List</h1>
    </nav>
  )
}

export default Header

TaskInput.tsx


import React, { useState, useEffect } from "react";
import { postTasks } from "../../apis/Tasks/Task";
import { TasksProps } from "../../models/ITask";
import Home from "../../pages/Home/Home";
import "./TaskInput.css";

export const TaskInput: React.FC<TasksProps> = ({ d, changed }: TasksProps) => {
  //states
  const [callapi, setcallapi] = useState<Boolean>(false);
  const [sendd, setsendd] = useState<Boolean>(false);
  const [content, setcontent] = useState<string>("");
  const [title, settitle] = useState<string>("");

  console.log("TaskInput")
  console.log(d)

  //api-call
  useEffect(() => {
    const senddata = () => {
      postTasks({id:d?.length!+1, title: title, content: content})
        .then((res) => {
          if (res === 200) {
            let updatedata: Array<Object> | undefined = d;
            updatedata?.push({
              id: d?.length! + 1,
              title: title,
              content: content,
            });
            console.log(updatedata)
            changed(updatedata);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };

    if(sendd)
    {
      senddata();
      changed([]);
    }
  }, [callapi]);

  return (
    <div className="taskinput">
      <h1>Add Tasks</h1>
      <input type="text" placeholder="title" onChange={(event)=> {
          settitle(event?.target?.value)
        }}/>
      <textarea
        name="content"
        id=""
        cols={20}
        rows={10}
        placeholder="content"
        onChange={(event)=> {
          setcontent(event?.target?.value)
        }}
      ></textarea>
      <div className="add">
        <button onClick={()=> {
          setsendd(true);
          callapi ? setcallapi(false) : setcallapi(true);
        }}>Add</button>
        <i className="fa-solid fa-plus"></i>
      </div>
    </div>
  );
};

export default TaskInput;

Tasks.tsx


import React, { useEffect, useState } from "react";
import { getTasks } from "../../apis/Tasks/Task";
import { TaskList, TasksProps } from "../../models/ITask";
import "./Tasks.css";

export const Tasks: React.FC<TasksProps> = ({ d, changed }: TasksProps) => {
  //states
  const [callapi, setcallapi] = useState<Boolean>(false);

  console.log("Tasks")
  console.log(d)


  //api-call
  useEffect(() => {
    const receivedata = () => {
      getTasks()
        .then((res) => {
          changed(res);
        })
        .catch((error) => {
          console.log(error);
        });
    };

    receivedata();
  }, [callapi]);

  return (
    <div className="tasks">
      {d?.map((ele) => {
        return ele !== null ? (
          <div className="task" key={ele.id}>
            <h1>{ele?.title}</h1>
            <p>{ele?.content}</p>
          </div>
        ) : (
          null
        );
      })}
    </div>
  );
};

export default Tasks;

Here's a small summary of all the components . TaskInput component is sent two props whose typing are already been declared on models . The props are the states sent from parent component Home.tsx to TaskInput.tsx and Tasks.tsx so any changes in any of the child component gets reflected on the other component.

The api calls also have been declared already and the function call is made from the components for the data.

Pages

Home.tsx


import React, { useState } from 'react'
import Header from '../../components/Header/Header'
import TaskInput from '../../components/TaskInput/TaskInput'
import Tasks from '../../components/Tasks/Tasks'
import { TaskList } from '../../models/ITask'
import './Home.css'

const Home = () => {
  const [data, setdata] = useState<TaskList|undefined>([]);
  return (
    <>
    <Header/>
    <div className="dashboard">
      <TaskInput d={data} changed={setdata}/>
      <Tasks d={data} changed={setdata}/>
    </div>
    </>
  )
}

export default Home

The states for data are declared on the parent component and sent as props to child components to make data changes on any child components reflect back to the other child.

It's possible as the pointer to the state is sent to the childrens.

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

React + TypeScript + ESLint + Prettier Full Setup ✈

SUCHINTAN DAS — Tue, 14 Jun 2022 09:08:12 +0000

Table of Content

📌 Introduction

📌 Why this configuration 🤔?

📌 Configuration 🛠

👉 Configure ESLint on the project

👉 Configure Prettier on the project

📌 Start Project

📌 Thank you

Introduction

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and so instructions. Don't worry it would be quick and crisp 😉.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉Linkedin

Note: I will be using a Windows machine 💻 while doing the process. So, there can be some case where the commands may differ for you if using a different machine. Please help yourself out in that case, though I will try my best to cover all such commands.

Why this configuration 🤔?

Before starting with this tutorial, it's important to understand why we need this configuration. So, let me introduce you to these stacks individually and help you understand their benefits.

ESLint

Have you ever faced issues due to a messy code written by someone and not following the rules that are supposed to be kept in mind while writing the code 🥲?

A small example -

import axios from 'axios'
const component = () => {
}

Like here the developer forgot to add a line gap between imports and the main functional component. A similar problem is pushing a lot of console logs on production.

These things are small but very irritating when the codebase evolves and many lines of code comes into it 📚. And yes , to maintain clean code they don't need to put that much efforts, just following some rules every time make a codebase very clean 🧹.

That's the idea of ESLint and yes, you need it to make your codebase very sweet for any new developer to code 👍.

Prettier

Has the same idea as that of ESLint but their combination is really robust. Many developers likes ESLint + Prettier configuration very good when you want to make you codebase very easy for debugging and onboard .

TypeScript

I know, most of you guys would already are familiar with this framework. It's very famous after all 🤷. But here's a small introduction for this framework.

Want to follow a structured format for your codebase where all the props, function returns etc. are setup beforehand so that , it avoids mistake ? Yes, I know it's very awesome to work on a project where everything works in a structured way and if anything goes out of the structure, you get an error. Saves really a lot of time for debugging❗

TypeScript has interfaces, function types and many more. A small peak of it is here.

apiCall.ts 📝

import axios from "axios";
import { AuthLogin, AuthRegister } from "../models/Auth";
import setAuthToken from "../utils/controllers/setAuthController";

const baseUrl: string = String(process.env.REACT_APP_SERVER_URL);

export const loginauth = async (email: string, password: string) => {
  //   console.log(baseUrl);
  const options: AuthLogin = {
    method: "post",
    url: `${baseUrl}auth/login`,
    data: {
      email,
      password,
    },
  };
  try {
    axios
      .request(options)
      .then((response) => {
        if (response?.status === 200) {
          setAuthToken(response?.data?.token);
        }
        return response?.status as Number;
      })
      .catch();
  } catch (e) {
    // console.log(e);
  }
};

model.ts 📝

export interface AuthLogin {
  method: string;
  url: string;
  data: AuthLoginBody;
}

export interface AuthLoginBody {
  email: string;
  password: string;
}

controller.ts 📝

const setAuthToken = (token: string) => localStorage.setItem("idtoken", token);

export default setAuthToken;

Just see how model defines the structure of the body of api call, controller defines the flow of token and main function connects the flow. How easily you can debug in such a structured codebase 🙂 .

React

This framework is alse one of the famous among developers. If someone wants to build a Single Page Application with JavaScript and that also very easily. Just use this framework. It's quite good for new users, you divide a page into components so no more reductant code. Use props and write JavaScript logics and HTML code ( It follows JSX which is similar to HTML with some small changes ) .

Believe me ! You will fall in love with it 😍, just give it a try.

A small peak into the file structure in React-

Configuration 🛠

Yes, now it's time to start the whole configuration!

There are some prerequisites which you would need on your machine-

NodeJS installed on the system.
Git installed on your system. A reference blog if needed help 👉 blog on git and github
VSCode installed on your system. You can have your own choice as well.

Cool ! Let's start...

React TypeScript Template download

Here are the commands 👇

----------------npm users-----------------------
npx create-react-app ./ --template typescript

----------------yarn users----------------------
yarn create react-app ./ --template typescript

It would take 1-2 minutes to download the same. If you are facing EPERM error here's a quick fix for you !

For Windows

Open cmd as administrator.

If project is in different drive then use this to switch the drive and navigate to the location cd /d d:\<project_location>

Use the commands here to download the template.

Configure ESLint on the project

Open your terminals and let's configure ESLint on the project.

Use the command 👇

---------npm users-------------
npm init @eslint/config

---------yarn users-------------
yarn create @eslint/config

And here's the answer to the CLI of ESLint. Let's answer them together in the same flow.

You can choose some other options on these questions as well based on your needs.

You can see a new file 📝 got created on your root directory named eslintrc.json. This is a sign that the installation is successful !

Note: Here we are using the Airbnb template as it is widely known in the developers community. You can have some different options as well. https://github.com/airbnb/javascript to know more !

There are some modules you would need while working with Airbnb . Use the following commands to install them :

npm install eslint-config-airbnb-typescript --save-dev

Now you would have to update some files :

Update the file with these configs 🛠

eslintrc.json 📝

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "react-app",
        "react-app/jest",
        "airbnb",
        "airbnb-typescript",
        "plugin:import/typescript"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {}
}

package.json 📝

Update the scripts with this

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint .",
    "lint:fix": "eslint --fix ."
  },

Let's test 🔬 the ESLint :

Use npm run lint and this should be there on your terminal.

Nice ! So, now you can see there are already some linting problems in the template of react for TypeScript. Don't worry we will head to it and discuss how to fix them 🛠.

But first let us help us out using the command 👉npm run lint:fix , this command will run the traditional fix provided by ESLint. Like single comma's to double , but it can't fix the major ones.

Nice ! It fixed all those errors for you. Yes, ESLint does help you out with fixing these error if you are not able to do so 🤯.

You can control rules over ESLint from eslintrc.json. Here's some of the rules that I apply mostly and you can update the file with this -

eslintrc.json update rules 📝:

    "rules": {
        "react/react-in-jsx-scope": ["off"],
        "react/jsx-uses-react": ["off"],
        "react/jsx-props-no-spreading": ["warn"],
        "react/no-unescaped-entities": ["off"]
    }

Let's dive into Prettier now 🌊!

Configure Prettier on the project

In tech where the things start, it end on that point only. So, let's move back to our terminals and configure prettier !

Let's install all the dependencies for the same 👇

---------------------npm users------------------------------------
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

---------------------yarn users-----------------------------------
yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

I know this time we don't have any file on our root directory like eslint. So, let's create one with the name .prettierrc. And, yes the purpose of this file is also same as the earlier one. This is the config file and it would have all the rules and controls you want to have in your project !

And let's fill it with this code -

.prettierrc 📝

{
    "tabWidth": 2,
    "semi": true,
    "singleQuote": false,
    "trailingComma": "all",
    "printWidth": 80,
    "useTabs": false,
    "endOfLine":"auto"
  }

You can always have your own configs 🛠. For this tutorial I am using the config which is widely used by most developers 🧑‍💻.

Let's update the eslintrc.json as well so that it uses prettier now -

eslintrc.json 📝

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "react-app",
        "react-app/jest",
        "airbnb",
        "airbnb-typescript",
        "plugin:import/typescript",
        "plugin:prettier/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "plugins": [
        "react",
        "@typescript-eslint",
        "prettier"

    ],
    "rules": {
        "react/react-in-jsx-scope": ["off"],
        "react/jsx-uses-react": ["off"],
        "react/jsx-props-no-spreading": ["warn"],
        "react/no-unescaped-entities": ["off"]
    }
}

While coding you may face some issues when you need to update the structure of the file as that of prettier which can go tiring. Here's a small extension that I use personally and this would make your life easier. So, install it !

To Format the document shortcut keys are 👇

Windows-
Shift + Alt + F

Mac-
Shift + Options + F

Linux-
Ctrl + Shift + I

Manually-
Right Click + "Format document with..." + Prettier

So, if you face any errors of prettier don't forget to use this commands to format the document correctly.

Yes, you are done with the configuration.

Start Project

Use the command 👉npm start and run the project. There will be couple of prettier errors. To fix them go on the file and do the format document with Prettier extension.

And this should start your project like this -

Here's the link to the GitHub Repository

Thank you

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

Git and Github Tutorial: Beginner to Advanced (Part 3)

SUCHINTAN DAS — Thu, 09 Jun 2022 14:53:01 +0000

Table of Content

📌 Introduction

📌 Git Terminologies

📌 Setup of Git and Github on System

📌 Concept of Github and Git

📌 Staging

📌 Beginner commands of Git

📌 Merging Conflicts

📌 Resolving Conflicts

📌 Some Practices to avoid Conflicts

📌 Pull Request

📌 Advanced Git Commands

📌 Thank you

Important Note ‼

Hello fellow readers, this is a going to be third part of the series Git and GitHub Tutorial: Beginner to Advanced. Are you a new reader?

Here's the link to previous parts of the series -

👉 Part 1

👉 Part 2

Ok now let's move forward with the topic without wasting anymore moments.

Merging Conflicts

I know most of you guys are familiar with merging and is even familiar with the command that is used to merge two branches. Now's lets dig a little bit deeper over the topic. I can guarantee you, it would worth it.

While merging of two branches there are two types of scenario's that occur-

No Conflicts :

In this case the changes are on different files so Git is not confused about merging them and Auto-merging is done by Git itself 🙂.

Output:

Merge made by the 'recursive' strategy.
src/components/testComponent.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)

Conflicts :

In this case two developers 👨‍💻 have edited the same file with two different things. Due to this reason when the merge is done it is landing into a conflict as Git can't understand which changes are meant to be kept and which ones to be discarded 😔.

But don't worry ! Git is a smart system and it knows it needs to ask the user in such cases. Let's see how it looks-

Output :

On terminal :
Auto-merging src/App.js
CONFLICT (content): Merge conflict in src/App.js
Automatic merge failed; fix conflicts and then commit the result.

On Editor :

Resolving Conflicts 🤙

Now that you have faced a conflict on the codebase , let's learn how to fix the same.

❗Note: I am using VS Code while taking some screenshots. If you are on a different code editor, it may vary a bit. The editor is just a tool, so don't worry too much if you are on a different one, the concepts are important and all other things would be same.

There are two ways to fix this-

Manual : let's take the adverse case for an instance that someone is using notepad for coding. I know that's somewhat funny 😅! but for that person the editor would not make things easier 💁‍♂️.

Here's the format of the conflict through git on codebase-

<<<<<<< Your current branch
----------------current branch code-----------------
======
----------------merging branch code-----------------
>>>>>>> Merging branch

Just select the one you want to keep and remove the others. Let's take you want to go with the current branch code.

So, change this to -

--------------------current branch code--------------

Using Editor : If you are using a good editor than your editor would be helping you fixing such conflicts. Let's see a demo image how it looks on an editor.

The files which have conflicts are at Staged changes so you can either list them, or see all the files which are Red colored to get an idea of those files with conflicts.

Secondly with the use of those buttons you can select the code of which branch you want to move forward with and it would remove all other unnecessary stuffs for you on it's own.

As you are done with removing all such things just add all the files with git add . and then same procedure of commit and push ( git commit -m "commit_message" + git push )

Some Practices to avoid Conflicts ✅

Facing too many conflicts on a codebase can be a tiring task to handle. Here's some good practices to avoid such conflicts which would make your life easier -

Try to follow microservice model for big projects.
Make use of some framework to reduce reductant code and for getting controllers , middleware , web bundle etc.
Try to divide the work properly so no two developers find the need of working on same file.
A good and active communication are always important which helps in resolving or avoiding such conflicts very easily .

I know this section is something which most of you guys will think as not so important , but which you would be working over a codebase you will know why we need such stuffs.

Pull Request

I know some people would have heard it quite frequently while working in a company or open source projects. In case you haven't don't worry ! I am here to introduce you to this concept 📕.

Let's try to understand it through a diagram -

While working in a organization 🏢, there need some control over what things can go to the important branches. Like dev branch which is mostly second important branch where all the things related to next release are integrated.

Main branch is one of the branch that organization uses for CI CD pipeline with their hosted website. So, anything in that branch will go live in front of the users 💁.

So, yes only some people should be able to push any code to these critical branches. Otherwise things can go very bad.

That's where Pull Request ( PR ) comes into play. Every developer when they want to merge their code with any of these critical branches. They make a pull request through GitHub GUI and the authenticated person will check all the code and if it is correct, allows the merge to happen.

Let's see how to create one Pull Request through GitHub GUI.

Go to GitHub > Repository > Pull Request > New Pull Request

Select both branches ( Format: To <- From ) > Create Pull Request

Write PR title > PR Explanation ( It's important ) > Create Pull Request

Bonus Step 🟢( Conflict on Pull Request )

Are you are reviewer ? And got a PR like this ? Worry not let's cover this issue for you so that you can work without any worries.

To fix this use these command ( GitHub GUI will not help you here !)

Commands :

git checkout base_branch_of_PR
git merge compare_branch_of_PR
**solve conflicts as discussed in merging conflicts**
git push

Advanced Git Commands ✌

I know many people were waiting for this set of cheat sheets. So, here we are-

🖇 Create and Checkout Branch Single Command

Now you know all the beginner commands to do the same. Why not speedup this process with a single command ?

git checkout -b <name_of_branch>

Output:

Switched to a new branch 'name_of_branch'

🖇 Command to list all recent worked branches

Now you know all the beginner commands to do the same. Why not speedup this process with a single command ?

git for-each-ref --count=10 --sort=-committerdate refs/heads/ --format="%(refname:short)"

Output:

testbranch1
testbranch3
main
testbranch
feat/001

🖇 Delete origin with no Remotes

Many times we have a branch deleted from the repository but we didn't noticed it and it's local reference is still there. Use this to delete them in one go.

git fetch --prune

Output:

No Output

🖇 Delete all Local and Remote branches

Are you done with a project. Want to clear all branches and local code stored on it ? Use this -

git reset --hard

Output:

No Output

🖇 Logs of Git

Want to get a view of all the changes that are done to Git. Yes, it's possible in Git to view history.

git log

Tap Enter for more and q to exit.

Output:

commit ba40fd60c55b00ef828d6f5490d7b3d014a9d33 (HEAD -> testbranch3, origin/testbranch1, testbranch1)
Author: Your_Name < your_email >

🖇 Summary of Logs of Git

Can't get a good idea with just the title ? Use this command to get a good detailed brief over all the logs

git log --summary

Output:

commit 8ba40fd60c55b00ef828d6f5490d7b3d014a (HEAD -> testbranch3, origin/testbranch1, testbranch1)
Author: your_detail
Date: Thu Jun 9 16:51:35 2022 +0530

commit for PR

commit dc98f62f53deee69fcc9a1088b606e49fc6d3
Author: your_detail
Date: Thu Jun 9 11:10:01 2022 +0530

🖇 Compare two branches

Are you going to create a PR . What if I tell you , you can compare two branches on the terminal itself and get and idea how many changes are there between the branches. It's cool right ?

git diff <source_branch> <main_branch>

Output:

diff --git a/src/App.js b/src/App.js
index 57beeed..c3b970f 100644
--- a/src/App.js
+++ b/src/App.js
\@@ -7,7 +7,7 @@ function App() {
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
- Change2
+ Change12
</p>

🖇 Delete all Local and Remote branches

Want to delete a folder or file ? Use this command to achieve it ! Most useful while you need to execute such commands through terminal of Cloud.

git rm -r [filename/foldername]

Output:

rm 'file_location'

Thank you

You have made it till the end of this whole series 🤗. More such series are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

Git and Github Tutorial: Beginner to Advanced (Part 2)

SUCHINTAN DAS — Sun, 05 Jun 2022 03:17:12 +0000

Table of Content

📌 Introduction

📌 Git Terminologies

📌 Setup of Git and Github on System

📌 Concept of Github and Git

📌 Staging

📌 Beginner commands of Git

📌 Merging Conflicts

📌 Resolving Conflicts

📌 Some Practices to avoid Conflicts

📌 Pull Request

📌 Advanced Git Commands

📌 Thank you

Important Note

Hello fellow readers, this is a going to be second part of the series Git and GitHub Tutorial: Beginner to Advanced. Are you a new reader?

Here's the link to previous parts of the series -

👉 Part 1

Ok now let's move forward with the topic without wasting anymore moments.

Staging 📁

Hmm... I know many of you can't wait to move forward to the coding part ⭐. I would like to take 2 more minutes from you before moving into that. Believe me this is important to be understood before moving forward 💁.

Now let's understand how files 📁are moved to local system 🖥 to GitHub. Don't worry we will discuss about each step broadly and in simplest way so that no-one can mock you in future interviews in this topic 😉.

Here's is the flow of files in Git-

Untracked Files: In this stage git is unaware 🤔 of any new files 📁. We use git add . command for telling git to track that files for the next commit.
Unstaged Changes: Now as git is aware of the files for the next commit , they are now in unstaged changes. Git is tracking your modifications on those files ✅. But they are not committed to git.
Staged Changes: Git now has all the files that are part of next commit, it also had tracked all the changes on those files. The user is now ready for pushing all these to the git. We use git commit -m "commit message" to move the changes to staged by pushing the changes to git ✈.

Here many people will have one doubt in mind. Why is there this unstaged changes right? Is it just for naming a middle stage or it has any significance ❗

Answer is yes 🟢, it has and we will discuss this in merge and conflicts. We will discuss more on that topic.

Beginner commands of Git 🤟

🖇 Git Status

During day to day life we use this command very often to list all unstaged files, staged files and commits ahead of origin.

git status

Output:

On branch feat/test
Your branch is ahead of 'origin/test' by 1 commit.
(use "git push" to publish your local commits)

nothing to commit, working tree clean

🖇 Create Branch

You want to create a new branch while working over a team. Here's the command for the same.

git branch <name_of_branch>

Output:

No Output

🖇 Delete Branch

Oops! You created a branch mistakenly. Let's delete it with-

git branch -d <name_of_branch>

Output:

Deleted branch name_of_branch (was 8040fb0).

🖇 List Branches

Want to list all the branches? Here's the command-

git branch

Output:

main
*testbranch
testbranch1

denotes the current branch. And lists all the local branches. or,

git branch -a

Output:

main
*testbranch
testbranch1
remotes/origin/main

it denotes all the local and remote branches.

Note: I know some of you are worried what is the difference between remote and local branches right?

Here's the difference, remote branches are published branch that means it is created locally and also published on GitHub that means now others can see it. But local branches are not published so not visible to others.

🖇 Branch Checkout

Want to switch to another branch ? Here's the command for it-

git checkout <name_of_branch>

Output:

Switched to branch 'main'
Your branch is up to date with 'origin/main'.

🖇 Staging changes

Want to move files from unstaged to staged . Use this -

git add .

Output:

Image from Visual Studio Code editor.

🖇 Unstaging changes

Mistakenly staged a change or file. Want to redo it?

git reset <file_path>

Output:

🖇 Commit changes

Done with staging changes. Want to commit it to git?

git commit -m "commit message"

Output:

[testbranch1 e3fc475] test commit
1 file changed, 1 insertion(+), 1 deletion(-)

🖇 Push Changes

Ok now you want to send your local commits with the GitHub. So that everyone can access it?

git push

Output:

Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 351 bytes | 87.00 KiB/s, done.
Total 4 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/Shaan3110/andriew.git
e3fc475..3f61702 testbranch1 -> testbranch1

🖇 Pull Changes

Your peers made some changes on the branch? And you don't have it on your system. Let's pull it.

git pull

Output:

remote: Counting objects: 11, done.
remote: Compressing objects: 100% (5/5), done.
remote: Total 7 (delta 2), reused 0 (delta 0)
Unpacking objects: 100% (7/7), done.
From ssh://my.remote.host.com/~/git/myproject

branch master -> FETCH_HEAD Updating 9d447d2..f74fb21 Fast forward app/controllers/myproject_controller.rb | 13 +++++++++++++ 1 files changed, 13 insertions(+), 0 deletions(-)

🖇 Merge Branches

Now you want to merge changes of two branches ? In case of a feature or bugfix is done and now you want to merge it with main branch. Here's the command-

git merge <branch_name>

Output:

Updating 8040fa0..3f61702
Fast-forward
src/App.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)

🖇 Stash changes

You are working over a branch but don't want to commit those changes. The best approach would be to use stash which will delete all local changes of that branch and you can move to other branch and continue with your work.

git stash

Output:

Saved working directory and index state WIP on main: 3f61702 test commit 2

The output means that it moved to commit 2 (the latest commit) and all the local changes are removed. ( The ones which are not commited)

🖇 List of Stashed changes

Oops ! You had some important local changes that you had stashed and now you want it back? Can't remember it though when you stashed it. Let's list all the stashed changes -

git stash list

Output:

stash@{0}: WIP on main: 3f61702 test commit 2

🖇 Retrieve stash changes

You know when you stashed a change and want it back now? Let's use this command -

git stash pop

Output:

On branch main
Your branch is ahead of 'origin/main' by 2 commits.
(use "git push" to publish your local commits)

Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git restore ..." to discard changes in working directory)
modified: src/App.js

no changes added to commit (use "git add" and/or "git commit -a")
Dropped refs/stash@{0} (9b40b4498725d20bd9f82300769547e8e3e03026)

Thank you

You have made it till the end of this part. This is a series, so there will be more parts coming soon...

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

Git and Github Tutorial: Beginner to Advanced (Part 1)

SUCHINTAN DAS — Wed, 01 Jun 2022 15:06:46 +0000

Table of Content

📌 Introduction

📌 Git Terminologies

📌 Setup of Git and Github on System

📌 Concept of Github and Git

📌 Staging

📌 Beginner commands of Git

📌 Merging Conflicts

📌 Resolving Conflicts

📌 Some Practices to avoid Conflicts

📌 Pull Request

📌 Advanced Git Commands

📌 Thank you

Introduction

Hey awesome developer 👨‍💻,

If you are searching or a cheat sheet to go through for git or want to learn about git and github.

Then you are in the right place 😇 !

This is going to be my first series and please comment below about any enhancements that I can make or your feedbacks. Believe me it really helps ✍!

I will be using graphics to explain each topic in the simplest way possible so you can search by the keyword if you want to skip any portions ( in case of using it as cheat sheet ) 🤓

❗Note:- I will be using a windows machine 🖥 to do all the stuffs so there can be a case that the commands may differ if you are using some different machine. Please browse it if the command doesn't work for your system though I will try my best to provide you with the command in such scenarios. Thank you.

First let's understand what is git and some terminologies that we need to get started with it.

Git Terminologies

Commits: These are the small changes of code that are pushed to the branches.
Branches: These are the different branches of code that are running concurrently and would be merged to the main branch when completed.
Repositories: It is the project which saves all the branches and the commits.

Let's understand it easily with a diagram-

Here the tree 🌳 is the repository, the branches are the branches of the tree and the leaves 🌿 are the commits . Got it ?

Let's now move to the next part which is setting up git and github on your system.

Setup of Git and Github on System 👨‍💻

Create an account on Github

Go on 👉 https://github.com/

Click on Sign up and create an account ✅.

Now create a new repository by clicking on New button near Repositories.

Type a name for the Repository and click on Create Repository to create one.

Click on the copy to clipboard icon to copy the link #️⃣.

System Specific Commands ✍

For Windows

Download Git from 👉 https://git-scm.com/download/win and install it.

For Mac

Use this command to download git 👉 brew install git

For Linux (Ubuntu)

Use this command to download git 👉 sudo apt-get install git

Don't forget to put git folder location on environment variables for windows. To add it go to Environment Variables > (System Variables) Path > Paste C:\Program Files\Git\cmd if you haven't installed it on any other location.

Now use these commands to clone the repository on your system 👇

mkdir <project_name>
git clone <repository_url>

The repository_url is the url that you copied to your clipboard from Github.

Great, you are done with the setup you needed for git 🙂. Now let's understand the concept of Git and Github on a grass root level 🌱.

Concept of Github and Git 📖

Before digging into git and github we need to understand , CVCS and DVCS to get the hang of the systems of version control.

There are two types of version control-

Central Version Control System ( CVCS ) - In this system there is a server where all the commits are saved on internet and every single commit are sent to the server through internet.
Distributed Version Control System ( DVCS ) - In this system there is a main server which is on internet but in addition to this there is one more server which is the user's system so every commits are saved on the users system and history of all commit's are on user's own server and while pushing it get's sent to the main server through the internet.

Now I know many of you are wondering why we are studying these version control system. How is this connected to Git and Github. Right?

So, the answer is Git follows DVCS so Github, GitLab and all other services based on Git also does the same.

I know ! I know ! There are many questions that are popping in your mind so let's talk about Git now. How it really works❓

Git is a service that is based on DVCS, it maintains a remote server on your system. That means your system is also a server while you are using git. As you make a commit , the changes are push to your remote server. You knew that ?

But if you push the commit's then those commit's are sent to Github through internet. Yes here Github is the main server which has all the commits saved and as you push the commit's someone else can pull the changes from main server to their system. Got it?

Links 📌

Coming soon...

All the links to future blogs of the series will be listed here.

We will be covering all beginner and advanced commands, along with various visual graphics ✌.

If you want to get the notification 🛎 of the upcoming blogs, don't forget to follow 👥 and subscribe.

Thank you 🙏

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

What skills should be learned to earn an internship?

SUCHINTAN DAS — Wed, 25 May 2022 13:29:18 +0000

During couple of months, our university is having their placement season ( they are offering internships in place of job offers ). Till now I haven't been provided with any offers in hand.

What do you guys think I should work upon to grab an internship ?

A short brief about me, I am a full stack developer with MERN stack and have till now worked with 4 companies as an intern adding up to 1 year of experience with these stacks.

ESLint and Prettier

SUCHINTAN DAS — Sat, 21 May 2022 12:30:17 +0000

Hello amazing folks!🙂

Let's discuss something interesting today.

Let's understand what and why about Eslint and Prettier.

Imagine working over a project with more than 10 developers to achieve a vision 🧑‍💻. After 3 months you realize how messy things are now 🤒.

Funny part is even the person who wrote the code is confused in their own code 😂.

Want to avoid such scenario ? 😶

Form a structure which everyone will follow while writing their codes to make it easily understandable by everyone ✌. Sounds easy right ? But will everyone follow those things that seriously 🤔!

Think about someone getting added to the team. The person is a little freedom lover and mostly forgets to follow those set of rules. 😐

Hmm... code getting messed slowly right ?

Ya that's what Eslint and Prettier comes into play 😃. Eslint and Prettier are used to format the whole codebase into some set of rules.

Like there should not be any console log while pushing any code to production . Mainly done to ensure there is no printing of sensitive data on the logs.

Want to have a peak on how it looks ?

{
    "semi": true,
    "tabWidth": 2,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "jsxBracketSameLine": true
}

Here's a peak of the configuration of the Prettier . You can see there are rules which can be made true based on your need.

Want to read more 👉 https://prettier.io/docs/en/index.html

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

A small peak of Eslint , you can set types as warning or error. Forcing developers to follow a proper structure of coding.

I know ! I know !

Many people will think why force some rules while coding to developers. Let them code freely without any rules and restrictions 🤔.

I also used to believe the same !

But when I was working over a project with other developers, I understood how difficult it becomes when you have to read others messy code 🙍‍♂‍.

I know maybe it's sometimes painful but it's worthed. As clean coding is always tough for developer but when the project becomes large it becomes very easy for new developers and the existing developers to work on it 😉.

I would say. Just try it , I can give you guarantee you will fall love with it 👍.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

Why Coding?

SUCHINTAN DAS — Mon, 09 May 2022 14:12:49 +0000

Why ?

Hmm... 🤔

Why everyone in today's date are so crazy about coding , what it offers really which is making people so fond of it ?

Let's find out !

Before understanding what coding offers , let us first understand what every student goes through during their study cycle.

During our schools we used to have subjects like

Physics

Mathematics

Chemistry

and so on...

Right?

Can you visualize one common thing regarding all these subjects?

Yes, these all these subjects have a lot of problem to work upon but all of them requires you to have a good infrastructure of lab
😔 to get a practical experience of their knowledge.

Point 1

Here's one of the edge that coding provides to the students. The subject is itself very practical based which gives the students many rooms for applying their own knowledge to solve a problem. You just need a laptop with a good internet to start with.

Point 2

Believe it or not, everyone of us want to earn something with our skills. Some skills are not that rewarding and some are very.

Coding falls into the very rewarding skill if you are good at it.

The demand for good developers are still at it's peak and they provide individuals a very good chance for career growth 😮.

Point 3

Till now we got to know that coding provides us room for using our knowledge and also is very rewarding but what is the main reason why it's so able to attract so many people 🤔 ?

Here's the last point, coding gives you the freedom to use your creativity. Believe it or not, everyone of us loves to apply our knowledge and creativity while learning anything.

Mugging up things and solving numerical have hardly been exciting for students.😮‍💨

Coding is the heaven for those people who wanted to work on something that pushes them to use their creativity and knowledge💁🏻‍♂️

For more content stay tuned !

Keep coding #️⃣ , keep rocking 🚀