React.js JSX (JavaScript XML)

What is JSX (JavaScript XML) in React.js?

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within your JavaScript files.

JSX provides a more readable and concise way to describe the structure of user interfaces, especially when working with React.

JSX (JavaScript XML): Introduction to JSX Syntax

JSX also you can write HTML-like tags directly in your JavaScript code.

These tags represent React elements, which describe what should be rendered on the screen.

Example:

                                      
                                      const element = <h1>Hello, world!</h1>;

Embedding Expressions in JSX

JSX allows you to embed JavaScript expressions within curly braces {}.

This allows you to include dynamic content, such as variables or function calls, directly within your JSX code.

In the Below example, the value of the name variable is embedded within the JSX code, resulting in the output "Hello, Alice!".

                                      
                                      const name = 'Alice';
const element = <h1>Hello, {name}!</h1>;

JSX Attributes and Props

JSX it allows you to specify attributes on elements, similar to HTML.

These attributes are passed as props (short for properties) to the corresponding React components.

Example:

In this example, src and alt are attributes of the img element. They are passed as props to the img component, which may use them to determine how to render the image.

                                      
                                      const element = <img src="image.jpg" alt="Image" />;

You can also use JavaScript expressions to set attribute values dynamically.

Example:

Here, the value of the src attribute is set dynamically based on the value of the imageUrl variable.

                                      
                                      const imageUrl = 'image.jpg';
const element = <img src={imageUrl} alt="Image" />;