JSX - JavaScript

JSX is a syntax extension for JavaScript, used to write HTML-like structures in JavaScript code. It is used mainly with React, a popular front-end library built on top of JavaScript.

Features

• Provides syntax for using HTML-like tags, making writing UI components easier and more intuitive.
• Supports embedding of JavaScript expressions within the tags.
• Can be used without any transpilation, but typically is converted into plain JavaScript by a transpiler such as Babel.

Example

import React from 'react';

function MyComponent(props) {
  return (
    <div className="my-component">
      <h1>{props.title}</h1>
      <p>{props.subtitle}</p>
      {props.items.map((item, idx) => <span key={idx}>{item}</span>)}
    </div>
  );
}

In the above example, we define a React component called MyComponent that takes in some props (title, subtitle, and items). The JSX code defines a div element with a class name of my-component, with a h1 element that displays the title prop, a p element that displays the subtitle prop, and a list of span elements that display each item in the items prop array.

Conclusion

JSX is a powerful and intuitive tool for writing UI components in JavaScript, particularly in conjunction with React. Its HTML-like syntax makes it easier to write and understand complex UI code.