DEV Community

Cover image for All About JSX
Nafisa Muntaha
Nafisa Muntaha

Posted on

4 3

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'));
Enter fullscreen mode Exit fullscreen mode

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'));
Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up