Learn React.js (Rendering Elements) — 2

Elements are the smallest building blocks of React apps.

“Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.”

Disclaimer: Please don’t confuse elements with a more widely known concept of components.

<div id="root"></div>

This is “root” DOM node in an html div tag, and everything inside the root will be managed by the React DOM.

To render a React element into a root DOM node, pass both to ReactDOM.render; exp given below.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

React elements are unchangeable over time. Once you create an element, you can’t change its children or attributes. An element is like a single frame/scene in a movie: it represents the UI at a certain point in time. To be precise, if i want to show something in particular time, it would create an element.

React Updates only what is necessary. It compares the elements and its children with the previous one and updates what’s necessary.