React JSX

What is JSX?

JSX, or JavaScript XML, enables writing HTML-like code within React. It simplifies creating and embedding HTML in React components.

Coding JSX

JSX lets us write HTML elements directly in JavaScript and insert them into the DOM without needing createElement() or appendChild() methods. It translates HTML tags into React elements.

Here are two examples: the first one utilizes JSX, while the second one does not.

Example 1

JSX:

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

Example 2

Without JSX:

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

JSX is an ES6-based JavaScript extension that allows writing HTML directly in JavaScript, and is converted to regular JavaScript at runtime.