In javascript, the variable scope and its hoisting are quite different.Let’s take an example – var car = “Mercedes” // variable is defined in the global scope

function car_name () { // function

car = “BMW”; // this is a local scope but the variable car is global variable

var car = “Benteley” // this is a variable that is defined in local scope and is local variable

} First, let’s talk about what global and local scope is –  Global Scope (Global Variables)All the variables declared outside the function are in the global scope and are available in the entire HTML document.

We can also access the global variable with the help of the window object as their global context is window object.

Simple Example of Stateful Component which has two properties.import React, { Component } from 'react';

class StateExample extends Component {

export default StateExample; ComponentsA React application is divided into smaller molecules, and each molecule represents a component.

React components are independent and reusable and contains JSX(JavaScript XML Syntax) which a combination of JS + HTML.

It stores information about the component’s state change in memory.

It has no lifecycle, so it is not possible to use lifecycle methods such as componentDidMount and other hooks.

In my previous blog, I gave some basic ideas about debugging.

So today we are going deeper into debugging and see exactly how breakpoints work.

Browser’s in-built debugging tools have made it quite easy to debug codes.

1.Console:The console is used for printing logs and it also displays errors and warnings.2.Elements:We can use the elements section to inspect HTML elements and do styling in them.3.Sources:All the files that are present in the current working directory can be seen in the sources section and we can choose the file which is required to be inspected.4.Network:It is used for Inspecting all the network calls that are made by clients to the server, such as its HTTP headers, content, and size.

Figure 1: DevTools in Chrome Step 2: Select the “sources” sectionNow we have to go to the sources section which is present in the inspect.

When we go to the sources section we will find a file navigator.

Three phases of React component lifecycle-MountingUpdatingUnmountingNow let’s discuss each phase of the React Component Lifecycle methods.

MountingMounting of components is like introducing a newborn child to the world.

componentDidMount(): This method is called right after the react component is mounted on DOM or you can say that it is called right after render method executed for the first time.Here we can make API call Example: Interact with dom or perform any ajax call to load data.

This method has two arguments-1-nextProps2-nextState componentDidUpdate(): componentDidUpdate is final method in Update react component lifecycle method.This method is called immediately after updating occurs.And is not called for initial rendering.It accepts two parameters prevProps, prevState.This method is guaranteed to be called only once in each re-render cycle.We can make API call but before making the call you need to compare previous props with the new props and then decide whether to make ajax call or not.

componentWillUnmount(): This method is called immediately before the component is Unmounted and destroyed from DOM.

In this method we can perform some cleanup tasks like canceling any network request, removing event handlers.

In, this blog we will try to implement SSR in React js and does not include redux implementation as well.The advantage of SSR over CSR?

Improved Initial Rendering TimeCSR:  Generally Web applications server send an Empty HTML file to the client on request.

(Downloading js and CSS libraries)– React js Populates the Component View.SSR:  Server Runs React Components at server side and sends to Client.

Consistent SEO Performance We all know, the Search engine does not support Javascript code.

All the data analysis is based on markup which has rendered.

In SSR component has run on the server and then It is sent to the browser.

React js enables the developer to break down complicated UI into a simpler one.

We can make particular changes in data of web applications without refreshing the page.

CodeReability increases with JSX:JSX stands  for javascript XML.This is a sort of file used by React which utilizes javascript expressiveness along with HTML like template syntax.JSX makes your code simple and better.

Maintainability:Redux is strict about how code should be organized, which makes understanding the structure of any redux application easier for someone with redux knowledge.

Redux-data flow (diagram)Redux is composed of the following components:ActionReducerStore View Action: Actions are the payload of information that sends data from your application to your store.

Actions describe the fact that something happens but do not specify how the application state changes in the response.Action must have a type property that indicates types of action being performedthey must be defined as a string constant.

?, really won’t it be weird if there is no concept of paging.

Similarly, there is a concept of pagination in the digital world where we divide a document into the discrete pages/electronic pages.

ReactJs Pagination :   But pagination has its own importance in terms of filtering and showing only relevant data, for example, the Google search engine.

So reactjs pagination becomes crucial when a user is searching for particular information and not consuming any random information.

Some of the NPM and other pagination libraries available arereact-js-paginationreact-paginatereact-bootstrap/Pagination  It is also very ideal to use these existing libraries instead of re-writing your own, same as there is no need of re-inventing the wheel instead you can focus on other things.

Here I will be explaining about react-pagination with the help of code and some calculation.