All About JSX

JSX:

JSX stands for JavaScript XML. JSX allows to write HTML in react and makes it easier to write and add it. It lets to write any JavaScript or react expression inside { }. After the compilation, it becomes a normal JavaScript function calls. JSX properties make use of camelcase notation while naming HTML attributes. That’s why tabindex in HTML is called tabIndex in JSX. Even in event listeners, lowercase is used in HTML but camelcase is used in JSX.

In HTML, there are self-closing tags but in JSX, a forward slash before the closing bracket must be included. It is a must in JSX, or else it will throw an error for elements of self-closing tags like HTML. It allows to write multiple tags inside one parent element like in HTML, but it is needed to put the parent element inside ‘( )’ in JSX.

_With JSX: _

import React from 'react';
import ReactDOM from 'react-dom';

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

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

Without JSX:

import React from 'react';
import ReactDOM from 'react-dom';

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

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

Advantages and disadvantages:

JSX makes it easier to write and add HTML elements in react, can easily convert HTML elements into react elements, and is faster than normal JavaScript. It places them into the DOM and converts them into react elements. It makes it easier to write react applications. Most of the errors are identified while compiling them.

There are disadvantages of it as well along with advantages. It gives an error if anything in HTML is not correct and if HTML elements are not properly closed JSX. In JSX, HTML codes must have one parent element of all the child elements.