React JS JSX

JSX (JavaScript XML) is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It's primarily used with React to describe what the UI should look like. JSX makes it easier to write and understand the structure of UI components in React.

Here's a simple example of JSX code in a React component:

import React from 'react';

function MyComponent() {

return (

<div>

<h1>Hello, world!</h1>

<p>This is a JSX example.</p>

</div>

);

}

export default MyComponent;

In this example:

• The <div> element is used to group the <h1> and <p> elements.
• The <h1> element displays the text "Hello, world!".
• The <p> element displays the text "This is a JSX example.".

JSX code can contain expressions inside curly braces {}. This allows you to embed JavaScript expressions within JSX. For example:

import React from 'react';

function MyComponent() {

const name = 'Sridhar';

return <h1>Hello, {name}!</h1>;

}

export default MyComponent;

In this example, the value of the name variable is inserted into the JSX output.