DEV Community

loading...

10 basic concepts of React JS

smismail profile image Sayem Mohammad Ismail ・3 min read

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> 
Enter fullscreen mode Exit fullscreen mode

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 !’
)
Enter fullscreen mode Exit fullscreen mode

This function in turn converts into a object like,

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

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>
Enter fullscreen mode Exit fullscreen mode

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> 
Enter fullscreen mode Exit fullscreen mode

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"));
Enter fullscreen mode Exit fullscreen mode

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>
} 
Enter fullscreen mode Exit fullscreen mode

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>
        }
}
Enter fullscreen mode Exit fullscreen mode

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”)
);
Enter fullscreen mode Exit fullscreen mode

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

Discussion (19)

Collapse
abu profile image
Abu Jaid • Edited

componentWillUnmount() method has been deprecated, it is removed from the component life cycle. instead of you can use getderivedstatefromprops () life cycle method.

Collapse
smismail profile image
Sayem Mohammad Ismail Author

Thank you for your feedback. I will check that.

Collapse
shubh710 profile image
Shubham R

Is it?
I think you are talking about componentWillMount assuming by the alternate you suggested.

can you please share any docs that says the same about componentWillUnmount.

Collapse
smismail profile image
Sayem Mohammad Ismail Author • Edited

Thank you for your feedback. I appreciate your thoughtful insight.

Here is the react documentation which I mentioned in the "sources" as well. reactjs.org/docs/react-component.h...

Nonetheless, I will cross validate your concern.

Thread Thread
shubh710 profile image
Shubham R

I find your article informative.
My comment was intended for Abu Jaid

Thread Thread
smismail profile image
Sayem Mohammad Ismail Author

I am delighted that you find my article informative. This is an inspiration for me. Thank you.
Please, keep on reading my articles.

Collapse
abu profile image
Abu Jaid • Edited

Hi, @shubh710 please refer to official docs here reactjs.org/docs/react-component.html, it can help to understand the life cycle of components.

Thread Thread
shubh710 profile image
Shubham R

dev.to/abu/comment/1egf0
Here your comment says "componentWillUnmount() method has been deprecated"
I didn't find that in the official docs
reactjs.org/docs/react-component.html

Thread Thread
lucasoneves profile image
Thread Thread
shubh710 profile image
Shubham R

That is exactly what I have been talking about whole discussion.
@abu has mentioned componentWillUnmount is deprecated.
But I think WILL UNMOUNT is not deprecated.
Instead componentWillMount is deprecated.
That's what the URL shared by @lucasoneves says WILL MOUNT is deprecated(not WILL UNMOUNT).

Collapse
aalphaindia profile image
Pawan Pawar

Keep posting!

Collapse
smismail profile image
Sayem Mohammad Ismail Author

Thank you for your inspiration. Sure! I will try my best. You guys are awesome <3

Collapse
aalphaindia profile image
Pawan Pawar

You're welcome!

Collapse
khuongduybui profile image
Duy K. Bui

I think by now Hooks should be listed as a basic concept

Collapse
smismail profile image
Sayem Mohammad Ismail Author

Thank you for your thoughtful feedback.

Collapse
saroj8455 profile image
Saroj Padhan

Thank you

Collapse
smismail profile image
Collapse
krzysztof profile image
januchwarchlok

Thank you for your feedback :) Nice

Collapse
djnadackal profile image
djnadackal

How will the vDOM gets cross referred with the DOM. And does JS particularly update that specific section in the DOM.

Forem Open with the Forem app