JSX and the Virtual DOM: A Peek Under the Hood

JSX

const bestSportsTeam = <p>Carolina Panthers, duh.<p>return (
<div>
{bestSportsTeam}
</div>
)
<div>
<p>
Carolina Panthers, duh.
</p>
</div>
const bestSportsTeam = React.createElement(
'p',
'Carolina Panthers, duh.'
)

The Virtual DOM

To recap:

  1. An extension of JavaScript that allows writing HTML and JavaScript together in one file.
  2. Accomplished through a series of React.createElement() calls.
  3. When compiled, JSX is turned into cheap, plain JavaScript objects to be rendered to the DOM.
  1. An application’s state changes.
  2. React creates a new version of the Virtual DOM and compares the pre-update Virtual DOM with the post-update Virtual DOM (diffing).
  3. Only the elements that were changed are updated on the actual DOM through the ReactDOM library (reconciliation).
  4. The browser updates and the new application state is displayed on the screen.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeff Golden

Jeff Golden

Frontend developer, mountaineer, husband and dog wrangler.