GitHunt
DE

Deseteral/stunning-jsx-renderer

Why do I keep putting this kind of stuff on GitHub...

stunning-jsx-renderer

๐ŸŽˆ โ˜ƒ๏ธ ๐ŸŽˆ โšก ๐ŸŽˆ ๏ธ๐Ÿพ ๐ŸŽˆ ๐Ÿ—ฟ ๐ŸŽˆ

Honestly it's not that stunning.

Acutally it's very simple.

And probably incorrect in some cases.

Just don't use it for anything serious and you will be fine.

What?

You put in JSX and out comes HTML string.

/** @jsx createElement */
const { renderToString, createElement } = require('./src/server-side');

const html = renderToString(
  <section>
    <div class="text">This is <strong>amazing!</strong></div>
    <img src="wonderful-kittens.jpg" />
  </section>
);

console.log(html); // '<section><div class="text">This is <strong>amazing!</strong></div><img src="wonderful-kittens.jpg"></img></section>'

There's also client-side version:

/** @jsx createElement */

domRender(
  <div class="text">This is <strong>amazing!</strong></div>
  document.body
);

console.log(document.body.innerHTML); // '<div class="text">This is <strong>amazing!</strong></div>'

Why?

I don't know, just wanted to try to figure out how JSX and ReactDOMServer#RenderToStaticMarkup and ReactDOM#render works I guess?

Languages

JavaScript100.0%

Contributors

Created October 3, 2018
Updated August 24, 2020
Deseteral/stunning-jsx-renderer | GitHunt