In development, developers use many tools in order to simplify the work needed to be done and make their jobs easier through user-readability.
<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…
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.