Why is JSX HTML on steroids?

Amir Ghezala
May 1 · 3 min read
Designed by Omar Benseddiki.

Undoubtedly, if you ever search for React materials online you will bump into the notion of JSX. Such technical term might be difficult to understand. This article dives into the definition of JSX and how it differentiates from HTML , besides it discusses the reason we use JSX, its different attributes and how it contributes to the web security.

JSX (JavaScript eXtension) is a React extension that enables writing javascript that looks like HTML. It allows us to write a concise and simple to read code. it is used by preprocessors like Babel to alter the HTML look-alike code in JavaScript into objects parsed by JavaScript engine.

Let us go through an example to better grasp the differences. The example below contains a React component with its render function. The render function in React is is used to perform the React JSX content in the DOM.

The render() function below is rendering an HTML tag. The declaration of the element looks similar to HTML, but in fact it is JSX that is interpreted as JavaScript at runtime.

class WelcomeToReact extends React.Component {
  render() {
    return <h1 className="Welcome">WelcomeToReact</h1>;
  }
}

This is how the component looks like after interpretation. After all this JSX syntax is just translated to plain JavaScript.

class WelcomeToReact extends React.Component {
  render() {
    return React.createElement(
      "h1",
      { className: "Welcome" },
      "WelcomeToReact"
    );
  }
}

Why JSX?

Answer: Yes.

However, without JSX it will look inconvenient to present a component with nested children.

Here is how it looks without JSX:

class HiReaders extends React.Component {
  render() {
    return React.createElement(
      "div",
      { className: "class1" },
      React.createElement("h1", { className: "class2" }, "Title"),
      React.createElement("h2", { className: "class3" }, "Hello")
    );
  }
}

And with JSX:

class HiReaders extends React.Component {
  render() {
    return (
      <div className="class1">
        <h1 className="class2">Title</h1>
        <h2 className="class3">Hello</h2>
      </div>
    );
  }
}

JSX Attributes

  • If we have two identical attributes , only the the last one defined that is taken into consideration.
  • React does not render an attribute passed to native HTML elements that is not part of the HTML conditions. However, custom attributes can be used and passed to custom elements.
  • JavaScript reserved words like class and for can't be used in JSX. Instead, React provides such attributes as className and htmlFor.
  • The attributes are camel-cased. For example, in HTML we usetabindex while in React its represented like this:tabIndex.

As mentioned in the article introduction, JSX has a security advantage that makes it a favourable technology to use.

JSX Prevents Injection Attacks?

It is a client-side code injection attack. It allows attackers to insert malicious client-side scripts into web pages accessed by other utilizers.

How is JSX is useful in this case?

As known, React escapes variables in JSX before it renders them. Accordingly, it diminishes the chance of Cross-site scripting (XSS) and confirms security by restricting the insertion of anything that is not explicitly coded in the application.

Conclusion

Got any questions? Let me know in the comments section below!