Rendering elements

Question 1

What are React elements?

Answer 1

Elements are the smallest building blocks of React apps. An element describes what you want to see on the screen. 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.

Question 2

Elements & components

Answer 2

Elements are what components are “made of”.

Question 3

Rendering an element into the DOM

Answer 3

<div></div> We call this a “root” DOM node because everything inside it will be managed by React DOM. Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like. To render a React element into a root DOM node, pass both to ReactDOM.render():
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Question 4

Updating the Rendered Element

Answer 4

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time. With our knowledge so far, the only way to update the UI is to create a new element, and pass it to render().

Question 5

React Only Updates What’s Necessary

Answer 5

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state. Thinking about how the UI should look at any given moment, rather than how to change it over time, eliminates a whole class of bugs.