DEV Community: Savitha Gollamudi

Super() vs Super(props)

Savitha Gollamudi — Sat, 30 Jan 2021 05:44:40 +0000

TL;DR 🚀

If you want to use this.props inside the constructor of derived class, use super(props).

While checking react code, you might have come across a line super(props), sometimes super(). Ever wondered what's the difference between two?
Why do we need to pass props ? Do we always need to pass props ?

Consider the example below.

import React, { Component } from 'react';
class Game extends Component {
    constructor(props) {
      super(props);
        this.state = {
          player : "Robin",
          score : 25
        }
    }
    render() {
        return (
            <div>
                <h1>Cricket</h1>
                <p>Current Player :{this.state.player}</p>
                <p>Current Score : {this.state.score}</p>
            </div>
        );
    }
}
export default Game;

Every time we are writing a component, we are extending it from React component (The base component class) and that's really important if we don't do that we would be missing a ton of react functionality.

Let's step out of react world for just a moment and let's mimic our own component class

class Component {
    constructor() {
        console.log("INSIDE COMPONENT CONSTRUCTOR")
    }
}
class Game extends Component {
    constructor(){
        console.log("INSIDE GAME CONSTRUCTOR")
    }
}

Lets make a new game

let cricket = new Game();

So you might think, when we initialized a new game, a constructor is called and that should be printed out, unfortunately we get an error
says : Must call super constructor before accessing 'this' . Loosely translated, call a super constructor in derived class before basically doing anything.

Problem is we are extending the base class but we never actually called its constructor and that's super important to do in the derived class's constructor (Inside Game's constructor here), we need to make sure that we're calling the class (it's constructor) we are extending, especially in React because that's how we call all the magic setup stuff that React does and takes care of out of the box for us. so we call super()

class Game extends Component {
    constructor(){
      super()
        console.log("INSIDE GAME CONSTRUCTOR")
    }
}

Now try to instantiate again.

let cricket = new Game();
//output:
  //INSIDE COMPONENT CONSTRUCTOR
  //INSIDE GAME CONSTRUCTOR

What does super(props) do then?

Lets look at this example:

import React, { Component } from 'react';

export default class Food extends Component {
    render() {
        return (
            <div>
                <h1>HI I AM FOOD COMPONENT</h1>
            </div>
        );
    }
}

import React, { Component } from 'react'
import Food from "./Food"
class App extends Component {
  render(){
    return (
    <div>
      <Food item = "PineApple" nutrition="10"/>
    </div>);
  }
}

export default App;

We are passing two props to Food component. You can think of it like we are creating two objects for Food class new Food({item : "pineapple", nutrition: "10"})

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super();
        console.log(this.props); // undefined.
    }
    render() {
        return (
            <div>
                <h1>HI I AM FOOD COMPONENT</h1>
            </div>
        );
    }
}

We get output as Undefined even though we have props. OK, what's happening here is if we want to access this.props in the constructor, we have to pass props in super (super(props)). This is kind of bizzare, lets consider this example.

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super();
        console.log(this.props); // undefined.
        console.log(props) // {item:"pineapple", nutrition:10}
    }
    render() {
        return (
            <div>
                <h1>{this.props.item}</h1> /*Prints out pineapple*/
            </div>
        );
    }
}

However if you do

import React, { Component } from 'react';

export default class Food extends Component {
    constructor() {
        super(props);
        console.log(this.props); // {item:"pineapple", nutrition:10}
    }
    render() {
        return (
            <div>
                <h1>{this.props.item}</h1> /*Prints out pineapple*/
            </div>
        );
    }
}

To conclude, If you want to use this.props inside constructor, you need to pass props in super(), otherwise it’s okay to not pass props to super() as we see that irrespective of passing it to super(), this.props is available inside render() function.

Hopefully that was not convoluted and crazy, until next time. Happy Coding! 🎉 💻

How to host react projects on GH Pages?

Savitha Gollamudi — Wed, 21 Oct 2020 11:26:25 +0000

Want to host a react website? You cant afford paying bills for each and every project?

Well, Don't worry now you can do that for free with the help of Github Pages. Using GH Pages you can host any website for free in a secured way.

When you host any static website or blog on github servers, basically your domain name would be in this format: {username}.github.io/{repo-name}, if you wish to host it on your own domain, no problem you can do that as well.

In this post let's see how to host a react project on GH Pages.

Before continuing further, I assume that you know what is Github and how to create a react app. Let's get started...

Create a repository

First things first, create a repository in your Github profile. For instance I'd like to create an app with name deploy-react-app

Note: If you have already developed a react app and pushed it onto Github you can skip this section..

Create react app

After creating a repo, Let's create a react app usingcreate-react-app.

npx create-react-app deploy-react-app
cd deploy-react-app

Once you created a react app and changed into its directory. Run the following commands in terminal/command prompt.

git init
git add -A
git commit -m "initial commit"
git remote add origin https://github.com/username/deploy-react-app.git
git push origin master

Note: replace username with your own Github username and if you are using ssh instead of https for Github repo add git remote add origin git@github.com:username/deploy-react-app.git

Once you pushed your code to Github...

Deploy app on GH Pages

Install gh-pages as dev-dependency of react app.

   npm install gh-pages --save-dev

Add the homepage property in your package.json file. homepage attribute value should be String. http://{username}.github.io/{repo-name} (username must be your Github username and repo-name must be your GitHub repository)

   "homepage": "https://g-savitha.github.io/deploy-react-app"

Add the predeploy and deploy properties with existing scripts property in your project's package.json

   "scripts": {
   "start": "react-scripts start",
   "predeploy": "npm run build",
   "deploy": "gh-pages -d build",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
   },

The predeploy script initiates after running our deploy script, which bundles our application for deployment.

Deploy your application to GH pages.

   npm run deploy

After succesfully deploying the application, Open your github repository. Go to Settings tab of the repository, scroll down until you reach Github Pages section and choose gh-pages branch as the source.

BOOM! 💥 your website is hosted on Github pages now.

Other than Github, you can host your website on Heroku, Vercel, Firebase, Netlify and more. Try out as many as you can to determine which best aligns with your deployment requirements. After all they're free to use 😃.

For a good next step, try to add custom domains to your deployed application. It’s good to have a distinctive domain for projects.

Until next time, Happy coding! 💻 🎉

Git : Sync forked repo with original repo

Savitha Gollamudi — Fri, 11 Sep 2020 06:55:29 +0000

Why should I do this? 😏

Before submitting any pull request, syncing your forked repository with original repository is an important step to perform, as you may want to get the bug fixes or additional features to merge with your code since the time you forked the original repo.

But I can create a PR and make changes myself instead.. 💁

You can, but that adds an extra commit into your forked repo instead of matching it with the original repo.

Inorder to sync without any additional changes as a part of the process,

Configure the original repo as upstream remote.
Merge changes from original repo
Push the merged version back to Github.

Adding original repo as an upstream

Open the forked repo in your Git Bash or command prompt or terminal.
List the current configured remote repositories

git remote -v
> origin  https://github.com/<YOUR_USERNAME>/<YOUR_FORK>.git (fetch)
> origin  https://github.com/<YOUR_USERNAME>/<YOUR_FORK>.git (push)

Add the original repo as upstream repo

git remote add upstream https://github.com/<ORIGINAL_OWNER>/<ORIGINAL_REPOSITORY>.git

Verify the new upstream repo for your forked repo

git remote -v
> origin    https://github.com/<YOUR_USERNAME>/<YOUR_FORK>.git (fetch)
> origin    https://github.com/<YOUR_USERNAME>/<YOUR_FORK>.git (push)
> upstream  https://github.com/<ORIGINAL_OWNER>/<ORIGINAL_REPOSITORY>.git (fetch)
> upstream  https://github.com/<ORIGINAL_OWNER>/<ORIGINAL_REPOSITORY>.git (push)

You can now pull the changes from original repo.

Merge changes from upstream

Open the forked repo in your Git Bash or command prompt or terminal.
First things first, fetch the changes (branches and their commits) from upstream

git fetch upstream
> remote: Counting objects: 75, done.
> remote: Compressing objects: 100% (53/53), done.
> remote: Total 62 (delta 27), reused 44 (delta 9)
> Unpacking objects: 100% (62/62), done.
> From https://github.com/<ORIGINAL_OWNER>/<ORIGINAL_REPOSITORY>
>  * [new branch]      master     -> upstream/master

Note : Commits to the original repo(master) will be stored in a local branch, upstream/master

Make sure you are on your local (fork's) master branch

git checkout master
> Switched to branch 'master'

The last step, which achieves our goal: Merge changes from original repo (upstream/master) into your forked repo(master).

git merge upstream/master
> Updating a422352..5fdff0f
> Fast-forward
>  ...

The above step brings changes of forked repo in sync with original repo, without losing any uncommited changes :D

Optional Step

If you made changes to your repo and want to push them back to Github

git push origin master

To sum up:

These are the only commands you need to sync your forked repo with original repo 🚀

git remote add upstream https://github.com/<Original Owner Username>/<Original Repository>.git
git fetch upstream
git checkout master
git merge upstream/master
git push

Source : Syncing a fork

LeetCode July Challenge -1: ArrangeCoins -solution explained

Savitha Gollamudi — Thu, 02 Jul 2020 18:03:21 +0000

Question : Arrange Coins

You have a total of n coins that you want to form in a staircase shape, where every k-th row must have exactly k coins.

Given n, find the total number of full staircase rows that can be formed.

n is a non-negative integer and fits within the range of a 32-bit signed integer.

Example 1:

n = 5

The coins can form the following rows:
¤
¤ ¤
¤ ¤

Because the 3rd row is incomplete, we return 2.

Example 2:

n = 8

The coins can form the following rows:
¤
¤ ¤
¤ ¤ ¤
¤ ¤

Because the 4th row is incomplete, we return 3.

Refer the problem here

Solution:

We can solve this problem in 3 different ways.

Basically, the main idea to solve this problem is same for all 3 approaches. If you observe carefully, for each row K is in increasing order.

Brute Force approach:

Lets start by taking k = 0 and then continue linearly.
increment k by 1 and decrement k coins from n
loop until n value is greater than 0.

let arrangeCoins = function (n) {
  let k = 0;
  while (n > 0) {
    k++;
    n -= k;
  }
  return n === 0 ? k : k - 1;
};

Time Complexity : O(n)

Below 2 approaches follow a similar pattern.

Let's assume we can form K full rows, we get a sum of K terms.
1 + 2 + 3 + 4 ... + k = Arithmetic progression , sum of K terms [k(k+1)/2]

the equation would be k(k+1) / 2 <= n

We need to find the maximum K value which satisfies the above equation.

Since our series is in incremental order of coins. We can use the binary search approach to find the maximum value of K

Binary Search Approach:

let arrangeCoins = function (n) {
  let low = 0,
    high = n;
  let k, current;

  while (low <= high) {
    k = parseInt(low + (high - low) / 2);
    current = (k * (k + 1)) / 2;
    if (current === n) {
      return k;
    }
    if (n > current) {
      low = k + 1;
    } else {
      high = k - 1;
    }
  }
  return high;
};

Time complexity : O(logn)

Math Approach (Efficient approach):

Lets look at our equation once again.

k(k+1) / 2 <= n

Let's solve this

k(k+1) <= 2n

Add 1/4 on both sides of the equation.
So that, left side of the equation can be formed into (a+b)^2

(k^2 + k + 1/4) <= (2n + 1/4)

(k + 1/2)^2 <= (8n+1)/4

k <= sqrt((8n+1)/4) - 1/2

Our final equation would be

k <= (sqrt(8n+1) -1)/2

Now using this formula, our code would be:

let arrangeCoins = function (n) {
  return  parseInt((Math.sqrt(8 * n + 1) - 1) / 2);
};

Time Complexity: O(logn)

Refer source code of other problems