10 basic concepts of React JS

Nowadays React Js has been quite a popular framework for web development. It has some incredible features to offer that made it so successful. Here, I present 10 of them that I find interesting — 

Virtual DOM:

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM.

DOM manipulation in most JavaScript frameworks get the DOM updated/rebuilt in its entirety in response to any change, even for a very small change. Modern websites may have a lot of data and may use a big amount of DOM manipulation. In such a scenario the process gets very inefficient.

The Virtual DOM acts like a blueprint for the real DOM. For every DOM object react creates a corresponding virtual DOM object which becomes a representation of the DOM. Such a VDOM same properties as real DOM but lacks the power to change the screen display elements directly. Manipulating DOM might be slow but manipulating the VDOM is faster as nothing is onscreen. Though VDOM update also makes all of the VDOM objects updated, it is still incredibly faster as mentioned before. Once VDOM gets updated, react compares the updated VDOM with the immediate previous VDOM (before the update). This way react gets to know exactly which VDOM objects got changed and it makes only and only that change to the actual DOM to show on screen.

Thus, react updates only the required parts of the DOM making it very efficient.

JSX :

The JSX in react is a syntactic version of writing just the function React.createElement(component, props, ...children). And the code format for JSX is,

const jsxElement = <h1 className= ”greeting”> Hello World ! </h1> 

This is called JSX and it is a syntax extension of JavaScript. This code compiles into React.createElements() calls, this way,

React.createElemet(
    ‘h1’,
    {className: ‘greeting’},
    ‘Hello World !’
)

This function in turn converts into a object like,

const jsxElement = {
    type: ‘h1’,
    props: { 
        className: ‘greeting’,
        children: ‘Hello World !’
    }
}

Embedding expressions in JSX

Valid JavaScript expressions can be embedded in a JSX code, such as

const user = “Tom Cruise”
const jsxElement = <h1> Hello, {user} </h1>

React Elements:

Elements are the building blocks for components. An example for a simple element is such,

const element = <h1>I am an Element</h1> 

Rendering Elements:

React apps usually have a single root DOM node in the HTML file, which is <div id="root"></div> and react DOM manages everything inside it.

In order to render a react element in the root DOM node, both of them have to passed into ReactDOM.render().

const element = <h1>I am an Element</h1> ;
ReactDOM.render(element, document.getElementById("root"));

Components:

Components are JavaScript functions that take arbitrary inputs as props and return the elements for UI. It allows the developer to work with different sections of the app discreetly.

Component is defined as a JavaScript function,

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

Now this function can be called as component <Greeting /> .

Class Components:

Components a]can also be defined as ES6 class. Both function and class components have the same features.

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

Both ways of defining components are equivalent to react.

Component rendering:

Rendering a component is the same as rendering an element. The element here shall represent the component defined.

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

const element = <Greeting />;

ReactDOM.render(
    element,
    document.getElementById(“root”)
);

Component Lifecycle:

There are many component lifecycle methods to be called upon either the rending of the component (called “mounting” in react) or removal of the component (called “Unmounting” in react) or change in the props or state (called “updating” in react).

The commonly used Lifecycle methods are as given below,

mounting

These methods are called in the following order when an instance of a component being created and inserted into the DOM.
constructor()
render()
componentDidMount()

updating

An update can be caused by the change in props or state. These methods are called in the following order when a component is re-rendered.
render()
componentDidUpdate()

unmounting

This method is called when a component gets removed from the DOM.
componentWillUnmount()

Other APIs and Properties:

There are Two other APIs that can be called from the component,
setState()
forceUpdate()

There are properties of two categories, and they are class properties and instance properties.

Class Properties

defaultProps
displayName

Instance Properties

props
state

Sources: VDOM, JSX, elements, components and props, state and lifecycle, default props