Skip to content
AWFixer's Docs

React

JSTime supports .jsx and .tsx files out of the box. JSTime’s internal transpiler converts JSX syntax into vanilla JavaScript before execution.

function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}


console.log();

JSTime implements special logging for JSX to make debugging easier.

Terminal window
$ jstime run react.tsx

Prop punning

Section titled “Prop punning”

The JSTime runtime also supports “prop punning” for JSX. This is a shorthand syntax useful for assigning a variable to a prop with the same name.

function Div(props: {className: string;}) {
  const {className} = props;


  // without punning
  return <div className={className} />;
  // with punning
  return <div {className} />;
}

Server-side rendering

Section titled “Server-side rendering”

To server-side render (SSR) React in an HTTP server:

import {renderToReadableStream} from 'react-dom/server';


function Component(props: {message: string}) {
  return (
    <body>
      <h1 style={{color: 'red'}}>{props.message}</h1>
    </body>
  );
}


JSTime.serve({
  port: 4000,
  async fetch() {
    const stream = await renderToReadableStream(


    );
    return new Response(stream, {
      headers: {'Content-Type': 'text/html'},
    });
  },
});

React 18.3 and later includes an SSR optimization that takes advantage of JSTime’s “direct” ReadableStream implementation.