Understanding REACT

DOM Vs Virtual DOM | JSX | Functional Vs Class based Components | Props, States and Events | LifeCycle Methods

In this post you will understand- What is REACT? The basic terms you come across when learning to code in REACT and the concept behind each term. I always like to understand the terminology and concept before getting my hands dirty. I am branching this tutorial to parts. So, Part I will be the concept. In Part II we will look into the installation and example application.

React is an open source Javascript front-end library used to build websites. It is developed by Facebook and currently maintained by a large community of developers. The fact that ReactJS allows us to create reusable UI components makes it one of the popular libraries for building Single Page Applications.

To learn REACT, you need to have a basic understanding of HTML, CSS and JavaScript. By the end of this tutorial you will be familiarized with DOM and Virtual DOM, JSX, Component, State, Props, Event and Components LifeCycle Methods etc.,

DOM Vs Virtual DOM

DOM – Stands for Document Object Model. It is the browser’s internal, programmatic representation of a Web Page. The tags/elements in a HTML Page are considered as objects in DOM (like an in-memory representation) and are represented in a tree-like hierarchy in the DOM document. User actions on a Web Page like, clicking a button or typing some text , changing the style or adding content would initiate a change in the DOM’s object structure.

In simple terms, DOM is a programming interface (API) which resides in your browser and can be used to transform your WebPage dynamically. Client side frameworks like, JavaScript and jQuery interface with the DOM API and provide the ability to manipulate the DOM structure dynamically.

But, the issue with DOM is – Whenever there are changes made to the DOM tree structure, for example you are updating/manipulating one object out of a list of few hundred objects, most JavaScript frameworks would update the entire list/ rebuild the list of objects leading to slow updates and this becomes inefficient when looked in a broader spectrum. Example: When you are handling a Single Page Application with a lot of DOM manipulations.

Virtual DOM – Is the concept introduced in REACT for efficiently updating the DOM. Virtual DOM object is a copy of the actual DOM object. Both Virtual DOM and DOM are similar in properties except for the fact that Virtual DOM doesn’t have the capability of changing the User Interface directly. When you manipulate an element or object in the Virtual DOM and update it, this is what happens:

• REACT updates the entire Virtual DOM (still inefficient but, REACT does it so quickly that its cost is negligible) and compares it with the previously updated Virtual DOM snapshot.
• Only the changed objects get updated in the DOM. Updated DOM means updated User Interface- only the manipulated objects representation is updated and the remaining will be as is. Thus, reducing the time to update the User Interface in an efficient manner. This process is also called diffing.

JSX

JSX syntax reminds you of HTML but, it also inherits all the functionality of JavaScript. Like, you can describe how your UI / View (in MVC ) should look added, it also inherits other UI logic (how events are handled, how the state changes over time, and how the data is prepared for display). Hence, it is called JavaScript Extension (JSX).

It is easier to use JSX in REACT. It is not necessary to use JSX for templating but, REACT recommends using JSX as it helps as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

Objects in JSX are called React “elements“/ JSX produces React “elements” which are then rendered to the DOM. Here is an example, explaining declarations and JSX templating.

I have declared two variables “name” and “message” and then use “name” inside JSX by wrapping it in {curly braces}. 

Do check React Docs to understand how to embed expressions in JSX. 

Now, we understand that we use JSX to create elements and these elements describe what is seen on the User Interface. But, how do we see the change on the screen? How does REACT DOM (Virtual DOM) update the DOM? 

The answer is, we need to find a method which renders the JSX elements/objects to the React DOM/ Virtual DOM which in-turn updates the DOM. ReactDOM.render() is the method used to render the JSX elements. The React.DOM.render() takes two parameters 1. The newly created element and 2. The location in your HTML. 

In the below screen, we have created two elements: name, message and rendered the message to the ‘root’ node in your HTML page. Once the JSX renders, you will see a “Hello, Stranger” message in the browser. Try it with codepen.

Components in REACT 

An element is a building block. A group of elements combined are said to be a component in React. In simple terms, think of a component as a functionality. One of the advantages of React that makes it so popular is – it makes code reusable – meaning, each component has its own logic, behaviour and controls its own rendering. These components can be reused wherever you need them. Thus, reducing your development efforts.

There are two different types of Components –

1. Functional based components – When a component is declared as a function, it is called a functional based component. 

Here is the example for a functional based component. The props is a property in React. We will discuss it later. The Hello function accepts a property which has a name attribute in it. Suppose, say, the name is “Stranger”. Thus, the below function returns a “Hello, Stranger”

Example:

function Hello(props)
{
      return <h1> Hello, {props.name} </h1>
}

2. Class based component– In order to make a functionality a class based component you have to extend React.Component. Hello is the subclass of React.Component. The only method you must define in a React.Component subclass is called the render() method. The other methods are optional.

class Hello extends React.Component
{
    render() 
       {
            return <h1> Hello, {this.props.name} </h1>
       }
}

Props , State and Events

As we discussed earlier, Props are the properties in React. Props are the arguments passed in a function or a class. No matter what, a function/class should not modify its own props. Props are Read-only and are also called pure functions.

For your User Interface changing needs we have something called State. State should be declared in a Constructor. State can be modified/updated by using a setState() method. The best example for State is a UI which shows a clock. In a clock application, the seconds clock changes constantly. Look at this example to see how it is managed using State ReactDocs 

Events in React are nothing but certain actions such as a button click or a toggle button switched from on to off. For every event (e) you will have its respective handling function. For example, a user submits an online form. For a detailed example, refer to ReactDocs.

React Component LifeCycle Methods

From the creation of your component to the deletion of your component it goes through a cycle of events. 

render() – Is the method used in a class based component. Which renders the JSX to the UI. You cannot change State in the render(). 

componentDidMount () – Once the component is mounted, the componentDidMount() is called. In this method you can reference API’s and also update the state using setState(). 

componentDidUpdate() – In case of an event or any changes to the State or Props, this method is called. 

componentWillUnmount() – This method is called just before the component is unmounted and destroyed. If you want to handle any cleanup actions, here is where it should be done.

Hope you understood the basic terminology in React. In the next post, I will show you how to set up your environment and a step-by-step guide to create a weather app. Click on the star if you liked the post. For queries comment in the section below. Stay tuned and happy learning 🙂