A Live Developer Journal

React Rendering Elements

React elements are the building blocks of React applications. They are different to DOM elements in that they describe what you want to see on the page, while DOM elements are actual instances of the elements on a web-page. React takes care of converting these descriptions into actual elements for you in the React DOM (React, 2020).

To render an element in React, you need to pass the react element, and the parent container you want to put it inside into a ReactDOM.render() method:


const element = "

{ kitten.name }

" ReactDOM.render(element, document.querySelector('kitten-name'));

The parent container is called the "root DOM node" in React. According the the React documentation page (2020), you can have as many root DOM nodes as you want if you are integrating React into an existing system. However, it's typical for applications built in React from the start to have just the one root DOM node.

Note: The React documentation example used 'getElementById', I prefer to use 'querySelector' because it lets you select elements by more than just the id (Beamatic, 2019), which means I can use the same selector no matter what I'm selecting for consistency.

React elements are immutable, so we can't change any of their content, attributes or properties once they have been created. The only way to update elements in React is to create a new element containing the updated information (React, 2020).

When we want to update elements in React, we pass in the whole element description into the ReactDOM.render method. If the element hasn't been created before, React will render the whole thing. If the element has been created before, then React will only re-render the specific sub-element/s that have changed from the previous render (React, 2020).