What does JSX stand for?

What does JSX stand for?

I am referring to the JSX that is defined as a XML-like syntax extension to ECMAScript, which has become quite popular with the increasing popularity of ReactJS.

JSX stands for JavaScript XML. With React, it's an extension for XML-like code for elements and components. Per the React docs and as you mentioned:

> JSX is a XML-like syntax extension to ECMAScript without any defined semantics

From the quote above, you can see that JSX doesn't have defined semantics, it's just an extension to JavaScript that allows to write XML-like code for simplicity and elegance, and then you transpile the JSX into pure JavaScript function calls with React.createElement. Per the React tutorial:

> JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. > > Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

Any code in JSX is transformed into plain JavaScript/ECMAScript. Consider a component called Login. Now we render it like so with JSX:

<Login foo={...} bar={...} />

As you can see, JSX just allows you to have XML-like syntax for tags, representing components and elements in React. It's transpiled into pure JavaScript:

React.createElement(Login, { foo: ..., bar: ... });

You can read more at the docs.

JSXJavaScript stand for syntax extension.It's similar to XML. You can use a simple JSX syntactic transform with React.

JSX - JavaScript Syntax Extension A preprocessor step that adds XML syntax to JavaScript

JSX stands for JavaScript XML (eXtensible Markup Language).

JSX is one of the examples of syntactic sugar in JavaScript.

Syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express.

Component written using JSX:

const MyComponent = () => { 
  return <div> 
    <p>This is not HTML...!</p> 
    <p>Wait...Is this JavaScript?</p> 
    <p>No, What the hell is this?</p> 
    <p>This is JSX.</p> 
  </div> 
} 

In case we don’t want to use JXS then the corresponding code for the above code snippet will look like.

const MyComponent = () => { 
  return React.createElement("div", null, React.createElement("p", null, "This is not HTML...!"), React.createElement("p", null, "Wait...Is this JavaScript?"), React.createElement("p", null, "No, What the hell is this?"), React.createElement("p", null, "This is JSX.")); 
};

Read More:

Syntactic sugar - Wikipedia

Introducing JSX – React

According to React Doc :

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

This funny tag syntax is neither a string nor HTML.

It is called JSX, and it is a syntax extension to JavaScript

What JSX does is producing React “elements” . but how ?

Under the hood, JSX is being compiled by JavaScript compiler named Babel and converted to vanilla javascript

this is a class component in React using JSX :

class Hello extends React.Component {
  render() {
    return <div>Bonjour {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="momo" />,
  document.getElementById('root')
);

this is the same class component without JSX :

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Bonjour ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {name: 'momo'}, null),
  document.getElementById('root')
);

As you see every JSX is just a calling for React.createElement() So whatever you can do with JSX you can do it just with plain JavaScript . but for more simplicity of your code it is much better to use JSX

JSX stand for Javascript with XML like syntax

 eg.
<div>
</div>
or <td>
</td>

same like XML format put it in return form in class defined