ReactDOM

#react #webdev #keeplearning #javascript

Before knowing about ReactDom first we should know about What DOM is?? So Dom is a Document Object Model, a tree-like structure that contains all the elements and properties of a website as its nodes.

What is React-Dom??

The react-dom package provides DOM-specific methods that can be used at the top level of your app to enable an efficient way of managing DOM elements of the webpage.

How to import React-Dom?

To use the ReactDOM in any React web app we must first import ReactDOM from the react-dom packages by the following syntax.

ES6 - import ReactDOM from 'react-dom'
ES5-var ReactDOM = require('react-dom')
ReactDOM provides the developers with an API containing the following methods.

*render()
*hydrate()
*unmountComponentAtNode()
*findDOMNode()
*createPortal()

render( ) : render() is used to render a single React Component or several Components wrapped together in a Component or a div element.

Syntax:

ReactDOM.render(element, container, callback)

Render a React element into the DOM in the supplied container.
If the React element was previously rendered into container, this will perform an update on it.

If the optional callback is provided, it will be executed after the component is rendered or updated.

return a reference to the component or returns null for stateless components.

hydrate(): hydrate() is same as render(), but is used to hydrate a container whose HTML contents were rendered by ReactDOMServer. React will attempt to attach event listeners to the existing markup.

Syntax:

ReactDOM.hydrate(element, container, callback)

unmountComponentAtNode() : unmountComponentAtNode() is remove a mounted React component from the DOM and clean up its event handlers and state.

If no component was mounted in the container, calling this function does nothing. Returns true if a component was unmounted and false if there was no component to unmount.

Syntax:

ReactDOM.unmountComponentAtNode(container)

findDOMNode(): This function is generally used to get the DOM node, this returns the corresponding native browser DOM element. This method is useful for reading values out of the DOM, such as form field values and performing DOM measurements. In most cases,

you can attach a ref to the DOM node and avoid using findDOMNode at all

findDOMNode is an escape hatch used to access the underlying DOM node.

In most cases, the use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode.
This method takes a single parameter component that expects a React Component to be searched in the Browser DOM.

Syntax:

ReactDOM.findDOMNode(component)

createPortal(): Portals provide a way to render children into a dom node that exists outside the hierarchy of the DOM component.

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.

Syntax:

ReactDOM.createPortal(child, container)

Conclusion:

ReactDOM uses observables thus provides an efficient way of DOM handling.

ReactDOM can be used on both the client-side and server-side.

Hopefully, ReactDOM is a bit clear by now. If any queries regarding this write them down below. Thank you for your time and I hoped my blog is helpful for you.

Happy Learning!!