Getting Started With React

One of the biggest confusion before starting new is “why”, so why is there a need to use ReactJS? Instead of scratching your head and surfing the internet, just jump right into the examples before starting, which convince you to skip “why”.

ReactJS is one of the most in-demand JavaScript frameworks used for building User Interfaces. We need a fast, secure, and scalable language for building mobile and web apps, and Reactjs has it all.

What is ReactJS?

ReactJS is a declarative, flexible, and efficient JavaScript library. It lets you to compose complex UIs from an independent and reusable piece of code called “components”. Conceptually, components are like JavaScript functions that return HTML elements. They accept arbitrary inputs ( refer to as “props” in React) and return React elements (a piece of HTML code) describing what should appear on the screen.

By declarative, means it describes what you want to do instead of how. It left rest up to the compiler to figure out the ‘how’. Flexibility means it can be used for multiple purposes, such as determining how you want to handle routing, testing, and event folder structure. It has the ability to be sprinkled into existing applications. Individual elements in a page can be replaced by React until the entire application makes the transition.    

If you are wondering which technology to choose for your project, ReactJS is probably the best choice. It is maintained by Facebook and has a vibrant community of developers. And it is supported by all the major browsers, including older versions of IE.

For dynamic applications, ReactJS is preferred as it allows the data and interface to be updated independently without reloading the application.

Because React is highly flexible, its main focus is to create reusable components for applications and also used to :

• Build Mobile applications with React Native.
•  Build cross-platform desktop applications with Electron.
• For Server-side-rendering with the framework Next.js.
• Even you can create virtual reality applications with React VR.
• Generate static sites with tools Gatsby and Phenomic.

According to Stackoverflow, more than 35% of the developers are using ReactJS, increasing gradually. On Github, React repository has over 1500 contributors and downloaded over 6M times every week.

What is a declarative Code?    

React works in declarative code. To have a good understanding of declarative code, we want you to imagine the following code expressed as an app.

What you imagine the application could look like the screen below with a navbar, a header, articles, and a footer. This is because each line of code declares what each element of the app is.

So, after reading the code, you have learned something fundamental about the design. That’s because of declarative code which describes what we want instead of saying how to do it, as you would with imperative code.

 At its core, declarative code is like visiting a restaurant and ordering a meal. You tell the waiter what you want, but you don’t go into the kitchen to tell the chef how to cook it. Declarative code describes the end result but doesn’t act as a step-by-step guide of how to do it. In practice, that means declarative code is lightweight, easier to understand and change, and has fewer bugs.

How ReactJS works?

As you know, the browser creates a representation of the rendered HTML document known as the Document Object Model. It represents the webpage in a structured hierarchical way, just like above. You can think of it as a tree-like representation of a document, in which the child elements are enclosed under their parent elements like head and body are enclosed under HTML tag, h1 and script are enclosed under BODY tag. DOM tree also contains the content, i.e., the data to be displayed with respect to each node over the screen.

In an application, especially a dynamic application, whenever there is any change to an element in the DOM, the DOM has to re-render the element and its child elements – make the DOM manipulation very slow. Here, React proves to be very efficient as it uses the Virtual DOM.

Need of Virtual DOM

You can see the practical use case of it like in social media application Facebook, Instagram (which are React-based applications) whenever someone posts something or likes your post, it simply comes to your feed without refreshing the complete page. In this scenario, only the content part which is changed is updated (re-rendered) without refreshing the whole page. It is only possible because of Virtual DOM.

Virtual DOM

React has a Virtual DOM, a lightweight copy of the real DOM, and is kept in the browser memory in the form of a Javascript object. For every object in Real DOM, there is an object for that in React Virtual DOM. It is exactly the same but doesn’t have the power to directly change the document’s layout. Virtual DOM is fast because nothing gets reflected over the screen whenever any changes are made in the content, while it is not the case with Real DOM.

For better understanding, let’s have some HTML :

After rendering, the Virtual DOM looks like this :

Now, let’s say the content of H1 changes to ‘Mom!’ . So, now the new representation will be :

React maintains two Virtual DOM; one contains the updated Virtual DOM which is same as Real DOM, and one is the pre-updated version of this updated Virtual DOM which is created whenever any change occur. 

Now, the comparison between the previous and the pre-updated Virtual DOM takes place to figure out what exactly has changed in the DOM. This comparison takes place using the ‘Diffing Algorithm’, and it’s relatively faster than checking with the actual DOM. Once React figures out the changes then it updates only those elements on Real DOM. This process is known as Reconciliation. This significantly improves the performance as Virtual DOMs comparison doesn’t involve the complete render of the page.

I hope now you got a rough idea of what React is? How does it work? And why is it so popular?

That’s not all, in our next blog, we will learn about the basics of React.