DEV Community

[Comment from a deleted post]
Collapse
 
avalander profile image
Avalander •

It's not really that bad.

const h = React.createElement

const App = (paragraphs) =>
  h('div', null, [
    h('h1', { class: 'title' }, 'Hello World!'),
    h('div', { class: 'content' },
      paragraphs.map(text => h('p', null, text))
    ),
  ])

Or if that h at the beginning of the line annoys you:

const h = React.createElement

const div = h.bind(null, 'div')
const h1 = h.bind(null, 'h1')
const p = h.bind(null, 'p')

const App = (paragraphs) =>
  div(null, [
    h1({ class: 'title' }, 'Hello World!'),
    div({ class: 'content' },
      paragraphs.map(text => p(null, text))
    ),
  ])

Personally, I think that the biggest advantage of jsx is that people are used to writing HTML, but once you get used to plain functions, it doesn't make a difference.

Collapse
 
hexangel616 profile image
Emilie Gervais •

It looks a lot "cleaner" in JSX imo, but yeah maybe it's because we're used to it.

Collapse
 
seanmclem profile image
Seanmclem •

JSX is one of my favorite things to use these days. It really simplifies building templates in JS