As discussed earlier, JSX is a syntax extension to JavaScript. It allows developers to write JavaScript code that closely resembles HTML.

For example:

 

const element =

Hello React!

;

The tag used above is JSX. JSX is mainly used to describe how the user interface should look. It is not a full template language; instead, it is an extension of JavaScript syntax. JSX creates React elements, which are eventually rendered into the DOM.

 

JSX allows developers to create a Virtual DOM using an XML-like syntax. JSX is compiled into pure JavaScript calls such as React.createElement(), so it can be used anywhere JavaScript is valid.

Assigning JSX to a Variable

 

var greeting =

Hello React!

;

Assigning JSX Conditionally

 

var greeting; var canGreet = true; if (canGreet) {   greeting =

Hello React!

; }

Returning JSX from a Function

 

function Greeting() {   return

Hello React!

; } greeting = Greeting();

Passing JSX as a Function Argument

 

function Greet(message) {   const root = ReactDOM.createRoot(      document.getElementById('react-app')   );   root.render(message); } Greet(

Hello React!

);

 

Using JSX in React is optional, as everything can be done using plain JavaScript. However, JSX provides several important advantages:

Makes UI code easier to read and understand

Optimizes code during compilation, improving performance

Combines markup and logic in a single file

Helps detect errors at compile time

Simplifies template creation

Supports conditional statements and loops

Allows JSX to be stored in variables, passed as arguments, and returned from functions

Helps prevent Cross-Site Scripting (XSS) and injection attacks by escaping values automatically

 

JSX supports JavaScript expressions using curly braces {}. Any valid JavaScript expression can be used inside JSX.

Example

 

Output

 

The current time is 21:19:56 GMT+0530 (India Standard Time)

Using expressions in JSX automatically converts values into HTML-safe strings, which helps prevent injection attacks.

 

JSX also supports user-defined JavaScript functions. Functions can be used in JSX just like expressions.

Example

 

Output

 

The current time is 21:19:56 GMT+0530 (India Standard Time)

 

JSX supports HTML-like attributes, but attribute names follow camelCase naming conventions, as they map to JavaScript DOM properties.

 

JSX allows JavaScript expressions inside attributes using curly braces {}. When using expressions, do not use quotes.

 

 

JSX supports nested elements, known as JSX children. Nested elements are especially useful when creating complex UI structures and nested components.

JSX can include:

HTML tags

Strings

Expressions

Functions

Other components

Values such as false, null, undefined, and true are valid JSX expressions but do not render anything, similar to HTML behavior.

Example of Nested JSX