How JSX works in ReactJS? 🤗

Jyoti Ranjan Sharma — Sun, 01 Jan 2023 14:42:23 +0000

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
jyotisemail@gmail.com

DEV Community: Jyoti Ranjan Sharma

How JSX works in ReactJS? 🤗

Conclusion