Hacker News Reader

Comment by arcosdev | Hacker News Reader

Is this better for your eyes?

  React.createElement(
      "div",
      null,
      React.createElement(
        "div",
        null,
        React.createElement(
          "p",
          null,
          React.createElement(
            "a",
            { href: "foo" },
            "Link"
          )
        )
      )
    );
    document.getElementById('root')
  );

View on HN

    import {createElement as h} from 'react'
    import {render} from 'react-dom'

    render(
      h('div', null,
        h('div', null,
          h('p', null,
            h('a',
              {href:'foo'},
              'Link',
            ),
          ),
        ),
      ),
      document.getElementById('root')
    )

fwiw, I have no problem with JSX, but the React documentation itself [1] suggests using react-hyperscript, which (along with hyperscript-helpers) makes a very nice syntax:

    div([
      div([
        p([
          a({ href: "foo" }, "Link")
        ])
      ])
    ])

[1] https://reactjs.org/docs/react-without-jsx.html

I had previously shied away from React when I had seen it before because I thought it was another templates-in-code approach. I was actually looking for some kind of Javacript equivalent to ScalaTags[1] that I could use in Typescript when I found out how well React and Typescript worked together.

I guess react-hyperscript is what I was looking for, but I've grown to quite like JSX.

[1] https://github.com/lihaoyi/scalatags

They do not "suggest" using react-hyperscript, it says if you don't want to Babelify your code you can use it. I suppose that's a nice syntax if you really love Lisp, but I sure don't.

Nah, still lot uglier than jsx IMO.

Reply on news.ycombinator.com