A useful guide to React propTypes and type checking

Photo by Charles 🇵🇭 on Unsplash

React is a JavaScript library for building user interfaces. React makes it easier to manage the state of our application and efficiently updates the UI when the state changes.

React is component based and each component can have its own state (manipulated via setState()) and can receive props (provided by the parent component).

Tip: Build React apps faster with reusable components. Use Bit to collect reusable components, share them with your team, and use them anywhere. Give it a try.


Learn How Promises Really Work in JavaScript, to write better code.

illustration from undraw.co

JavaScript is a single-threaded programming language, that means only one thing can happen at a time. Before ES6, we used callbacks to handle asynchronous tasks such as network requests.

Using promises, we can avoid the infamous ‘callback hell’ and make our code cleaner, easier to read, and easier to understand.

Suppose we want to get some data from a server asynchronously, using callbacks we would do something like this:

getData(function(x){
console.log(x);
getMoreData(x, function(y){
console.log(y);
getSomeMoreData(y, function(z){
console.log(z);
});
});
});

Here I am requesting some data from the server by calling the getData() function, which receives the data inside the…


illustration from undraw.co

If you are learning JavaScript, you might have seen the this keyword. The this keyword in JavaScript behaves differently compared to other programming languages. This causes a lot of confusion for programmers.

In other object-oriented programming languages, the this keyword always refers to the current instance of the class. Whereas in JavaScript, the value of this depends on how a function is called.

Let’s look at some examples to demonstrate the behavior of this in JavaScript.

Example 1:

const person = {
firstName: 'John',
lastName: 'Doe',
printName: function() {
console.log(this.firstName + ' ' + this.lastName);
}
};

Now let’s execute the printName


Learn How JavaScript Engine Performs Variable Lookups

Scope and Scope Chain are fundamental concepts of JavaScript and other programming languages. Yet, these concepts confuse many new JavaScript developers. The knowledge of these concepts is essential in mastering JavaScript.

Having a proper understanding of these concepts will help you to write better, more efficient and clean code. Which will, in turn, help you to become a better JavaScript developer.

So in this article, I will explain what scope and scope chain is, how JavaScript engine performs variable lookups and internals of these concepts.

So without further ado, Let’s get started :)

Tip: When building JS apps, use open…


Everything you should know about Sass

Photo by Pankaj Patel on Unsplash

While CSS is getting powerful day by day, it still lacks certain features (such as code reuse) that makes it harder to maintain when the projects get bigger and more complex.

There are many CSS methodologies (such as OOCSS, SMACSS) that help us write more maintainable CSS code, but these methodologies alone aren’t enough to solve the problem of maintaining large CSS codebases.

That’s where Sass comes into play. Sass provides us features and tools that regular CSS doesn’t have, using Sass we can write more readable, maintainable and reusable CSS code.

So in this article, I will dive into…


Learn How JavaScript Works

Photo by Sean Lim on Unsplash

JavaScript is a single-threaded programming language which means only one thing can happen at a time. That is, the JavaScript engine can only process one statement at a time in a single thread.

While the single-threaded languages simplify writing code because you don’t have to worry about the concurrency issues, this also means you can’t perform long operations such as network access without blocking the main thread.

Imagine requesting some data from an API. Depending upon the situation the server might take some time to process the request while blocking the main thread making the web page unresponsive.

That’s where…


Learn What Higher-Order Functions are and how to use them in JavaScript

Photo by NESA by Makers on Unsplash

If you are learning JavaScript, you must have come across the term Higher-Order Functions. Although it may sound complicated, it isn’t.

What makes JavaScript suitable for functional programming is that it accepts Higher-Order Functions.

Higher-Order Functions are extensively used in JavaScript. If you have been programming in JavaScript for a while, you may have already used them without even knowing.

To fully understand this concept, you first have to understand what Functional Programming is and the concept of First-Class Functions.

Tip: Use Bit (GitHub) to easily share and reuse components between apps, to build faster as a team. …


Learn About Various Design Patterns in JavaScript

Photo by NESA by Makers on Unsplash

When you start a new project, you don’t immediately start coding. You first have to define the purpose and scope of the project, then list out the project features or specs. After you can either start coding or if you are working on a more complex project then you should choose a design pattern that best suits your project.

What is a Design Pattern?

In software engineering, a design pattern is a reusable solution for commonly occurring problems in software design. Design patterns represent the best practices used by the experienced software developers. A design pattern can be thought of as a programming template.

Why use Design Patterns?

Many…


Learn How Closures Work in JavaScript: A Hands-on guide

Photo by Adi Goldstein on Unsplash

Closures are a fundamental concept of JavaScript that every JavaScript developer should know and understand. Yet, it’s a concept that confuses many new JavaScript developers.

Having a proper understanding of closures will help you to write better, more efficient and clean code. Which will, in turn, help you to become a better JavaScript developer.

So in this article, I will try to explain the internals of closures and how they really work in JavaScript.

So without further ado, Let’s get started :)

Tip: Use Bit to reuse components between apps. It helps your team organize and share JS components, so…


Learn How Hoisting Really Works in JavaScript

Photo by Kobu Agency on Unsplash

Many JavaScript programmers explain hoisting as JavaScript’s behavior of moving declarations (variable and function) to the top of their current scope (function or global). As if they were physically moved to the top of your code, which is not the case. For example:

console.log(a);
var a= 'Hello World!';

They will say, the above code will transform into this code after hoisting:

var a;
console.log(a);
a = 'Hello World!';

Although this is what appears to be happening (because the code is working fine), this isn’t actually happening, your code isn’t going anywhere. …

Sukhjinder Arora

Web Developer. Tech Writer. Loves poetry, philosophy and programming. Find me @ https://sukhjinderarora.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store