@rkrupinski/react

An experimental, lightweight React alternative.

Table of contents:

• Getting started
• Example
• API
  • JSX
  • Top-level API
  • Hooks

Getting started

Install:

yarn add @rkrupinski/react

Make sure to set:

{
  "jsx": "react"
}

in your tsconfig.json -> "compilerOptions".

Now you're all set:

/* @jsx createElement */
/* @jsxFrag Fragment */

import {
  render,
  useState,
  useEffect,
  createElement,
  Fragment,
  type FC,
} from "@rkrupinski/react";

const App: FC = () => {
  const [clicked, setClicked] = useState(0);

  useEffect(() => {
    console.log(`Clicked ${clicked} times`);
  }, [clicked]);

  return (
    <>
      <h1>Hello!</h1>
      <button
        onClick={() => {
          setClicked((c) => c + 1);
        }}
      >
        {clicked}
      </button>
    </>
  );
};

const root = document.querySelector("#root") as HTMLElement;

render(<App />, root);

Example

• Live
• Source code

API

Read about React first, then come back here 🙏.

JSX

Name	React	Caveats
createElement	createElement	Requires custom pragma (/* @jsx createElement */). Limited to HTML elements (for the time being). Weakly (any) typed host elements (for the time being).
Fragment	Fragment	Requires custom pragma (/* @jsxFrag Fragment */).

Top-level API

Name	React	Caveats
render	render	No third argument (callback) No concurrent mode One root/app at a time (for the time being).
unmountAt	unmountComponentAtNode	-

Hooks

Name	React	Caveats
useState	useState	-
useMemo	useMemo	-
useCallback	useCallback	-
useEffect	useEffect	-