A Guide to React Before You Start Coding
Students often face many challenges and confusion while starting with web development. The main issue that we face while starting any new language or framework is the abundance of information. Many students got confused from the myriad of tutorials available and try to get ahead of themselves by jumping straight to coding part while ignoring the fundamentals of the targeted technology. For that reason, I decided to write this article as an introduction to React. I hope that understanding the main idea behind this library will help you grasp the fundamentals of ReactJS.
As defined in its documentation,
“React is a JavaScript library for building user interfaces.”
Lets start decoding this definition.
Library for JavaScript:
JavaScript is one of the most popular and widely used high-level programming language. Using plain JavaScript ( without any libraries) is known as Vanilla JavaScript by Developers. It needs a great deal of work. You would have to rewrite the code for same functions. JavaScript libraries enable developers to pre-written code for common functions and develop their own functions. React is one of such JavaScript libraries. Another commonly used such library is jQuerry.
Components : Building Blocks for User Interface
Components are the building blocks for JavaScript applications. A component is simply just a piece of User Interface. Every UI is made up of a collection of small interfaces which are generally independent from each other and are isolated and often reusable in nature.
Taking the example of Twitter interface, we can see that these are the three of the main components of twitter home page.
Now these three individual components are composed together in order to build a complete user interface for the users. While developing user interface in ReactJS, we create such components. Many of the components became reusable such as the tweet component in the image.
Another important relation between components is parent/child relation
In the image 2, The the subsections could be understood as the child components of the main sidebar component. This is the general idea behind the components and their structure. The complete application is made by such components and could be understood as a tree of components where different components are linked together and joined in such a way to interact with each other and form a comprehensive user interface
Apart from reusability of components, React also offers two important features:
1- JavaScript eXtension — JSX
2- Virtual DOM — Document Object Model
Before we delve into their explanation, It is important to know that HTML is key to every web page. When an HTML document is opened in a browser, browser create a DOM which decides how that document will be arranged and displayed. We will learn in detail about DOM in a while. Let’s start with JSX now.
JSX
JSX ( JavaScript eXtension) is a React extension which is used to modify the DOM, which essentially means to change the user interface and how the UI will look like. JSX is a syntax extension to achieve the UI change or DOM update. Same can be achieved by changing HTML directly, but JSX offers enhanced performance as it works with the second feature provided by React, Virtual DOM. Let’s understand DOM and virtual DOM in detail to get a better idea.
What is DOM ?
To understand about DOM ( Document Object Model ), first you need to understand that every web page that we see in a browser is a document, which can also be displayed as HTML. No matter how we see it ( in browser or in HTML ), it is the same document. Now DOM is a programming interface which is used to change that document. It connects programming languages like JavaScript to the webpage or document so that we can alter that. We generally refer to it as changing the DOM or updating the DOM. This basically means to change the UI mostly in real time. Simply put, the DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.
Real vs Virtual DOM
React creates a Virtual image of the original DOM. So for every DOM object or every component, there is a corresponding “virtual DOM object.” Virtual DOM is like a lightweight copy of the original DOM. As shown in image 3. Virtual DOM contains copy for every component or object in Real DOM but it lacks the power to change the UI directly. So how does react update UI ?
Updating virtual DOM
Whenever a change is detected, the virtual DOM is updated first. Change could be due to some event, for example user clicked on something or enlarged a photo. So whenever a JSX document is rendered, It updates the virtual DOM components linked with that specific part of the code. So if we render a parent component, All the child components will also be updated in the virtual DOM but not in the real DOM and that is what enhances the performance. As we are updating Virtual DOM so no impact real DOM means not updating all the components in real DOM or user Interface.
In Image 4, Change is occurred only in one component but all components of virtual DOM are updated. As they are not being displayed, so it cost minimal impact on memory.
Updating real DOM and UI
Once the event is finished, React compares the virtual and real DOM and update only the specific component in real DOM instead of all the child components. Its like updating the whole design on paper first and then implementing only the specific changes on ground.
Now in Image 5, Once the change is completed, react will compare both DOMs and update only the one component whose value is changed in virtual DOM. This method save the memory of the machine to update all components on each change and only update the required objects. That is the how JSX and Virtual DOM enhance the performance of react.
Conclusion
Considering all of these, Jumping ahead to coding might sound fun at start but in the long run, it could cost a great deal of time and resources to developers. Its better to spend some time understanding the theory so that many headaches in the future could be avoided. I hope this article helps you grasp the basics of React. Happy Coding.
