Virtual DOM and JSX

Virtual DOM

One main reason behind JS Web-Frameworks is the “virtual DOM”. But what is the Virtual DOM and why is it better then the “original DOM”?

Each change in the “original DOM” triggers a “redraw” of the whole DOM in the browser which can be (dependent on your DOM) very resource intensive.

Changes in the “virtual DOM” happen only at the level of the elements which are changed (therefore more performant) and only the difference between the “old” DOM and the “new” DOM is then pushed to the browser.

Also not every little change is directly transfered to the “original” DOM but all changes are gathered together, performed on the virtual DOM and then this difference is pushed to the original DOM which also increases performance.

vdom
Source: https://reactjs.de/artikel/vdom-react/

JSX

JSX stands for Javascript XML or Javascript Syntax Extension and is an extension of the typical JavaScript grammar for React.

With JSX your are now “allowed” to write HTML in JS like that:

function render() {
  return <p>Hi everyone!</p>;
}

Native JavaScript would produce the following error:

Uncaught SyntaxError: Unexpected token <

“React” uses Babel to directly transform “React” HTML-Code in JavaScript Code. See here Online Babel Compiler

Therefore in React you write HTML in your .js files, not your .html files.

See JSX in depth for more details.

Share this post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.