How JSX works in ReactJS? 🤗

React uses JSX to make developer experience better than other environments. JSX is just an HTML like syntax, but not HTML in Javascript. The Browser can't understand JSX code on it's own. It needs transpilers like Babel to convert JSX code to React.createElement() code, React.createElement() are nothing but JavaScript Objects and then those objects are converted to DOM.

So the flow goes like:
JSX => Babel => React.createElement => Obj => HTML code(DOM)

---

"Babel is a Beast."

---

Before compiling React JSX code, we need Babel to transpile it to the React API format.

JSX Element

const reactElement = <h1>Hello World</h1>

Babel transpiled react version

const reactElement = /*#__PURE__*/React.createElement("h1", null, "Hello World");

---

Conclusion

• JSX is HTML-like syntax, but not actual HTML in JS file.
• Babel is a Beast.

---

YouTube Link
[e-mail]