What is JSX?

The JavaScript syntax extension used in React to describe the structure of the user interface. It allows writing HTML-like code inside JavaScript files, which is then transpiled into regular JavaScript (calls to React.createElement).

Main advantages:

• Clarity: Enables writing components with a declarative syntax similar to HTML, simplifying reading and understanding the code.
• Component model: Fits organically into React's component approach, making it easier to create and manage UI elements.
• Integration with JavaScript: Allows easy embedding of JavaScript expressions (variables, functions) directly into the markup using curly braces {}.

Example:

// Example of a React component using JSX
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Transformed into:

// Equivalent code in plain JavaScript
function Welcome(props) {
  return React.createElement("h1", null, "Hello, ", props.name, "!");
}