1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    How JSX Transforms into JavaScript

    Chris BiscardiChris Biscardi
    reactReact

    A walkthrough using the babel repl to explore how JSX transforms into JS.

    Click here to open the repl.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Chris Biscardi: 0:00 One of the defining features with JSX is how it compiles into JavaScript. To show how it compiles into JavaScript, we'll have to choose the compile target. In this case, we'll work with React.

    0:11 If we go on to the babel rappel, we can take our source code on the left and see what it compiles to on the right. This a little hard to read, but we'll take it into Prettier as well. After formatting the code with Prettier, we'll take the result and put it back into our editor to look at the original source and the output side-by-side.

    0:31 On the left, we can see JSX

  • elements, JSX

    elements, and JSX
      elements. On the right, we can see there are
    • elements compiled to a React.createElement function call. This createElement call takes the type of the element and object to props in any children.

      0:51 Because the createElement call can take many children, a

        element takes all the
      • calls as children, and we can nest this all the way up to our
        .

        0:59 When we start looking at props like the one on our

        , we can see that they get passed in as an object. Finally, the reason we need to import React at the top of our source file is that the compiled output references React as part of the createElement transformation.