3 ms·
I'm wondering what the advantages of JSX are now in a world with ES6 template strings? This seems plenty easy to read and write and has the benefit that it's p
by breck 11y ago
I'm wondering what the advantages of JSX are now in a world with ES6 template strings?
This seems plenty easy to read and write and has the benefit that it's pure JS and doesn't need to be compiled during development:
const listItem = item => `<li><a href="${item.link}">${item.name}</a></li>`
const listComponent = items => `<ul>${items.map(listItem).join("")}</ul>`
- vcarl 11y agoIt was discussed a long time ago. Some googling found this very old link http://facebook.github.io/jsx/#why-not-template-literals http://facebook.github.io/jsx/#why-not-template-literals
- breck 11y agoThanks for the link! This makes my case stronger as their example for why not to use literals is weak. Box should be a component that takes param(s), not a var for a tag name.
- lhorie 11y agoThe difference is in when the code blows up if there's a typo. With JSX/hyperscript, it blows up with a syntax error at parse time; with strings, it blows up at runtime.
- mg74 11y agoThe compile is a huuuge plus. If you do a error in your template string (e.g. forget a '>'), you won't catch it until you run it in the browser. The JSX will complain loudly when compiled. JSX >>>> ES6 template strings
- breck 11y agoAh. I guess html errors yes. If you add "use strict" you will catch js errors at compile time. Plus editor should provide autocomplete in template strings. I wonder if anyone has provided a highlighting package for highlighting html inside template strings.