DEV Community

loading...

Discussion on: Why do you like jsx?

Collapse
avalander profile image
Avalander Author

Thanks for your input!

Could you elaborate on how hyperscript leads to extra code? I don't see much difference between adding <i class="me"></i> or i({ class: 'me' }) in the view code.

Collapse
bgadrian profile image
Adrian B.G.

In this example the extra code is the function named i and the code that handles its properties

Thread Thread
avalander profile image
Avalander Author

The function i would normally be provided by whatever hyperscript library you're using, it's not like you need to implement a new function for each html element that you decide to use.

Thread Thread
bgadrian profile image
Adrian B.G.

In this example yes, but it does not matter who wrote the function, is extra JS code that does not carry its weight. It does not add any benefit, it is just syntax sugar. It is extra code that runs on VM, is downloaded and you have to learn it.
It is not ebough to learn html, you have to learn what elements are in hyperscript as functions, again, a layer of useless complexity in the developers head.

Thread Thread
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:)