Provide an example using JSX

[trieloff]

I think we have built-in support for JSX, we just don't know it yet.

/** @jsx h */

import h from 'hyperscript';

const App = (logo) => (
  <div className="App">
    <img className="App-Logo" src={logo} alt="React Logo" />
    <h1 className="App-Title">Hello Parcel x React</h1>
  </div>
);

console.log(App("test.png").outerHTML);

(https://github.com/hyperhype/hyperscript has a React.createElement-compatible (enough) API and the /** @jsx h */ line instructs Babel to use h instead of React.createElement)

and

$ npx parcel build -t node src/*.jsx
$ node dist/html_test.js
<div class="App"><img class="App-Logo" src="test.png" alt="React Logo"><h1 class="App-Title">Hello Parcel x React</h1></div>

All that needs to be done is to create a proper main function that accepts the pipeline payload and returns the correct HTML.

[tripodsan]

don't you think it will be too confusing for people to mix a templating language that is primarily used clientside for serverside?

[trieloff]

No, there are a number of projects (e.g. next.js) that use JSX (and React) for server-side rendering.

[dplaton]

Would we use JSX to provide an alternative to HTL?

[tripodsan]

we could, yes. but I still think we shouldn't :-)

[trieloff]

In principle, Helix is agnostic to your choice of templating language and JSX has a couple of advantages over HTL:

• it allows easy mixing of markup and code (so you often don't need a pre.js)
• it is widely known

In order to demonstrate Helix's openness, I think it would well serve it's purpose.

[adobe-bot]

🎉 This issue has been resolved in version 2.5.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀