Forem: Heet Shah

What is THIS keyword in JavaScript? - Part 2

Heet Shah — Sat, 07 Nov 2020 13:19:56 +0000

What is THIS keyword in JavaScript?

Part 1 - What is this and it's different types of binding

Part 2 - Arrow function and this keyword

What is THIS keyword in JavaScript?
Part 1 - What is this and it's different types of binding
Part 2 - Arrow function and `this` keyword

In the previous article, we had discussed what this keyword means in general and different types of binding. In this article, we will see what this keyword means in the arrow function.

You may have learned that an arrow function does not have their own this. Instead, this is determined lexically. Let us first understand why do we need this to bind itself lexically.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
        this.cars.forEach(function (car) {
            console.log(`${this.name} owns ${car}`);
        })
    }
}

person.showCars();
/*
Output:
undefined owns Aston Martin
undefined owns Maserati
undefined owns BMW
undefined owns Alfa Romeo
*/

If you have understood the previous article then you shouldn't be surprised at seeing "undefined" in the output. I have explained it earlier that this will bind itself by default to a global object if there is nothing to the left of the dot (Remember the thumb rule). In forEach loop we are passing an anonymous function which is by default bind to a global object when it is invoked. So what we want is to tell this inside the callback to refer to parent this (which points to person object).

Below is the solution that we can use to avoid such type of behavior without using an arrow function.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
        this.cars.forEach(function (car) {
            console.log(`${this.name} owns ${car}`);
        }.bind(this))
    }
}
person.showCars();
/*
Output:
John Green owns Aston Martin
John Green owns Maserati
John Green owns BMW
John Green owns Alfa Romeo
*/

We have bound our callback to the current object (person) so at the time of invocation,this will remember that person is the object to which I am bind to. So we've seen how bind solves the issue then why do we need an arrow function? If the above code is read intuitively then you will expect this inside the callback in the forEach loop to be bound to the person object viz. to its parent context. This is known as lexical binding which is just like variable lookup, the javascript interpreter will look to its parent this if it is inside the arrow function.

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: function () {
   // Here this will bind itself to person object
        this.cars.forEach((car) => {
   /*
   Here this will bind itself to 
   parent which itself is bind to person object 
   */
            console.log(`${this.name} owns ${car}`);
        })
    }
}
person.showCars();
/*
Output:
John Green owns Aston Martin
John Green owns Maserati
John Green owns BMW
John Green owns Alfa Romeo
*/

So once again always remember if you see the this keyword inside the arrow function always look up the parent this.
Let's see one more interesting example:

const person = {
    name: "John Green",
    cars: ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"],
    showCars: () => {
        this.cars.forEach((car) => {
            console.log(`${this.name} owns ${car}`);
        })
    }
}
person.showCars();

If you run the above code you will get an interesting error this.cars is not defined. Remember you will never use the thumb rule which we had discussed earlier in the previous article to determine the this keyword inside the arrow function.
As we know that this is determined lexically inside an arrow function in the above code this inside the showCars will point to the global object. Since this.cars is not defined globally hence it will throw an error.
That's it! This is all you have to know about this keyword in javascript. Also, remember one thing, always keep practicing and keep your fundamentals clear which will help you in the long run.

What is THIS keyword in JavaScript? - Part 1

Heet Shah — Mon, 02 Nov 2020 14:00:24 +0000

What is THIS keyword in JavaScript?

Part 1 - What is this and it's different types of binding

Part 2 - Arrow function and this keyword

What is THIS keyword in JavaScript?
Part 1 - What is this and it's different types of binding
Part 2 - Arrow function and `this` keyword

You will encounter this more often and as a developer, it is important to understand how it works.

This topic will be divided into two articles:

What is this keyword and different types of binding.
Arrow function and this keyword.

this keyword is nothing but a reference to an object. The value of the reference depends upon the current execution context (means how and by whom the method is called). I know this sounds confusing so let us take an example and I will explain to you how to find to whom this keyword is referring.

let fullName = function () {
    return `${this.firstName} ${this.lastName}`;
};
let Person = function (firstName, lastName) {
    return {
        firstName,
        lastName,
        fullName
    };
};

let person1 = Person("Dwight", "Schrute");
let person2 = Person("Jim", "Halpert");

console.log(person1.fullName()); // Dwight Schrute
console.log(person2.fullName()); // Jim Halpert

You may have got the answer but it is also important to understand how? It's easy and I personally remember with this thumb-rule - Always look at the owner object(by whom the method was called) or look at the left of the dot. Here, in the first output person1.fullName() the object viz. left to the dot is person1 so this inside the fullName method will refer to the person1 object and will return it's first and last name. This type of binding is called implicit binding and will explain more about it later.
Now we have understood some basics about this keyword, let's learn about different types of binding.

1. Implicit binding

You will see this type of binding in most of the codebases and it's important to understand how it works. Thumb-rule which we had discussed earlier applies to this type of binding. Let us take an example to see how our thumb-rule works for the below type of scenario:

let fullName = function () {
    return `${this.firstName} ${this.lastName}`;
};
let person1Friend= {
    firstName: "Angela",
    lastName: "Martin",
    fullName
}
let person2Friend = {
    firstName: "Pam",
    lastName: "Beesly",
    fullName
}
let Person = function (firstName, lastName, friend) {
    return {
        firstName,
        lastName,
        fullName,
        friend
    };
};

let person1 = Person("Dwight", "Schrute", person1Friend);
let person2 = Person("Jim", "Halpert", person2Friend);

console.log(person1.friend.fullName()); // Angela Martin
console.log(person2.friend.fullName()); // Pam Beesly

So look at "left to the dot", this will now refer to a friend object therefore fullName method will return the first and last name of the person's friend.

Note: In case if there is nothing to the left of the dot then this will bind itself to a global or window object in non-strict mode. This is known as Global/Default binding and we will discuss more about it later.

2. Explicit Binding / Fixed Binding

In some scenarios, we as a developer want to specifically inform the javascript engine to bind the current execution context with a certain object. You may have heard about call(), apply() and bind() method. These methods are available to every function and let us discuss in detail with some examples.

call

This method accepts the first argument as the object to which it has to refer or point to. Rest arguments will be pass as arguments to the function.

const TheOffice = {
    characters: ["Jim Halpert", "Michale Scott", "Dwight Schrute"],
};
const Friends = {
    characters: ["Joey Tribbiani", "Rachel Green", "Chandler Bing"],
};
const SiliconValley = {
    characters: ["Jin Yang", "Richard Hendricks", "Jared Dunn"],
};

const displayCharacters = function (series, channel) {
    this.characters.forEach(function (character) {
        console.log(`${character} is featured in ${series} aired on ${channel}`);
    });
};

displayCharacters.call(TheOffice, "The Office", "NBC"); 
/*
Output:
Jim Halpert is featured in The Office aired on NBC
Michale Scott is featured in The Office aired on NBC
Dwight Schrute is featured in The Office aired on NBC
*/
displayCharacters.call(Friends, "Friends", "NBC");
/*
Output:
Joey Tribbiani is featured in Friends aired on NBC
Rachel Green is featured in Friends aired on NBC
Chandler Bing is featured in Friends aired on NBC
*/
displayCharacters.call(SiliconValley, "Silicon Valley", "HBO");
/*
Output:
Jin Yang is featured in Silicon Valley aired on HBO
Richard Hendricks is featured in Silicon Valley aired on HBO
Jared Dunn is featured in Silicon Valley aired on HBO
*/

So from above, we can see that each object is mapped and displays the characters present in that series. We also have passed two arguments (series and channel name) which are then passed to displayCharacters.

apply

The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma-separated values. The below example will explain when can we use the apply method.

const person = { name: "John Green" };
const cars = ["Aston Martin", "Maserati", "BMW", "Alfa Romeo"];

const showCars = function (car1, car2, car3, car4) {
    console.log(`${this.name} owns ${car1}, ${car2}, ${car3} and ${car4}`);
};

showCars.apply(person, cars); /*John Green owns Aston Martin, Maserati, BMW and Alfa Romeo */

If we had to use call method for the above example then we have to pass each car name as an argument as shown below:

showCars.call(person, cars[0], cars[1], cars[2], cars[3]);

bind

This is same as call method but instead of executing it immediately, it returns the function which can be called later.

const TheOffice = {
    characters: ["Jim Halpert", "Michale Scott", "Dwight Schrute"],
};
const displayCharacters = function (series, channel) {
    this.characters.forEach(function (character) {
        console.log(
            `${character} is featured in ${series} aired on ${channel}`
        );
    });
};

let showTheOfficeCharacters = displayCharacters.bind(
    TheOffice,
    "The Office",
    "NBC"
);
showTheOfficeCharacters();
/*
Output:
Jim Halpert is featured in The Office aired on NBC
Michale Scott is featured in The Office aired on NBC
Dwight Schrute is featured in The Office aired on NBC
*/

3. Global/ Window / Default binding

In this type of binding, this keyword will by default refer to the global execution context in non-strict mode if it is not found in the current execution context. Yes, this is weird but this is how JavaScript works. Let us see the below example by what do I mean global binding.

function displayInfo () {
  console.log(`My name is ${this.name} and I am ${this.age} years old`)
}
const user = {
  name: 'John Green',
  age: 34
}
displayInfo() // My name is undefined and I am undefined years old

Why are we seeing undefined? Yes, this is how it works since we haven't bind it to any object this will by default bind itself to global and also it is in non-strict mode so this.name and this.age will show undefined.

Note: If we run the above code in strict mode then it will throw an error as this.name and this.age is not defined globally. This is one of the reasons why developers recommend using strict mode in your project so that you can avoid unexpected output.

this.name = "Alex Carey";
this.age = "30";

function displayInfo () {
  console.log(`My name is ${this.name} and I am ${this.age} years old`)
}
const user = {
  name: 'John Green',
  age: 34
}
displayInfo() // My name is Alex Carey and I am 30 years old

Here since we have defined this.name and this.age at the global level displayInfo() will show that value.

4. New Keyword in JavaScript

You would have definitely invoked a function using the new keyword. Under the hood what javascript does is it creates a new blank object and this refers to that object.

function Person(name, age) {
  /*
    JavaScript creates a new object
    called `this` which delegates to the Person prototype
    on failed lookups. If a function is called with the
    a new keyword, then it's this new object that interpreter
    created that this keyword is referencing.
  */

  this.name = name
  this.age = age
}

const person1 = new Person('John Green', 34)

That's it! You have now learned about what is this keyword in javascript and it's different types of binding. As mentioned earlier we will cover Lexical binding (what this keyword means in arrow function) in the next article.

PS: After reading this article I would suggest you play around with this keyword using your favorite editor.

Build Client Side GraphQL React Application using GitHub GraphQL API (Part-2)

Heet Shah — Mon, 30 Mar 2020 11:24:02 +0000

In this series of articles, we will build a React Client App which will interact with GitHub GraphQL API.
You can find the Part-1 code repository here:

Heet1996 / ReactApp

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

View on GitHub

Full code repository:

Heet1996 / GitHubApi

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

View on GitHub

You can find the final app here: GitHub Repo Finder.

Before reading further I would highly recommend you to have a tour of this app.

Note: This is the second part of the ongoing series. You can also read the first part here

Till now we have covered below points:

Created our React App with nice looking landing page
Generated a valid token to interact with GitHub API
Created a Token Validator Page so that user can verify whether token is valid or not

In this article we will look into GitHub GraphQL API v4 and build our Queries and Mutation for:

1.  Searching the repository which are on GitHub
2.  Able to Star and Watch your favourite repository
3.  Show Star, Watch and Total repository count for a search.

Interact with GitHub GraphQL API using GraphIQL Application

In this section we will interact to GitHub API using GraphIQL application by developing queries to build our Application features. This article assumes that you know basics of GraphQL, have already install GraphIQL application and also have a valid access token to interact with GitHub(All the pre-requisites are cover in previous post).

GRAPHQL QUERY WITH GITHUB'S GRAPHQL API

So, one of our tasks is to search a repository on GitHub for a given input.
Copy paste the below query on your GraphIQL application and I will explain you later what it does.

query repoSearch($repoQuery:String!)
  {
    search(query:$repoQuery,type:REPOSITORY,first:5) {
       repositoryCount
       edges {
         node {
           ... on Repository {
             name
             id
             description
             url
           }
         }
       }
     }
  }

Paste below object in your Query Variable tab in GraphIQL. We will search all the repository which has/contains React JS as a keyword in it.

{
  "repoQuery": "React JS"
}

Click on run button on you will see below results:

Note: Extract your favourite repository id from the result we have obtain. We will use this ID in our tutorial future to star and watch the repository.

Now let’s discover what is there in the query. I will break it down and explain it you step by step

  query repoSearch($repoQuery:String!)
  {
    search(query:$repoQuery,type:REPOSITORY,first:5) {
           repositoryCount
}
}

Here we are shooting up a query and asking GitHub Api to give us the total repositories which has a Type of REPOSITORY and repository contains keyword as *React JS * .
We also have object call as edges and node in our query. Edges are collection of nodes which are connected to each other and each node is a repository with fields (name, id, description and Url). This structure is very much similar to Graph Data Structure.
As you can see, although repository count is much larger than the actual return result. This is because we have asked GitHub to fetch only first five repositories from the result.

We are done with repository fetching and now all we need is to fetch star and watch list count of respective repository.

Look into below query:

query repoSearch($repoQuery:String!)
  {
    search(query:$repoQuery,type:REPOSITORY,first:5) {
        repositoryCount
       edges {
         node {
           ... on Repository {
             name
             id
             description
             url
              watchers{
               totalCount
             }
             stargazers{
               totalCount
             }
           }
         }
       }
     }
  }

Above query is same as we had discussed earlier, the only object we have added now is watchers and stargazers which belongs to star and watch details of a repository.
That’s it, now we are done with fetching details next step we will look, how can we store and watch the repository.

GRAPHQL MUTATION WITH GITHUB'S GRAPHQL API

Star Your Favourite Repository

Paste below query in your GraphIQL application

mutation starRepo($repositoryId: ID!) {
    addStar(input:{starrableId:$repositoryId}) {
      starrable {
        viewerHasStarred
      }
    }
  }

In order to Star a repository, we would require the repository id which we had extracted earlier. You can use this repository id as well MDEwOlJlcG9zaXRvcnk3MDEwNzc4Ng==
Paste your Query Variable:

{
  "repositoryId":"MDEwOlJlcG9zaXRvcnk3MDEwNzc4Ng=="
}

Run the query and you will see below result:

UnStar the Repository

To remove star below is the query:

mutation starRepo($repositoryId: ID!) {
    removeStar(input:{starrableId:$repositoryId}) {
      starrable {
        viewerHasStarred
      }
    }
  }

Watch Your Favourite Repository

Paste below query in your GraphIQL application

mutation UpdateWatcher($repositoryId: ID!, $subscribeState: SubscriptionState!){
  updateSubscription(input:{subscribableId:$repositoryId,state:$subscribeState}){
    subscribable{
      id
      viewerSubscription
    }
  }

}

We are passing two parameter’s Repository ID and Subscribe State. In order to watch the repository the value of subscribeState should be ‘SUBSCRIBED’ and to stop watching the repository we should pass ‘UNSUBSCRIBED’ as a value.
Let us start watching the repository. Paste the below Query Variable in GraphQLI.

{
  "repositoryId":"MDEwOlJlcG9zaXRvcnk3MDEwNzc4Ng==",
  "subscribeState":"SUBSCRIBED"
}

Run the Query and you will see below Output:

Below are the points we have covered in this article till now:

Created a GraphQL Query to Search a Repository which are on GitHub
Created a GraphQL Query to Star/UnStar a Repository which are on GitHub
Created a GraphQL Query to Watch/Unwatched the Repository.

Above all will help us to build our client app to interact with GitHub API and achieve the desired results. If you want to learn more, have a look into their documents and explore all the endpoints which they have provided to build some cool stuff.
In next article we will see how can we add Pagination and Setup our GraphQL Client with our React Application.

Stay Home, Stay Safe

Build Client Side GraphQL React Application using GitHub GraphQL API (Part-1)

Heet Shah — Fri, 27 Mar 2020 07:00:36 +0000

In this series of articles, we will build a react client app which will interact with GitHub GraphQL API.
At the end of this series you will create an app with below features:

Validate GitHub token access of a user
Search the Public Repository which are in GitHub
Able to Star and Watch your favourite public repository
Show Star, Watch and Total public repository count for search results.

You can find the code repository here:

Heet1996 / ReactApp

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm test`

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

View on GitHub

Final source code :

Heet1996 / GitHubApi

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

`npm start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

`npm run build`

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

View on GitHub

You can find the app here: GitHub Repo Finder. Before reading further I would highly recommend you to have a tour of app.

Note: Please ensure that you have a fair understanding on below points. It will help me to make you understand about this article.

React: This tutorial assumes that you have a good experience on React. Please check-out their docs if you want to learn react.
React-Redux: We are using this cool library for store management. Please check-out their docs if you want to learn react-redux.
React-Router: To create single page application, for easy and protected routes.
Redux-thunk: To perform asynchronous updates/ actions on redux store. I have chosen redux-thunk but redux-saga is also a great alternative.
GraphQL: Since we are using GitHub GraphQL API I highly recommend you to know this sexy cool library. Basics is enough rest we will cover in this article.
NPM: I will be using npm package manager throughout this series if you want to learn more check their docs.
Axios (Http Client): To call GitHub Graphql endpoint we will be using Axios. You can use Apollo Client as well.

Well lot of pre-requisites and many things to digest. So, let’s begin by setting up our project 😊

Step 1: Create a React App.

Create your react project with help of below command.

npx create-react-app “Your Project Name”
cd “Your Project Name”
npm start

After creating the app, start your app. You can run npm start command and this should bootstrap your app without any error.

Step 2: Create a Landing Page (Optional)

Well this is optional but I would recommend you to build this so that you can give gist to your user about what these app does.
Create a src/component and src/container folder so that you can distinguish your stateless from state components.

You can find the code here: Landing Page

Step 3: Getting started with GitHub GraphQL Api

To use GitHub's GraphQL API, you need to generate a personal access token on their website. The access token authorizes users to interact with data, to read and write it under your username. Follow their step by step instructions to obtain the personal access token, and be sure to check the necessary scopes (permissions) for it, as you will need them to implement a well-rounded GitHub client later. After generating the access token, you can validate your token with the help of GraphIQL application.

Interacting with GitHub GraphQL Api using GraphIQL application.

Add your GraphQL Endpoint:

Set Your Header Field:

In the next step, we add a new header with a name and value to your GraphiQL configuration. To communicate with GitHub's GraphQL API, fill in the header name with "Authorization" and the header value with "bearer [your personal access token]". Save this new header for your GraphiQL application. Finally, you are ready to make requests to GitHub's GraphQL API with your GraphiQL application.

Step 4: Validate the User Token

In this section we will write a logic to validate the access token which you have generated above. In general, our objective is that a user cannot proceed further if they have an invalid access token. Moving further this validation will help us to make our routes protected.
Create a src/containers/TokenValidator/TokenValidation.js

Handling the user input

import * as actions from '../../store/actions/index';

class TokenValidator extends Component
{
    state={
        token:''
    }
    handleForm=(e)=>{
        e.preventDefault();
        this.props.tokenValidator(this.state.token);
    }
    inputChangeHandler=(e)=>this.setState({token:e.target.value});


    render()

State of the Token

Here we can use token as a state to store the access token given by user.

1. handleForm

This function executes when user submits the token (we will talk about inner implementation shortly)

2. inputChangeHandler

Changes the state of token on every input of a user

Handling the actions

const mapStateToProps=(state)=>{
    return {
        token:state.tokenValidator.token,
        loading:state.tokenValidator.loading,
        error:state.tokenValidator.error
    }
}
const mapDispatchToProps=(dispatch)=>{
    return {
        tokenValidator:(token)=>dispatch(actions.tokenValidator(token))

    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TokenValidator);

Here comes the react-redux to the rescue where we can use valid token across the application. As notice above whenever user submits the token this.props.tokenValidator(this.state.token) is call which dispatches tokenValidator action to update the reducer and also validate our token.

Our Redux Store and Actions

Before heading further, I would recommend you to create a folder structure as shown below for your redux store. You may choose to follow other folder structure but keep a habit of best practices so that you can clearly distinguish your actions and reducer.

Different Action Types

We cannot update redux store directly and it is done through reducers. With different actionTypes we will trigger our actions and ask reducer to update the state/store accordingly.

I always keep my action creator and action type file separated so that it is easy to maintain and readable.
I will not be able to explain all the code in details. You can find the code for this section below:

a. Reducer
b. Actions

Our first Reducer (tokenValidator.js)

Let’s see what all synchronous actions do we have:

tokenValidStart - First action to dispatch whenever async action is call
tokenValidSuccess- If our http request is complete and promise is resolve than success action is dispatch.
tokenSetter- Once the promise is resolve we will set the token state in our redux store only if our response status is 200.
tokenValidationFail- If our promise is rejected then failure action is dispatch.
tokenInvalid- If our token is not valid than this action is dispatch which updates error state to ‘Invalid’ in our redux store. This attribute will help us to identify whether token is valid or not.

export let tokenValidator=(token)=>(dispatch)=>{

    dispatch(tokenValidStart());
    axios.post(`https://api.github.com/graphql`,{
        headers:{
            'Authorization':`bearer ${token}`
        }
    })
    .then((res)=>{
        dispatch(tokenValidSuccess());
        if(res.status=='200')
        dispatch(tokenSetter(token));

    })
    .catch((err)=>{

            if(err.response)
            {
                if(err.response.status=='401')
                dispatch(tokenInvalid());
                else dispatch(tokenValidationFail(err)); 
            }
            else dispatch(tokenValidationFail(err)); 
    })

}

As you can see above, we have created a redux thunk where we accept token as a parameter (refer your Dispatch props in TokenValidation.js file) and also dispatching multiple synchronous actions which we have discuss above.
That’s it this is our reducer for token validation and different actions for our react-redux application.
Congratulations! Till now we have covered below feature:

Validate GitHub token access of a user.

In my upcoming articles I will cover the features given below with some basics of GraphQL as well.

Search the Public Repository which are in GitHub
Able to Star and Watch your favourite public repository
Show Star, Watch and Total public repository count for search results.

Please leave your comments below regarding these article and stay tuned for Part 2! :-)

Forem: Heet Shah

What is THIS keyword in JavaScript? - Part 2

What is THIS keyword in JavaScript? - Part 1

1. Implicit binding

2. Explicit Binding / Fixed Binding

3. Global/ Window / Default binding

4. New Keyword in JavaScript

Build Client Side GraphQL React Application using GitHub GraphQL API (Part-2)

Heet1996 / ReactApp

Available Scripts

npm start

npm test

npm run build

Heet1996 / GitHubApi

Available Scripts

npm start

npm run build

Note: This is the second part of the ongoing series. You can also read the first part here

Interact with GitHub GraphQL API using GraphIQL Application

GRAPHQL QUERY WITH GITHUB'S GRAPHQL API

GRAPHQL MUTATION WITH GITHUB'S GRAPHQL API

Star Your Favourite Repository

UnStar the Repository

Watch Your Favourite Repository

Build Client Side GraphQL React Application using GitHub GraphQL API (Part-1)

Heet1996 / ReactApp

Available Scripts

npm start

npm test

npm run build

Heet1996 / GitHubApi

Available Scripts

npm start

npm run build

Note: Please ensure that you have a fair understanding on below points. It will help me to make you understand about this article.

Step 1: Create a React App.

Step 2: Create a Landing Page (Optional)

Step 3: Getting started with GitHub GraphQL Api

Interacting with GitHub GraphQL Api using GraphIQL application.

Add your GraphQL Endpoint:

Set Your Header Field:

Step 4: Validate the User Token

Handling the user input

State of the Token

1. handleForm

2. inputChangeHandler

Handling the actions

Our Redux Store and Actions

Different Action Types

Our first Reducer (tokenValidator.js)

Stay Home, Stay Safe :)

`npm start`

`npm test`

`npm run build`

`npm start`

`npm run build`

`npm start`

`npm test`

`npm run build`

`npm start`

`npm run build`