Before the emergence of JavaScript frameworks the only way to render a web page was through server-side rendering. A user sends a request to the server and the server returns back the full web page. Nowadays, client-side rendering gained a lot of traction due to JavaScript frameworks and libraries like React JS. In this article, I’m going to discuss each one of them, their advantages and disadvantages.

Server side rendering

Server-side rendering or SSR is the traditional method that was used to render web pages for a long time. When a user sends a request to the server, the server sends back all…

In React components have many lifecycle methods that we can use in different phases of the component existence. The lifecycle of a component is consisted of three main phases: Mounting, Updating and Unmounting. Lets look at each one of these phases and the methods associated with them.

Mounting

This phase is usually referred to as the birth of the component. It’s at this phase that the component is created and inserted into the DOM. Some of the most used methods in this phase are: constructor, render and componentDidMount

Constructor()

The constructor method allows us to initialize the state and also to bind…

Higher-order functions are functions that operate on other functions, either by taking them as arguments or by returning them. JavaScript have many built-in higher-order functions like map() and filter(), but you can also create your own higher-order functions.

In this article, I will talk about three higher-order functions in JavaScript: map(), filter() and reduce(). They are all introduced in ES6, and they make code shorter and simple.

The Map Method

This method creates a new array with the result of calling a callback that is provided as an argument for every element in that array. …

For the past years the use of mobile devices has grown so fast, and many people prefer to use mobiles to surf the web instead of desktops. This is why building websites that are responsive is an essential skill for developers. Responsive design simply means creating websites that looks good on all devices.

In this tutorial, I will show you how to create a responsive header easily. So lets get started!

Create a new folder where we will put our HTML,CSS and JavaScript files. …

Variables Scope is one of the essential things you need to understand in JavaScript. Knowing this concept will make you reduce error and write better code, and lucky for you it is not hard to grasp.

There are two type of scopes in JavaScript: Global and local scope. Lets look at each one of them!

But before we do that, Before we start discussing the difference, I just want to mention that there is a difference between let & const and var in determining variables scope. I will focus on var now and talk about let & const later.

Global scope

Variables…