When we build our virtual DOM by constantly calling the React.createElement()
method, it becomes quite hard to translate these multiple function calls visually into a hierarchy of HTML tags. Don't forget that even though we're working with a virtual DOM, we're still creating a structure layout for our content and user interface. Wouldn't it be great to be able to visualize that layout easily by simply looking at our React code?
JSX is an optional HTML-like syntax that allows us to create a virtual DOM tree, without using the React.createElement()
method.
Let's take a look at the previous example that we created without JSX:
import React from 'react'; import ReactDOM from 'react-dom'; const listItemElement1 = React.DOM.li( { className: 'item-1', key: 'item-1' }, 'Item 1' ); const listItemElement2 = React.DOM.li( { className: 'item-2', key: 'item-2' }, 'Item 2' ); const listItemElement3 = React.DOM.li( { className: 'item-3', key: 'item-3' }, 'Item...