JSX vs sandwiched JSX

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 or vite 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). 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:

const button = <button>Click</button>;
//             |____________________|
//                        |
//                        V
//            JSX expression or just JSX

After compilation it becomes:

const button = React.createElement("button", null, "Click");

Here is an example of a sandwiched JSX expression:

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:

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.

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?

function App() {
  return (
    <div>
      Hello world!
    </div>
  );
}

Answer: No. Because after compilation, it becomes a React.createElement call essentially. It is a JSX expression.

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.