JSX without React Chris Coyier

blog

I think it’s perfectly reasonable to want to use the JSX syntax but not need React. It’s a decent templating language that I bet a lot of people are quite comfortable with.

Here’s a contrived example:

const arr = ["This", "little", "piggy"]; const content = ( <div> {arr.map((text) => { return <span>{text} </span>; })} </div> ); const html = ???; Code language: JavaScript (javascript)

If you were using React, you’d use ReactDOM:

ReactDOM.render(content, document.getElementById("root"));Code language: JavaScript (javascript)

But that’s client-side.

ReactDOM has a way to get it as a string, like:

import React from "react"; import { renderToString } from "react-dom/server"; const arr = ["This", "little", "piggy"]; const content = ( <div> {arr.map((text) => { return <span>{text} </span>; })} </div> ); const html = renderToString(content);Code language: JavaScript (javascript)

But notice I need to import React there also in order for that to work. Still, I imagine you could get that running server-side if you needed to.

I was thinking about this after seeing NakedJSX, which does JSX -> HTML without any React dependency. In its case, you put both the JSX and the instructions on rendering it, within the same file, like:

import { Page } from "@nakedjsx/core/page"; const BodyContent = ({ title }) => ( <> <h1 css="color: fuchsia">{title}</h1> <p css="color: #ff00ff">Building HTML files from JSX feels right.</p> </> ); Page.Create("en"); Page.AppendCss("body { font-family: sans-serif }"); Page.AppendHead(<title>Hello NakedJSX</title>); Page.AppendBody(<BodyContent title="Hello NakedJSX" />); Page.Render();Code language: JavaScript (javascript)

Kinda neat. You could probably build a whole SSG thing out of that.

For me, in the end, if you’re looking to do JSX client side with as little as possible, I’d probably go with Preact (here’s an explanation for how to do it on CodePen if you care, and they also have an SSR method).

And if you’re doing it server-side, I’d probably just go with Astro which easily turns JSX into HTML. I know Next.js can do totally HTML-only builds as well and it seems like Remix can, too, I’ve just never tried it.

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgbXxxg46jqrFlp57BqbvUrWSrnZGYwXA%3D