What is JSX in React?

Hi, in this post we are going to talk about JXS, so what is JSX? It’s fairly simple HTML-like syntactic sugar on top of the raw React APIs:

This means that if we have this JSX then at the end will be compiled to JS:

const ui = <h1 id="greeting">Hey there</h1>

// ↓ ↓ ↓ ↓ compiles to ↓ ↓ ↓ ↓
// Javascript
const ui = React.createElement('h1', {id: 'greeting', children: 'Hey there'})

And JSX is not a Javascript we have to convert it (to Javascript) using something called code compiler like for example: BABEL

Note: React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code.

Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names.

For example: class becomes className in JSX, and tabindex becomes tabIndex.

So, the code that we will write is called JSX and the code that run in the browser is called Javascript, and that’s what Babel do – convert our JSX to Javascript creating a new <script> tag with the final code and the browser will take that <script> code and will be evaluate.

By Cristina Rojas.