Why should you write in JSX instead of Javascript?

How to use JSX in React.js? »

In this section you’ll learn why you want to write in JSX instead of Javascript. Off the top of my mind, there are two reasons:

  1. JSX has shorter and conceived syntax. As you might have already noticed that JSX code is so much simpler than the Javascript code.
  2. Sometimes, while writing more sophisticated code, it becomes difficult to manage the code in Javascript. It in fact, becomes difficult to understand the code as well. For example, for the following JSX code:
const App = () => {
    return 
<div>
  
<h1>Hello World!</h1>
My favorite colors:
<ul>
    
<li>Royale Blue</li>
<li>Indigo Blue</li>
<li>Other shades of Blue</li>

  </ul>

</div>;
}

Equivalent Javascript code will be:

"use strict";

var App = function App() {
return React.createElement("div",null,
React.createElement("h1", null, "Hello World!"),
React.createElement("p", null, "My favorite colors:"),
React.createElement("ul",null,
React.createElement("li", null, "Royale Blue"),
React.createElement("li", null, "Indigo Blue"),
React.createElement("li", null, "Other shades of Blue")
)
);
};

As you can clearly see, JSX code is so much easier to read and understand since you’re already aware of HTML. On the other hand, writing equivalent Javascript code is a more cumbersome process. I won’t encourage you to avoid writing plain Javascript code. But, if you often write complicated code using Javascript instead of JSX, you’re more likely to get into issues and challenges which are hard to debug and resolve. That’s why you must prefer writing in JSX instead of Javascript.