DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for All About JSX
Nafisa Muntaha
Nafisa Muntaha

Posted on

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.

Top comments (0)

16 Libraries You Should Know as a React Developer

Being a modern React developer is not about knowing just React itself. To stay competitive, it is highly recommended to explore the whole ecosystem. This article contains some of the most useful React component libraries to speed up your developer workflow.