Why is JSX HTML on steroids?

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?

Is it possible to write React component without resorting to 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

The following points are some of the main information about 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?

First lets define the term Cross-site scripting (XSS) :

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

To conclude, we’ve looked at JSX and what makes it so special. We’ve seen how it differentiates from HTML and why React components are generally written in JSX even-though they dont have to be. It also enforces web security and prevents injected attacks in web-pages.

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