A useful guide to React propTypes and type checking

Image for post
Image for post
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.

Image for post
Image for post
React spinner components with Bit: Choose, try, use.

The Problem

Since React is a JavaScript library and JavaScript does not provide any type-checking, passing the wrong type of props to components can cause a lot of bugs in your application. …


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

Image for post
Image for post
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 callback function. Inside the callback function, I am requesting for some more data by calling the getMoreData() function passing the previously received data as an argument and so on. …


Image for post
Image for post
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 method. …

About

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