4.5 What JSX really is

Watch the video course

Overview

What you'll learn:

  • What JSX is
  • Converting JSX to JS
  • React as an object
  • Adding attributes in JS

What is JSX?

So far we’ve built quite a few prototypes with JSX. As you’ve seen, JSX code looks like HTML. We have angle brackets, open and close tags, attributes and so on. However, JSX is far more powerful than HTML. We can define our own custom tags and treat tags as a template to hold dynamic values.

Still, what exactly is JSX? For example, why can we put a bunch of tags after return such as in our Slider, Skinny and App components? It's almost as if these groups of tags resemble a number or a string.

JSX is just JS

The short answer is that JSX code is just JavaScript. There is nothing incredibly mysterious or fancy. Understanding this is very useful for us to learn more about React.

Let’s dive deeper into what I mean.

First, we are going to completely comment out our background <Frame> (CTR + /).

Converting JSX to JS

<Frame ...>
 {/*<Frame
  // bg
  size={500}
  top={50}
  left={20}
  background={null}
  image="https://image.flaticon.com/icons/svg/119/119596.svg"
  animate={bgAnim}
 />*/}
 ...
<Frame>

If we write this below the commented out <Frame>

{/*<Frame
  // bg
  size={500}
  top={50}
  left={20}
  background={null}
  image="https://image.flaticon.com/icons/svg/119/119596.svg"
  animate={bgAnim}
 />*/}
React.createElement(Frame)
...
literal text in preview

We will only get the literal text. However, if we add a pair of curly brackets to make it dynamic we get a blue square here — a <Frame>.

Adding curly brackets

{/*<Frame
  // bg
  size={500}
  top={50}
  left={20}
  background={null}
  image="https://image.flaticon.com/icons/svg/119/119596.svg"
  animate={bgAnim}
 />*/}
{React.createElement(Frame)}
...
frame

Therefore, this function has the same effect as if we put in a <Frame> tag.

What does this statement mean?

{
  React.createElement(Frame)
}

Moreover, what is this createElement and dot notation?

Well, React is an object which has a property called createElement. The value of the property is a function. Here we are just calling this function with the parameter Frame.

This means if we don’t have all our previous attributes on our background <Frame> tag, that function statement would be equivalent to the original tag.

However, what can we do about the attributes?

Adding attributes

Let’s start with the size attribute. We can add attributes to this function Frame using more objects.

{
  React.createElement(Frame, { size: 500 })
}
function frame size 500

We now get a larger box that resembles our first background <Frame>.

Therefore, if we migrate all the attributes to this function Frame with object syntax, we will get the same output as we originally had.

{
  React.createElement(Frame, {
    size: 500,
    top: 50,
    left: 20,
    background: null,
    image: 'https://image.flaticon.com/icons/svg/119/119596.svg',
    animate: bgAnim,
  })
}
function background

Replacing all our JSX image Frames with JS

{
  /* background*/
}
{
  React.createElement(Frame, {
    size: 500,
    top: 50,
    left: 20,
    background: null,
    image: 'https://image.flaticon.com/icons/svg/119/119596.svg',
    animate: bgAnim,
  })
}

{
  /* sun */
}
{
  React.createElement(Frame, {
    left: 155,
    top: 15,
    background: null,
    image: 'https://image.flaticon.com/icons/svg/789/789395.svg',
    animate: sunAnim,
  })
}

{
  /* clouds */
}
{
  React.createElement(Frame, {
    left: 335,
    top: 55,
    image: 'https://image.flaticon.com/icons/svg/414/414927.svg',
    background: null,
    animate: cloudsAnim,
  })
}

{
  /* bird */
}
{
  React.createElement(Frame, {
    left: 35,
    top: 200,
    image: 'https://image.flaticon.com/icons/svg/789/789392.svg',
    background: null,
    animate: birdAnim,
  })
}

Everything still works!

final

Conclusion

We converted all our JSX tags to plain old JavaScript calls! However, we aren't done yet! In the next post, we'll convert all of our JSX tags to JS.