Rohan Joby's Blog
What is JSX?

What is JSX?

Rohan Joby's photo
Rohan Joby
·

4 min read

JSX or JavaScript XML is simply a syntax extension to JavaScript based on ES6. It allows us to write HTML in React (within JavaScript code) by converting HTML tags into React elements.

The official page says

JSX is a concise and familiar syntax for defining tree structures with attributes

So JSX allows us to describe a hierarchy of elements — either native DOM elements or our own, custom ones, based on function or class components — in a language that appears similar to HTML which pre-processors like Babel eventually translate into JavaScript.

JSX is not part of React. For defining the tree structure for an application, React has the createElement() function. Nesting a number of createElement() calls quickly makes the code harder to understand, and that’s where JSX helps us.

Utilizing JSX allows us to write cleaner code that is easier to write, edit, and read. We can think of JSX as a shorthand for calling React.createElement().

JSX to plain React

Here is a simple example to demonstrate how code, when written in JSX, looks “translated” into React

<div className="content">Hello World</div>

React.createElement("div", {className: "content"}, "Hello World");

You can also use the self-closing form of the tag if there are no children. So:

<div id="root" />

React.createElement("div", {id: "root"});

The API to React.createElement is:

React.createElement(elementType, props, ...children)

  • elementType can be a string or a function (class), defining the type of element to be created
  • props stand for “properties,” and they are arguments passed into React components(or null if we specify no props)
  • ...children define the element’s child(ren) - if any. It refers to all the children we want to be applied to the element.

The spread operator used for children in the above syntax is just a convenience and the following syntax is equivalent to the one above :

React.createElement("div", {id: "root", children: "Hello world"})

If we have multiple children we can use the array syntax for children :

<div>
  <span>Hello</span> <span>World</span>
</div>

React.createElement({
"div",   // type
null,   // props
// children
 children: [
   React.createElement("span", null, "Hello"),
   ' ',
   React.createElement("span", null, "World"),
 ],
})

JSX Represents Objects

What you get back from a React.createElement() call is actually a simple JavaScript object called “React element”. We can think of them as descriptions of what we want to see on the screen.

<div className="content">Hello world</div>

{
  "$$typeof": Symbol(react.element),
  type: "div",
  props: { 
       className: "content", 
       children: "Hello world" 
 },
  key: null,
  ref: null,
  _owner: null,
  _store: {}
};

The $$typeof property identifies the object as a React element.

Next are the type and props we defined for the element. This is the "meat" of our object and it mostly maps 1:1 to the corresponding createElement call, with a few exceptions:

  1. key and ref, which are props with special meaning in React, will not be part of the props object.

  2. React has set up some miscellaneous, underscore-prefixed data on the object. Some of these privates are only used in development mode, for warnings and other similar intentions, and for the purpose of this article, we’ll ignore them.

When we pass an object like that to ReactDOM.render (or any other renderer), it's the renderer's job to interpret that element object and create DOM nodes or whatever else out of it.

Here are a few more examples.

<h1>Hello, {name}</h1>;
React.createElement("h1", null, "Hello, ", name);

<button onClick={() => {}}>click me</button>
React.createElement("button", {onClick: () => {}}, "click me")

<MyButton color="red" shadowSize={5}>
  Delete
</MyButton>

React.createElement(
  MyButton,
  {
    color: "red",
    shadowSize: 5
  },
  "Delete"
);


Conclusion

So, JSX is a nice way to basically write HTML in React. JSX allow us to pass around tree structures composed of HTML or React elements as if they were standard JavaScript values. While it’s not necessary to use JSX while writing code for React, it makes the development and debugging process easier for many developers.
If you'd like to play around with this some more, you can try it online with Babel's online REPL.

Further Reading

  1. reactjs.org/docs/introducing-jsx.html
  2. reactjs.org/docs/jsx-in-depth.html
Reactwebdev