In the previous article on introduction to JSX,
we learned that we can use JSX to store HTML markups within Javascript
variables. Now, ReactJS is a library to build active User Interfaces
thus rendering is one of the integral parts of ReactJS. React provides
the developers with a package react-dom a.k.a ReactDOM to access and modify the DOM. Let’s see in brief what is the need of having the package.
What is DOM?
DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as it’s nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage.
Before React, Developers directly manipulated the DOM elements which resulted in frequent DOM manipulation and each time an update was made the browser had to recalculate and repaint the whole view according to the particular CSS of the page, which made the total process to consume a lot of time. As a betterment, React brought into the scene the virtual DOM. The Virtual DOM can be referred to as a copy of the actual DOM representation that is used to hold the updates made by the user and finally reflect it over to the original Browser DOM at once consuming much lesser time.
What is ReactDOM?
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing following methods and a few more.
Syntax:
Syntax:
Return Type: This function returns the DOM node where the component was rendered on success otherwise null.
Syntax:
Return Type: This function returns true on success otherwise false.
Syntax:
Syntax:
What is DOM?
DOM, abbreviated as Document Object Model, is a World Wide Web Consortium standard logical representation of any webpage. In easier words, DOM is a tree-like structure that contains all the elements and it’s properties of a website as it’s nodes. DOM provides a language-neutral interface that allows accessing and updating of the content of any element of a webpage.
Before React, Developers directly manipulated the DOM elements which resulted in frequent DOM manipulation and each time an update was made the browser had to recalculate and repaint the whole view according to the particular CSS of the page, which made the total process to consume a lot of time. As a betterment, React brought into the scene the virtual DOM. The Virtual DOM can be referred to as a copy of the actual DOM representation that is used to hold the updates made by the user and finally reflect it over to the original Browser DOM at once consuming much lesser time.
What is ReactDOM?
ReactDOM is a package that provides DOM specific methods that can be used at the top level of a web app to enable an efficient way of managing DOM elements of the web page. ReactDOM provides the developers with an API containing following methods and a few more.
- render()
- findDOMNode()
- unmountComponentAtNode()
- hydrate()
- createPortal()
import ReactDOM from 'react-dom'
render() Function
This is one of the most important methods of ReactDOM. This function
is used to render a single React Component or several Components wrapped
together in a Component or a div element. This function uses the
efficient methods of React for updating the DOM by being able to change
only a subtree, efficient diff methods etc.Syntax:
ReactDOM.render(element, container, callback)Parameters: This method can take a maximum of three parameters as described below.
- element: This parameter expects a JSX expression or a React Element to be rendered.
- container: This parameter expects the container in which the element has to be rendered.
- callback: This is an optional parameter that expects a function that is to be executed once the render is complete.
findDOMNode() Function
This function is generally used to get the DOM node where a
particular React component was rendered. This method is very less used
as the following can be done adding a ref attribute to each component
itself.Syntax:
ReactDOM.findDOMNode(component)Parameters: This method takes a single parameter component which expects a React Component to be searched in the Browser DOM.
Return Type: This function returns the DOM node where the component was rendered on success otherwise null.
unmountComponentAtNode() Function
This function is used to unmount or remove the React Component that
was rendered to a particular container. As an example, you may think of a
notification component, after a brief amount of time it is better to
remove the component making the web page more efficient. Syntax:
ReactDOM.unmountComponentAtNode(container)Parameters: This method takes a single parameter container which expects the DOM container from which the React component has to be removed.
Return Type: This function returns true on success otherwise false.
hydrate() Function
This method is equivalent to the render() method but is implemented while using server-side rendering. Syntax:
ReactDOM.hydrate(element, container, callback)Parameters: This method can take a maximum of three parameters as described below.
- element: This parameter expects a JSX expression or a React Component to be rendered.
- container: This parameter expects the container in which the element has to be rendered.
- callback: This is an optional parameter that expects a function that is to be executed once the render is complete.
createPortal() Function
Usually, when an element is returned from a component’s render
method, it’s mounted on the DOM as a child of the nearest parent node
which in some cases may not be desired. Portals allow us to render a
component into a DOM node that resides outside the current DOM hierarchy
of the parent component.Syntax:
ReactDOM.createPortal(child, container)Parameters: This method takes two parameters as described below.
- child: This parameter expects a JSX expression or a React Component to be rendered.
- container: This parameter expects the container in which the element has to be rendered.
Important Points to Note:
- ReactDOM.render() replaces the child of the given container if any. It uses highly efficient diff algorithm and can modify any subtree of the DOM.
- findDOMNode() function can only be implemented upon mounted components thus Functional components can not be used in findDOMNode() method.
- ReactDOM uses observables thus provides an efficient way of DOM handling.
- ReactDOM can be used in both client-side and server-side.
