6 ms·

This return <some pseudo-HTML-code>; always makes my eyes bleed.

globuous 8y ago
Really ? How do you generate HTML code in a composable way then ? Or is it that you just prefer the pseudo lisp way with createEl ?
jchw 8y ago
JSX makes your eyes bleed? Perhaps you would love E4X as well! Pretty much same concept: var someXML = <text>Why not?</text>; Sadly, it's no longer supported in Firefox, but there are some ECMAScript variants still supporting E4X syntax, probably most notably ActionScript 3 as used in Adobe Flash. Personally I love JSX, since it gives you all of the same power as template-based languages with virtually turing complete DSLs, but with JavaScript instead of a DSL. Not always as elegant, but almost always easier to understand. My only real complaint is what JSX compiles down to. I think that it should either compile down to some data (like JSON data) or JSX should just be an alternative function call syntax. Instead, it compiles down to calls to React in most implementations (though usually, like with TypeScript for example, you can customize what it calls exactly.) The calls also vary depending on if the tag is lowercase or uppercase, since that's how React tells primitive tags apart from components. Frankly, a little ugly.
- sephoric 8y ago
  I actually like how it compiles down. In a native macOS app I just released this morning, I wrote originally in Preact, converting JSX to function calls to avoid a build phase, and eventually replaced the Preact function with a custom function that creates DOM elements directly. Not only was it a fun learning experience, but it took a relatively tiny amount of time to do, precisely because translating JSX to equivalent DOM node creation code is so predictable and transparent.
- thangngoc89 8y ago
  babel-plugin-transform-react-jsx accepts several options that allows you to configure what JSX is compiled to. You can see it in details in the docs here https://babeljs.io/docs/en/babel-plugin-transform-react-jsx https://babeljs.io/docs/en/babel-plugin-transform-react-jsx
arcosdev 8y ago
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') );
- mhink 8y ago
  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 https://reactjs.org/docs/react-without-jsx.html
  - mateuszf 8y ago
    Nah, still lot uglier than jsx IMO.
  - jhall1468 8y ago
    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.
  - Shorn 8y ago
    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 https://github.com/lihaoyi/scalatags
- Raphael 8y ago
  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') )
Klathmon 8y ago
It's not much of a difference, but take a look at the htm package. It uses template strings instead of requiring a parser, turning your example into something more like: return htm`<Some pseudoHTMLcode />`; https://github.com/developit/htm https://github.com/developit/htm

Really ? How do you generate HTML code in a composable way then ? Or is it that you just prefer the pseudo lisp way with createEl ?

jchw 8y ago

JSX makes your eyes bleed? Perhaps you would love E4X as well! Pretty much same concept: var someXML = <text>Why not?</text>; Sadly, it's no longer supported in Firefox, but there are some ECMAScript variants still supporting E4X syntax, probably most notably ActionScript 3 as used in Adobe Flash. Personally I love JSX, since it gives you all of the same power as template-based languages with virtually turing complete DSLs, but with JavaScript instead of a DSL. Not always as elegant, but almost always easier to understand. My only real complaint is what JSX compiles down to. I think that it should either compile down to some data (like JSON data) or JSX should just be an alternative function call syntax. Instead, it compiles down to calls to React in most implementations (though usually, like with TypeScript for example, you can customize what it calls exactly.) The calls also vary depending on if the tag is lowercase or uppercase, since that's how React tells primitive tags apart from components. Frankly, a little ugly.

sephoric 8y ago
I actually like how it compiles down. In a native macOS app I just released this morning, I wrote originally in Preact, converting JSX to function calls to avoid a build phase, and eventually replaced the Preact function with a custom function that creates DOM elements directly. Not only was it a fun learning experience, but it took a relatively tiny amount of time to do, precisely because translating JSX to equivalent DOM node creation code is so predictable and transparent.
thangngoc89 8y ago
babel-plugin-transform-react-jsx accepts several options that allows you to configure what JSX is compiled to. You can see it in details in the docs here https://babeljs.io/docs/en/babel-plugin-transform-react-jsx https://babeljs.io/docs/en/babel-plugin-transform-react-jsx

arcosdev 8y ago

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') );

mhink 8y ago
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 https://reactjs.org/docs/react-without-jsx.html
- mateuszf 8y ago
  Nah, still lot uglier than jsx IMO.
- jhall1468 8y ago
  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.
- Shorn 8y ago
  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 https://github.com/lihaoyi/scalatags
Raphael 8y ago
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') )

Klathmon 8y ago

It's not much of a difference, but take a look at the htm package. It uses template strings instead of requiring a parser, turning your example into something more like: return htm`<Some pseudoHTMLcode />`; https://github.com/developit/htm https://github.com/developit/htm