DEV Community: Mubasshir Ahmed

Shell Scripting CheatSheet

Mubasshir Ahmed — Fri, 17 Mar 2023 05:33:45 +0000

echo hello : to print anything.
echo $PATH: to show all the paths in my machine.
which echo:
pwd: present working directory. it will show my current directory.
ls -l : will print folder structure with additional info.
mv test new_test : rename test folder to new_test
cp test.csv new_test : it will copy test.csv to new_test directory cp ${selected file or directory}${directory name where file will be moved}
rm full_doc_test.csv : to remove a file
rmdir test : to remove empty directory
man ls : it will show the manual about ls.
ctrl+l : to clear terminal
echo hello > hello.txt : it will create a txt file and write hello on it .
cat hello.txt : it will print the content of file .
cat < hello.txt : it will open hello.txt, and takes its content as input of cat. and cat will show it's output.
cat < hello.txt > hello2.txt : it will open hello.txt, and takes its content as input of cat and then wrtie input to hello2.txt
ls -l / | tail -n1: tail-n1 print last line . | this name is pipe . pipe takes the outpur of the program to the left and make it input to program is in right . ls-lshow folder structure and pipe takes it's output and make it as input of tail -n1 . pipe wires left side program to right side program .
curl : a command line tool that enables data exchange between a device and a server through a terminal
curl - head - silent google.com

cd /sys showing kernal parameter

cd /class-> it will show devices directory that machine can interact with from where I can modify device like pc brightness etc .

state in react

Mubasshir Ahmed — Thu, 11 Mar 2021 19:46:05 +0000

Suppose, you don't have a girlfriend or boyfriend. So you don't have any opportunity to send a love letter. In this situation, you can create a love letter for yourself and modify it later. When you modify your own love letter that is written for yourself, it will not affect anything. Now we can start with the state object. state is a built-in object in React. It allows the component to create and manage their own data same as your love letter for yourself. The state doesn't allow passing data from one component to another. Why do you need to pass your love letter when you are single? - You can manage and create data internally. Let's build a counter using state.

import React from 'react'
class Test extends React.Component {    
  constructor(props){
    super(props)
    this.state = {
      count:0
    }
  }
  increment(){
    this.setState({
      count:this.state.count+1
    })
  }

  render() {    
      return (      
          <div>      
            <p>{this.state.count}</p>  
            <button onClick={()=>{this.increment()}}>increment</button>
          </div>    
      );  
  }
}
export default Test ;

when you click the increment button, the state will increase.

output :

btw change on state happens based on user input. when React gets informed about the change it immediately re-render the DOM. But it's re-render only responsible components with the updated value. It makes react faster. Once upon a time state was only used for class components. But after introducing React Hooks state can be used in class and functional components.

props in React

Mubasshir Ahmed — Thu, 11 Mar 2021 18:06:59 +0000

To pass a love letter from your house to your girlfriend's house you need a medium. Same in react you need a medium to pass data from one component to another component.

In function, if we want to pass anything from one function to another function, we use parameter. Example.

void printNumber (int number){
 cout<<number<<endl;
}

int main(){
int Number = 28;
printNumber(Number);
return 0;
}

In C++, in our printNumber() function we receive data from main function . Here we use "number" use as a parameter .

ReactJS are all about components. We need to pass data from one component to another. For this, we need to use props. props is a keyword of react. it stands for properties. props are used for passing data from one component to another.

But unfortunately, reactJS allows only side love. You can only send data to your girlfriend but you are not allowed to receive it. In react one side love allows us to pass data from parent component to child component. It's called unidirectional data flow.

Code :

import React from 'react'
const ParentComponentData = "Data From Parent Component";
class ParentComponent extends React.Component {
  render(){
    return (
      <ChildComponent name={ParentComponentData}/> 
    )
  }
};
const ChildComponent = (props) =>{
return <div>I get {props.name}</div>
}

export default ParentComponent ;

Here ParentComponent passes data to ChildComponent. ChildComponent accesses data using {props.name} .

 Output: I get Data From Parent Component

Fetch Data in React Cheat Code

Mubasshir Ahmed — Wed, 10 Mar 2021 18:58:29 +0000

API credit goes to : johnsmilga (https://www.johnsmilga.com/)

1) fetch data using fetch api :

import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data
  useEffect(() => {
    fetch(url)
    .then(response => {
      if(response.ok){
        return response.json()
      }
      throw response;
    })
    .then(tours => {
      settours(tours);
    })
    .catch(error => {
      console.error("Error Fetching",error);
    })
    .finally(()=>{
      setloading(false)
    })
  }, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

2) using Axios.
firstly install axios using this command "npm install axios
"


import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data
  useEffect(() => {
  axios(url)
  .then(response =>{
    settours(response.tours)
  })
  .catch(error => {
    console.error("Error Fetching",error);
  })
    .finally(() => {
      setloading(false)
    })
}, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

2) using async/ await


import { useState, useEffect } from 'react';

const url = 'https://course-api.com/react-tours-project';

function App() {
  const [tours, settours] = useState([])
  const [loading, setloading] = useState(true)

  // fetching data

const fetchTours = async () => {
  setloading(true)
  try{
    const response = await fetch(url)
    const tours = await response.json()
    setloading(false)
    settours(tours)
  }catch(error){
    setloading(false)
    console.log(error)
  }
}

useEffect(() => {
  fetchTours()
}, [])

if(loading){
    return(
      <main>
        <Loading/>
      </main>
    )
  }

  return (
    <div className="App">
     <Tours/>
    </div>
  );
}

export default App;

Simple application of useState() Hook react

Mubasshir Ahmed — Wed, 10 Mar 2021 17:30:07 +0000

Here, I store all the data as an array of objects in the data.js file. I pass all data to our app.js using useState() hook. then in the “Course List” component, I iterate over data using the map() method.

data.js file where I store data of udemy best seller javascript course .

export default [
    {
        id: 1,
        name: 'The Complete JavaScript Course 2021: From Zero to Expert!',
        author:'Jonas Schmedtmann',
        price: 129.99,
        image:
            'https://img-a.udemycdn.com/course/240x135/851712_fc61_6.jpg?Yc2ybPX7AXeZKeeSkrtc1R4f5UDNui9HwUTT-_bFBVGfjlZ5t6Q87GuBqjm2THKor3xVFGJuBV87636XVT1yIzlnzVzO8A2Et_jFwsI865a_MWavua2Pu7AhOt95',
    },
    {
        id:2,
        name:'JavaScript - The Complete Guide 2021 (Beginner + Advanced)',
        author:'Maximilian Schwarzmüller',
        price:'129.99',
        image:'https://img-a.udemycdn.com/course/240x135/2508942_11d3_3.jpg?ATh2D-3PrfQZU38ORJX3t_Vm_ZGiuR-lEviSjc2rkIO-jU6b5pasJ3EkhGO3vSbBuxK4W9wq6YQ0_nyMDplQ8ddiqptXaSo4r57pYC16zv8nFDgEKlLBjehBsVV05w'
    },
    {
        id:3,
        name: 'JavaScript: Understanding the Weird Parts',
        author:'Anthony Alicea',
        price:'129.99',
        image:'https://img-a.udemycdn.com/course/240x135/364426_2991_6.jpg?CYfpgUQsrAiRBXlmHWcIdiJX4sHB8ICefFSI0cSEnZE14FhgiyZFPl999ZKiCH6KqCIOvwOwp2AcUOA9Q-lcHfoIoOCjE0Xu41nAPOgKDXlqIvExfy5ilaWNhQPN'
    },
    {
        id:4,
        name: 'Modern JavaScript From The Beginning',
        author:'Brad Traversy',
        price:'129.99',
        image:'https://img-a.udemycdn.com/course/240x135/1463348_52a4_2.jpg?xBY1XF_HTQKvN0p7DR2wSBiRcqUvm2jBDLEOjq_uDWi_aVCCmREIH2XhZuO460Ro-xrQVQzaAxOePdfpBbNXKF8OMnInKyobXA-lERmot2vu8h1148TNQArrw_l4GA'
    },
    {
        id:5,
        name: 'The Modern JavaScript Bootcamp',
        author:'Andrew Mead',
        price:'84.99',
        image:'https://img-b.udemycdn.com/course/240x135/1470810_a8b0.jpg?secure=fSTIwXbZaNdTiu8G5waX3w%3D%3D%2C1615446574'
    },


];

from data.js I pass array of object to the app.js file .

app.js

import { useState } from 'react';
import './App.css';
import CourseList from './Components/CourseList';
import data from './data'
function App() {
  const [Courses, setCourses] = useState(data);
  return (
    <>
    <main>
       <div>
          <h2>Best Selling JavaScript Course List</h2>
          <div>
            <CourseList Courses={Courses} />
          </div>
       </div>
    </main>
    </>
  );
}

export default App;

using useState() hook we store our data. then pass it to "CourseList.js"
Here to use map function to iterate over data .

CourseList.js

import React from 'react'

const CourseList = ({Courses}) => {
    return (
        <>
        {
            Courses.map((course)=>{
                const {id,name,author,price,image} = course
                return(
                    <div className="container" key={id}>
                       <div className="course-list">
                            <img src={image} alt={name}></img>
                            <div>
                                <p className="course-name">{name}</p>
                                <p className="author">{author}</p>
                                 <div className="pEnroll">
                                    <p className="price-tag"> ${price} </p>
                                    <button>Enroll Now</button>
                                 </div>
                            </div>
                       </div>
                    </div>
                )
            })
        }
        </>
    )
}

export default CourseList

full Source Code : https://github.com/mubasshir00/iterate-over-data-using-react

useEffect() ReactJS long story short

Mubasshir Ahmed — Sat, 06 Mar 2021 11:42:07 +0000

useEffect() allows us to fetch requests, manipulate DOM, using timer function etc.

useEffect(() => {
   .......// logic
},[dependencies])

useEffect() hook accepts two arguments .
1) callback function
2) dependencies
callback contains side-effect logic.
put all your side effect logic into the callback function, then use the dependencies when you want to side effect to run.

reference: https://dmitripavlutin.com/react-useeffect-explanation/

Overview of ReactJs

Mubasshir Ahmed — Wed, 03 Mar 2021 19:56:37 +0000

ReactJS is an open-source front-end library. ReactJS is based on components. Components are the building block of ReactJS. Basically, the component is a JavaScript function or class which can take input and returns React Element that describes UI or output.

ReactJS uses virtual DOM to view data.

Virtual DOM is a programming concept where an ideal, or "virtual" representation of UI is kept in memory and synced with real DOM. Virtual DOM is fast because it only changes individual DOM elements instead of reloading the complete DOM every time.

WebPack: Webpack is a static module bundler, the main purpose is to bundle javascript files for usage in a browser. When WebPack processes your application, it internally bundles a dependency graph that maps every module your project needs and generates one or more bundles.

String find C++

Mubasshir Ahmed — Wed, 03 Mar 2021 06:21:05 +0000

Problem Link: https://codeforces.com/problemset/problem/96/A
We can solve this problem using the string find() function.

#include<bits/stdc++.h>
using namespace std ;
int main()
{
    string s ;
    cin>>s;
    string s1 = "0000000";
    string s2 = "1111111";
    size_t found  = s.find(s1);
    size_t found1 = s.find(s2);
    if(found!=string::npos || found1!=string::npos){
        cout<<"YES"<<endl;
    }
    else {
        cout<<"NO"<<endl;
    }
    return 0;
}

here "size_t" is the signed integer data type. "size_t" can store the maximum size of a theoretical object of any type.
reference: https://en.cppreference.com/w/c/types/size_t
Here we check substring isfound or not in the given string.
Then if the string found then print Yes.

string::npos is a constant representing a non-position. it returns my function find when pattern was not found.

Arithmetic Operator

Mubasshir Ahmed — Sat, 27 Feb 2021 19:21:22 +0000

Addition operator ( + ) Example : 10+10 = 20
Subtraction operator ( - ) Example : 22-10 = 12
Multiplication Operator ( * ) Example : 4*5 = 20
Division Operator ( / ) Example : 12/2 = 6
Remainder/Modulo operator ( % ) Example : 5%2 = 1
Exponent Operator ( ** ) Example : 5**2 = 25 (same as 5*5)

Application of arithmetic operator.

Find any digit from a number.
Suppose we have a number 53425. Print 3rd digit from this number.
Here we use the arithmetic operator.
53425 % 1000 = 425
425 / 100 = 4 ( 4 is the third digit of this number)

var res = Math.floor((n % 1000) / 100);

another example :
Print 3rd and 4th number digit from 53425.
53425 % 1000 = 425
425 / 10 = 42 ( Here 4 and 2 are the third and 4th digit of this number )

   var res = Math.floor((n % 1000) / 10);

X++ , ++X ,X-- , --X in JavaScript

Mubasshir Ahmed — Fri, 26 Feb 2021 13:12:35 +0000

X++ means that returns X or executes the statement first then increments X.
++X means that increments X first then returns or executes the statement.

var x = 10 ;
var y = x++ ; // y = 10 , x = 11
var z = ++x ; // z = 12 , x =12

and for decrement?
For decrement, it's the same as increment.

var x = 10 ;
var y = x-- ; // y = 10 , x = 9
var z = --x ; // z = 8 , x = 8

Implicit Conversion JavaScript

Mubasshir Ahmed — Thu, 25 Feb 2021 18:20:48 +0000

res = '6' + 2 = output : '62' ( String + Number = String )
res = '6' + true = output : '6true' (string + boolean = string boolean )
res = '6' + null = output : '6null' (String + null = String null)
res = null + '6' = output : 'null6' (null + String = null String)
res = null + null = output : 0 ( null + null = 0)

res = '6' - '2' = output : 4 (String - String = Number)
res = '6' - 2 = output : 4 (String - Number = Number )
res = '6' * 2 = output : 8 (String * Number = Number )
res = '4' / 2 = output : 2 (String / Number = Number )

res = 'b' + 'a' + + 'a' + 'a' = output : baNaNa
(String + String + NaN + String + String)
res = ++ 'a' = output : NaN (NaN + String = NaN)

Boolean ('Hello') => true
Boolean (NaN) => False
Boolean ('NaN') => True
Boolean (null) => False

Data Type and Type Casting

Mubasshir Ahmed — Thu, 18 Feb 2021 17:59:40 +0000

DailyJS

There are 5 different data types that contain values.
1) String
2) Number
3) Boolean
4) Object
5) Function
There are 6 types of objects.
1) Object
2) Date
3) Array
4) String
5) Boolean
There are two types that don't contain values.
1) NUll 2) Undefined

Type Casting

There are two types of typecasting.
1) implicit conversion.
2) Explicit conversion.

implicit conversion :

In certain situations, javascript automatically converts one data type to another.

var res ;
res = '3' + 5 //output '35'
res = '3' + true  //output : '3true'
res = '3' + null //output  : '3null'
res = null + '3' //output  : 'null3'
res = null + null //output : 0


res = '10' - '3'  // output : 7 
res = '10' - 3    // output : 7
res = '10' * 3    // output : 30
res = '10' / 2    // output : 5

res = 'hello' - 5  // output : NaN

res = '7' - true   // output : 6 
res = '7' + true   // output : 8

Explicit Conversion

In Explicit one data type convert to another manually.

// string to number 
res = Number('324')  // 324
res = parseInt('20.01')  // 20
res = parseFloat('20.01') // 20.01

//convert to string
res = String(324)