React w/ JSX vs React w/out JSX

In development, developers use many tools in order to simplify the work needed to be done and make their jobs easier through user-readability.

One of these tools that developers use with React is JSX. JSX stands for Javascript XML, as it allows developers to write HTML in React, by converting HTML tags into react elements. JSX was created by Facebook in order to make an efficient way of utilizing tree structures and their attributes.

Functionally, JSX is a syntactically more efficient way of writing React.createElement(component, props, …children) method written in Javascript. With JSX creating a main-display div would look like:

<div className="main-display" />

Which is a much shorter and more syntactically pleasing version of creating a main-display div using Javascript:

React.createElement(
'div',
{className: 'main-display'}
)

JSX is a more reader friendly of the method React.createElement(), while it still gives developers a clear and defined structure to work with tree structures. While JSX is not required to use React, it is extremely useful when it comes to child components. For example, if I wanted to add a selected display component to our main display div…

With JSX:

<div className="main-display">
<SelectedDisplay item={'hammer'}/>
</div>

Without JSX:

React.createElement(
'div',
{className: 'main-display'},
React.createElement(SelectedDisplay, {item:'hammer'})
)

In this example, it’s very apparent how much harder to read react code without JSX is, and why JSX is so widely accepted in development when using react. Nesting many React.createElement() methods would prove difficult to read, and have a much more complex structure than nested child components using JSX. Without JSX handling each component, the needed props, and their children would be a grueling task.