JSX vs sandwiched JSX
Tags: react, javascript
Published: 2021-07-31 03:00:50

## Introduction
It seems to me, there isn't enough well organized and easily understandable definitions of React related terms on the web for React learners. I was having confusion with some JSX terminology. In this article my goal is to clear up this confusion and to share with you what I've understood. I've also created a term in the process. I hope this article will be helpful. Let's dig in.

## What is JSX?
JSX stands for **JavaScript Syntax Extension**(sometimes also referred to as **JavaScript XML**). It is a XML-like syntax for calling `React.createElement` function. It saves a lot time of React developers because of its simplicity.

**JSX code** is code that follows the syntax of JSX. 

> All JavaScript code are valid JSX code, but not all JSX code are valid JavaScript code.

A file where you write JSX code is called a **JSX file** and it is usually given the extension `js` or `jsx`. This file should be compiled to JavaScript for running because there is no native support for JSX in web browsers.

Batteries included tools like [`create-react-app`](https://create-react-app.dev/) or [`vite`](https://vitejs.dev/) helps us accomplish this step without any headache and get started quickly.

A **JSX expression** is simply a XML-like translation of the `React.createElement` function call, respecting the JSX syntax rules. A JSX expression is also frequently called **JSX** for short.

## What is sandwiched JSX?
If a part(let's call it *A*) of your JSX code has JSX expression(s) in it and that part(*A*) compiles to a JavaScript expression which is something other than a `React.createElement` call, then that part(*A*) of your JSX code is called a **sandwiched JSX expression** or **sandwiched JSX** for short. Well as you can guess this is the term invented by me 😋

> I've made this term because I didn't find a name anywhere on the web for this. On a syntactical level it's neither fully a JavaScript expression nor JSX expression([After compilation, JSX expressions become regular JavaScript function calls](https://reactjs.org/docs/introducing-jsx.html#jsx-is-an-expression-too)). Please correct me in the comments if it was not necessary actually or let me know if you have found a easier way to define it. 

Below is an example of a simple JSX expression:
```jsx
const button = <button>Click</button>;
//             |____________________|
//                        |
//                        V
//            JSX expression or just JSX
```
After compilation it becomes:
```javascript
const button = React.createElement("button", null, "Click");
```

Here is an example of a sandwiched JSX expression:
```jsx
function Movies() {
  return (
    [ // -------------------------------------+
      <li key="1">Aguntuk</li>,            // |    | Sandwiched JSX expression
      <li key="2">Hirak Rajar Deshe</li>,  // |--->|  or  
      <li key="3">Sonar Kella</li>         // |    | Sandwiched JSX
    ] //--------------------------------------+
  );
}
```

Note that either *the whole returned expression wrapped in parentheses* or *the array inside* is a sandwiched JSX. After compilation it becomes:

```javascript
function Movies() {
  return [
    React.createElement("li", {
      key: "1"
    }, "Aguntuk"),
    React.createElement("li", {
      key: "2"
    }, "Hirak Rajar Deshe"),
    React.createElement("li", {
      key: "3"
    }, "Sonar Kella")
  ];
}
```

Look how verbose it is. It can become extremely complex looking, if you have a few level of nesting. Thanks to JSX. To play with how JSX converts to JavaScript, you can try out the [the online Babel compiler](https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA).

What makes JSX recursively awesome is that inside of JSX within a `{}` you can include:
* Any JavaScript expression
* Any JSX expression
* Any Sandwiched JSX expression

## Quiz
Is the returned expression a sandwiched JSX?
```jsx
function App() {
  return (
    <div>
      Hello world!
    </div>
  );
}
```

**Answer**: No. Because after compilation, it becomes a `React.createElement` call essentially. It is a JSX expression.
```javascript
function App() {
  return React.createElement("div", null, "Hello world!");
}
```

## Summary
* JSX has two meaning depending on context:
  1. A XML-like syntax extension to JavaScript for easily calling `React.createElement` function.
  2. Short for JSX expression(which is the XML-like syntax corresponding to a `React.createElement` function call).
* Sandwiched JSX expression or sandwiched JSX is essentially JSX code which compiles to a JavaScript expression and has JSX expression(s) in the original form but itself is not a JSX expression.

To learn more about JSX check out links in the References section below.

## References
* [Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)
* [JSX in depth](https://reactjs.org/docs/jsx-in-depth.html)
* [JSX specification](https://facebook.github.io/jsx/)
* [JSX on Wikipedia](https://en.wikipedia.org/wiki/JSX_(JavaScript))

## Acknowledgement 
* The cover photo is based on <https://unsplash.com/photos/IZ0LRt1khgM>