JSX Full Form

The full form of JSX is JavaScript XML. It allows us to directly write HTML in React with the JavaScript code.

What is JSX?

JSX or JavaScript XML is a syntax extension of JavaScript. It is used in React to define how the user interface should look like. It simplifies writing and understanding the code.

It is faster than normal JavaScript as it performs optimizations while translating to regular JavaScript. Instead of separating the markup and logic in separated files, React uses components for this purpose. We will learn about components in detail in further articles. 

Syntax:

const element = <h1>Welcome to GeeksforGeeks.</h1>;

Characteristics

• JSX is not mandatory to use there are other ways to achieve the same thing but using JSX makes it easier to develop react application.
• JSX allows writing expression in { }. The expression can be any JS expression or React variable.
• To insert a large block of HTML we have to write it in a parenthesis i.e, ().
• JSX produces react elements.
• JSX follows XML rule.
• After compilation, JSX expressions become regular JavaScript function calls.
• JSX uses camelcase notation for naming HTML attributes. For example, tabindex in HTML is used as tabIndex in JSX.

Advantages

• JSX makes it easier to write or add HTML in React.
• JSX can easily convert HTML tags to react elements.
• It is faster than regular JavaScript.
• JSX allows us to put HTML elements in DOM without using appendChild() or createElement() method.
• As JSX is an expression, we can use it inside of if statements and for loops, assign it to variables, accept it as arguments, or return it from functions.
• JSX prevents XSS (cross-site-scripting) attacks popularly known as injection attacks.
• It is type-safe, and most of the errors can be found at compilation time.

Disadvantages

• JSX throws an error if the HTML is not correct.
• In JSX HTML code must be wrapped in one top-level element otherwise it will give an error.
• If HTML elements are not properly closed JSX will give an error.

Example: This example demonstrates writting Basic JSX code to create a React Component.

// Filename - index.js

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

const name = "Learner";

const element = <h1>Hello,
{ name }.Welcome to GeeksforGeeks.< /h1>;

ReactDOM.render(
    element,
    document.getElementById("root")
);

Output: