What are the nodes in reactjs?

Question

I am very new to Reactjs, I have encountered this problem while I am learning react, What are nodes in reactjs, and how nodes are useful in reactjs and why we have to use them? Explain me in simple real time scenarios.

Answer 1

React nodes are basically equivalent to DOM nodes. To simplify, we can just talk about them as generic 'nodes.'

A node is the basic building block of a web page. All HTML elements (div, a, p) are nodes, as well as document, text, attributes...

You can create these nodes as separate entities, and then organize them into a tree (the DOM) in a parent-child hierarchy. document is the root, and then any nodes you add as children will be added to the page. W3Schools has a basic diagram here: https://www.w3schools.com/js/js_htmldom_navigation.asp

Part of what makes React fast is that is builds a virtual DOM, and then compares the actual DOM with the virtual DOM to replace only the nodes which have changed since the previous render. But conceptually, React nodes and DOM nodes are equivalent.

See this answer as well: What is a node in Javascript?

And the MDN docs for node:https://developer.mozilla.org/en-US/docs/Web/API/Node

Answer 2

The primary type or value that is created when using React is known as a React node.

React nodes are not real DOM nodes (like element, text or attribute nodes) themselves, but a representation of a virtual DOM. In a nutshell, React is used to define a virtual DOM using React nodes, that fuel React components, that can eventually be used to create a real DOM structured or other structures. We can create React nodes using JSX or JavaScript