What is JSX

In the field of web development, we often use HTML to define content, CSS to define appearance, and JavaScript to define logic.

But increasingly, as web applications become more and more interactive, developers often encounter situations where logic determine the content as well as the appearance.

These three vital components of the web have become more and more inseparable.

So what if, there is a way for us to put everything together, instead of jumping across multiple files? This is why JSX was created.

JSX stands for JavaScript XML, it is a syntax wrapper that allows us to write HTML inside JavaScript.

For example, with plain JavaScript, you need to manage exactly what to do at each DOM node, but with JSX, you can return a piece of HTML code:

.
├── .gitignore
├── README.md
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── public
│   ├── favicon.svg
│   └── icons.svg
├── src
│   ├── App.css
│   ├── App.jsx
│   ├── assets
│   │   ├── hero.png
│   │   ├── react.svg
│   │   └── vite.svg
│   ├── index.css
│   └── main.jsx
└── vite.config.js

src/App.jsx

function App() {
  return <p>Hello, world!</p>;
}
 
export default App;

It describes what the UI should look like, React handles what to do.

You can go one step further, and add some logic to our example:

src/App.jsx

function App() {
  const isActive = true;
 
  if (isActive) {
    return <p>Status: active</p>;
  } else {
    return <p>Status: inactive</p>;
  }
}
 
export default App;

Try to change the value of isActive and see how the output changes. Different HTML code should be rendered based on the truthiness of isActive.

JSX also allows you to embed variable or statements using the curly braces ({}):

function App() {
  const name = "John Doe";
 
  return <p>Name: {name}</p>;
}
 
export default App;

This example will be rendered into:

However, you should note that JSX isn't entirely like HTML, there are a few more rules you must follow.

For example, for each React component, only one root element can be returned. The following code snippet will not work as multiple root elements are returned.

function App() {
  return (
      <img src="/my-image.png" alt="This is an image" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
        assumenda, laudantium odio quis magnam facilis nemo nobis cum iste
        laborum corporis dignissimos omnis qui sunt! Porro eligendi magnam
        voluptate repudiandae!
      </p>
      <button>Click Here</button>
  );
}
 
export default App;

To make it work, you can wrap the elements inside a <div>.

function App() {
  return (
    <div>
      <img src="/my-image.png" alt="This is an image" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
        assumenda, laudantium odio quis magnam facilis nemo nobis cum iste
        laborum corporis dignissimos omnis qui sunt! Porro eligendi magnam
        voluptate repudiandae!
      </p>
      <button>Click Here</button>
    </div>
  );
}
 
export default App;

Or if you don't want the extra <div> element, use an empty tag instead (<></>).

function App() {
  return (
    <>
      <img src="/my-image.png" alt="This is an image" />
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam
        assumenda, laudantium odio quis magnam facilis nemo nobis cum iste
        laborum corporis dignissimos omnis qui sunt! Porro eligendi magnam
        voluptate repudiandae!
      </p>
      <button>Click Here</button>
    </>
  );
}
 
export default App;

This empty tag is called a Fragment in React, and it allows you to group multiple elements together without having to create an extra node.

In practice, you should avoid having an excessive DOM size, as a large DOM can slow down your page's performance.

Besides having only one root element, you are also required to close all tags, and self-closing tags such as <img> must become <img />.

<img src="/my-image.png" alt="This is an image" />

Behind the scene, JSX will be compiled into plain javascript, and the attributes become variables and objects.

However, since there are limitations to variable names in JavaScript, the same rules apply to the attributes.

This is why, the attributes must be written in camelCase.

For example, stroke-width must be written as strokeWidth, and aria-label must be ariaLabel.

And there is a special case, and that is the class attribute. Since class is a keyword in JavaScript used to declare a new class, it must be written as className in JSX:

<button className="bg-red text-center">Click Here</button>