Rendering React Elements with JSX

Last week we introduced JSX and discussed how it is a syntax extension to JavaScript that makes life easier when writing React code.

Today, let's talk about how we can use JSX to render elements to the DOM.

React Elements in the DOM

The DOM is an abstract representation of a document as a logical tree in memory.

In regular JavaScript we typically access and change, or mutate, nodes on the tree using methods like document.querySelector(), document.appendChild(), and document.removeChild(). This involves traversing the DOM and directly changing elements in the tree.

So, if we wanted to insert a header into our HTML document using JavaScript we would do something like this:

// Assuming that we have a <div> element in our HTML document with an id of 'root'
const container = document.querySelector("#root")

const element = document.createElement("h1")
element.textContent = "Hello world!"

container.appendChild(element)

Unfortunately this process is relatively slow and inefficient, particularly in larger applications.

React does things a little differently. Rather than directly interacting with the DOM, in React we pass all of our DOM nodes to the ReactDOM.render() method:

ReactDOM.render(element, container[, callback])

The render() method takes the element that we want to render to the DOM, and the container node that we want to render into.

We can also pass an optional callback function to the render() method, which will be executed after the element is rendered or updated.

ReactDOM serves as the glue between React and the DOM. All of the ReactDOM functionality shipped in the main React package at first, but was split into its own package in version 0.14 to allow the use of React in different contexts than just the DOM (like react-native, for example).

The simplest example of how this plays out can be found in the React docs:

// Assuming that we have a <div> element in our HTML document with an id of 'root'

const element = <h1>Hello React!</h1>
ReactDOM.render(element, document.querySelector("#root"))

This example will display "Hello React!" on the screen, using ReactDOM to add our h1 element to the DOM node with the id of root.

React Elements are Immutable

Unlike normal DOM nodes, React elements are immutable.

In the above example, the only way for us to change the contents of our h1 element would be to pass another, different element to ReactDOM.render(), essentially overwriting our entire application.

In practice, we usually make one call to ReactDOM.render() as our application starts, and then rely on ReactDOM to update pieces of our application as necessary. Again from the React docs:

ReactDOM.render() controls the contents of the container node you pass in. Any existing DOM elements inside are replaced when first called. Later calls use React’s DOM diffing algorithm for efficient updates.

In other words, when we pass elements off to ReactDOM.render() we are allowing React to deal with interfacing between the browser's DOM and the elements that we are writing in JSX.

As the state of our application changes, React deals with efficiently updating only the pieces of the DOM that must be changed using its 'diffing algorithm.'

Because we can rely on React to deal with this efficiently, we no longer need to directly traverse the browser's DOM nodes with JavaScript to mutate values in our UI.