DEV Community

loading...

Discussion on: Why do you like jsx?

denisinvader profile image
Mikhail Panichev

But JSX also compiles into javascript functions, doesn't it?

Thread Thread
martinhaeusler profile image
Martin Häusler

As far as I know, JSX compiles to only one function, the h function (or hyper function). The type of element you create is actually passed as the first argument as a string to this function. Therefore, as long as you only create built-in HTML elements (and not, let's say, custom react components) there are no additional functions involved.

The h-function takes three parameters:

  • The name/type of the element as a string
  • The properties of the element as an object
  • An array of child elements, in turn produced by the h function

So, this example:

<span><i>Hello!</i></span>

would compile to something like this:

h('span', {}, [ h('i', {innerHTML: 'Hello!'}, []) ] )

Thread Thread
denisinvader profile image
Mikhail Panichev

sounds reasonable:)