Why is JSX syntax so delicious?

Foreword


Although there are more and more frameworks (React, Vue) that access JSX syntax nowadays, it is undoubtedly React that has the deepest relationship with it. In 2013, when React came out with JSX, the community had a lot of controversy about JSX, but now, more and more people have to say "really fragrant" in the face of JSX! Typical "True Fragrance" series.

What is JSX?


According to the official explanation of React, JSX is a syntax extension of JavaScript, similar to template syntax, or an ECMAScript syntax extension similar to XML, and has all the functions of JavaScript.
This explanation abstracts away two key points:

"JavaScript Syntax Extensions"
"All the power of JavaScript"

The positioning of JSX is a "syntax extension" of JavaScript, not a "version", which determines that browsers will not support JSX as they naturally support JavaScript. This begs the question "How does JSX work in JavaScript?"

How does JSX syntax work in JavaScript?


React
In the React framework, how does the syntax of JSX work in JavaScript? The explanation given on the React official website is that JSX will be compiled into React.createElement(), and React.createElement() will return a JS object called "React Element".
Compilation for JSX is done by Babel.
Babel is a toolchain for converting code written in ECMAScript 2015+ syntax into backwards-compatible JavaScript syntax to run in current and older browsers or other environments.
Of course, Babel also has the ability to convert JSX to JS. Let's look at an example: the left side is the syntax written in our React development, and contains a piece of JSX code. After Babel conversion, it all becomes JS code.

In fact, if you look closely, you will find that JSX is more like a syntactic sugar, describing function objects in a way similar to template syntax. In fact, the use of JSX syntax is not mandatory in React, we can also use the React.createElement function, for example, use the React.createElement function to write such a piece of code.
class Test extends React.Component {
render() {
return React.createElement(
"div",
null,
React.createElement(
"div",
null,
"Hello, ",
this.props.test
),
React.createElement("div", null, "Today is a fine day.")
);
}
}

ReactDOM.render(
React.createElement(Test, {
test: "baixiaobai"
}),
document.getElementById("root")
);

After adopting JSX, this code will be written like this:
class Test extends React.Component {
render() {
return (

Hello, {this.props.test}

Today is a fine day.


);
}
}
ReactDOM.render(
,
document.getElementById('root')
);

Through comparison, it is found that under the premise of the same actual functional effect, the JSX code has clear layers and clear nesting relationships; while the React.createElement code gives people a very confusing "mixed feeling", which is not only unfriendly to read, but also unfriendly to read. It is also hard to write.
The code written by JSX syntax is more concise, and the code structure level is clearer.
JSX syntactic sugar allows us developers to write our JS code like HTML. While reducing learning costs, it also improves our R&D efficiency and R&D experience.
vue
Of course, the JSX syntax is no exception in the Vue framework, although Vue recommends templates by default.
Why is the default recommended template syntax, a quote from the Vue official website is as follows:
Any compliant HTML is a valid Vue template, which also brings some unique advantages:

For many developers used to HTML, templates are more natural to read and write than JSX. There is of course an element of subjective preference here, but if this distinction leads to an improvement in development efficiency, then it has objective value.
HTML-based templates make it easier to gradually migrate existing applications to Vue.
This also makes it easier for designers and new developers to understand and participate in the project.
You can even use other template preprocessors like Pug to write Vue templates.

Related Articles

Explore More Special Offers

  1. Short Message Service(SMS) & Mail Service

    50,000 email package starts as low as USD 1.99, 120 short messages start at only USD 1.00